/* ============================================================
   CICOM BRAINS — 海外赴任前研修（実務編）
   ============================================================ */

/* Color policy: pure black and primary ink are #3e3a39; navy brand colors such as --deep remain unchanged. */

/* ---------- CSS Variables ---------- */
:root {
  --ink: #3e3a39;
  --body: #4b596b;
  --muted: #7b8795;
  --line: #dce3ea;
  --line-light: #edf1f5;
  --base: #f8f7f3;
  --white: #fff;
  --deep: #123743;
  --teal: #3f7477;
  --accent: #a85b43;
  --accent-dark: #8f4730;
  --max: 1120px;
  --narrow: 920px;
  --shadow: 0 18px 48px rgba(18,55,67,.09);
  --font-jp: "Noto Sans JP","Noto Sans CJK JP","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 32px;
  --fs-6: 56px;
  --sp-1: 16px;
  --sp-2: 24px;
  --sp-3: 32px;
  --sp-4: 48px;
  --sp-5: 64px;
  --sp-6: 96px;
  --mb-1: 5px;
  --mb-2: 10px;
  --mb-3: 30px;
  --mb-4: 60px;
  --mt-1: 5px;
  --mt-2: 10px;
  --mt-3: 30px;
  --mt-4: 60px;
  --pb-1: 5px;
  --pb-2: 10px;
  --pb-3: 30px;
  --pb-4: 60px;
  --pt-1: 5px;
  --pt-2: 10px;
  --pt-3: 30px;
  --pt-4: 60px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--base);
  font-family: var(--font-jp);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.85;
  letter-spacing: .01em;
  font-size: var(--fs-3);
}

a { color: inherit; }
.page { overflow: hidden; }

/* ---------- Type Scale ---------- */
h1, .hero h1, .hero-title {
  font-size: var(--fs-6);
  line-height: 1.16;
  font-weight: 900;
  margin: 0 0 26px;
  color: var(--white);
}

h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-5);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-4);
  line-height: 1.5;
  font-weight: 900;
}

h4 { font-size: var(--fs-4); line-height: 1.5; }

small, .note, .core-note, .eyebrow,
.option-label, .tag, .pill, .meta,
.date-label, .info-label, .event-label {
  font-size: var(--fs-1);
}

button, .btn, .cta-button,
.header-actions a, .nav a {
  font-size: var(--fs-2);
}

p, li, dd { font-size: var(--fs-3); }

/* ---------- Section ---------- */
section {
  padding: var(--sp-6) 0;
  scroll-margin-top: 96px;
}

.container {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.narrow {
  max-width: var(--narrow);
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  max-width: 790px;
  margin: 0 auto var(--sp-4);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--teal);
  font-size: var(--fs-1);
  font-weight: 900;
  letter-spacing: .14em;
}

.lead {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--body);
  font-size: var(--fs-3);
  line-height: 1.9;
}

.bg-white { background: #fff; }
.bg-soft  { background: #f4f6f5; }
.bg-base  { background: var(--base); }
.text-center {
  text-align: center;
}
.core-note.text-center{
  margin-top: var(--mt-2);
  display: block;
} 

/* ============================================================
   Common Header
   ============================================================ */
.cb-common-header {
  position: relative;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.cb-topbar {
  border-bottom: 1px solid var(--line-light);
  background: #f8f9fa;
}

.cb-topbar-inner {
  width: min(var(--max), calc(100% - 48px));
  height: 34px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-1);
  color: #5b6673;
  font-weight: 700;
}

.cb-topbar-inner a { text-decoration: none; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
  white-space: nowrap;
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border: 8px solid var(--deep);
  border-radius: 50%;
}

.global-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #465467;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.global-nav a { text-decoration: none; }
.global-nav a:hover { color: var(--deep); }

.header-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: #3b4756;
  font-size: var(--fs-1);
  font-weight: 800;
  background: #fff;
}

/* ---------- LP Anchor Nav ---------- */
.lp-anchor {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248,247,243,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(220,227,234,.72);
}

.lp-anchor-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.lp-anchor-title {
  color: var(--deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lp-anchor-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #596676;
  font-size: 13px;
  font-weight: 700;
}

.lp-anchor-nav a { text-decoration: none; }
.lp-anchor-nav a:hover { color: var(--deep); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 120px 0 120px;
  background-position: center;
  background: linear-gradient(rgba(62,58,57,0.3), rgba(62,58,57,0.5)), url(https://www.cicombrains.com/lp/cross-cultural-management/kv_bg.png) center bottom / cover no-repeat;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: 74px;
  align-items: center;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.hero-label b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  background: var(--deep);
  color: #fff;
  font-size: var(--fs-1);
  font-weight: 900;
}

.course-name {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
  color: var(--white);
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -.01em;
}

.course-name:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), transparent 74%);
}

.hero-copy {
  max-width: 760px;
  margin: 0;
  color: var(--white);
  font-size: var(--fs-3);
  line-height: 1.95;
}

.hero-copy + .hero-copy { margin-top: 10px; }

.hero-index {
  max-width: 780px;
  margin-top: 34px;
  border-top: 1px solid var(--deep);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.48);
}

.hero-index-head {
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 22px;
  align-items: start;
}

.hero-index-head strong {
  color: var(--deep);
  font-size: var(--fs-2);
  font-weight: 900;
  letter-spacing: .05em;
}

.hero-index-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.hero-themes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.hero-themes span {
  min-height: 50px;
  display: flex;
  align-items: center;
  color: #263443;
  font-size: var(--fs-2);
  font-weight: 850;
  border-bottom: 1px solid var(--line-light);
}

.hero-themes span:nth-last-child(-n+3) { border-bottom: none; }

.hero-themes span:before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--teal);
}

/* ============================================================
   Event Card
   ============================================================ */
.event-card {
  position: relative;
  background: #fff;
  border: none;
  box-shadow: 0 24px 64px rgba(18,55,67,.13);
  padding: 34px 30px;
  align-self: center;
}

.event-card:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--teal);
}

.event-label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.event-card h2 {
  margin: 0 0 22px;
  color: var(--deep);
  font-size: 27px;
  line-height: 1.42;
  letter-spacing: -.02em;
}

.date-row {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.date-row strong {
  display: block;
  color: var(--deep);
  font-size: 13px;
  margin-bottom: 4px;
}

.date-row p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-2);
  font-weight: 800;
  line-height: 1.65;
}

.event-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0 24px;
}

.event-meta span {
  min-height: 36px;
  display: grid;
  place-items: center;
  background: #f7f8f9;
  border: 1px solid var(--line);
  color: #4b5969;
  font-size: var(--fs-1);
  font-weight: 850;
}


/* ============================================================
   Button
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  text-decoration: none;
  color: #fff;
  background: var(--deep);
  border: 1px solid var(--deep);
  font-weight: 900;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.button:hover {
  background: #0b2933;
  border-color: #0b2933;
  transform: translateY(-2px);
}

.event-card .button { width: 100%; }

.bottom-cta .button {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}

/* ============================================================
   ISSUE セクション
   ============================================================ */
#issue {
  background: #fff;
  padding-bottom: 9%;
}

#issue .section-head {
  margin-bottom: 0;
}

.issue-orbit {
  position: relative;
  max-width: 1060px;
  min-height: 620px;
  margin: 0 auto;
  padding: 26px 0 18px;
}

/* 地球儀：初期状態 */
.issue-axis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.issue-axis:before,
.issue-axis:after { display: none; content: none; }

.issue-axis.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* pulse */
.issue-axis.pulse .uploaded-globe-icon {
  animation: globePulse 0.5s ease forwards;
}

@keyframes globePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 地球儀ラッパー */
.globe-wrap {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.uploaded-globe-block {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  text-align: center;
}

.uploaded-globe-label {
  display: block;
  color: var(--deep);
  font-size: var(--fs-2);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .055em;
  text-align: center;
  white-space: nowrap;
}

.uploaded-globe-icon {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
}

#globe-canvas {
  display: block;
  border-radius: 50%;
}

/* 都市ポイント */
.globe-city {
  position: absolute;
  z-index: 10;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
  cursor: default;
}

.globe-city.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

.globe-city-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.globe-city:hover .globe-city-label {
  opacity: 1;
}

/* 課題グループ共通 */
.issue-orbit-group {
  position: absolute;
  width: 300px;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1);
}

/* 左上：判断に迷う */
.group-judge {
  left: 0;
  top: 60px;
  transform: translateX(60px);
  text-align: center;
}

/* 右上：関係づくり */
.group-relation {
  right: 0;
  top: 60px;
  transform: translateX(-60px);
  text-align: center;
}

/* 真下中央：伝え方に悩む */
.group-tell {
  left: 30%;
  top: 360px;
  bottom: auto;
  width: 420px;
  opacity: 0;
  transform: translateY(-30px);
  text-align: center;
}

/* is-visible 後 */
.issue-orbit-group.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.group-tell.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 課題グループ見出し */
.issue-orbit-group h3 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: -.02em;
  text-align: center;
}

.issue-orbit-group h3:after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 8px auto 0;
}

/* 課題アイテム */
.issue-orbit-items {
  display: grid;
  gap: 8px;
}

.issue-orbit-items p {
  position: relative;
  margin: 0;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: .005em;
  text-align: left;
  white-space: nowrap;
  border-left: 3px solid transparent;
}

.issue-orbit-items p:before { display: none; }

.group-judge .issue-orbit-items,
.group-relation .issue-orbit-items {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.group-tell .issue-orbit-items {
  max-width: 420px;
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* カテゴリ別カラー */
.group-judge h3       { color: var(--teal); }
.group-judge h3:after { background: var(--teal); }
.group-judge .issue-orbit-items p {
  background: rgba(63,116,119,.08);
  border-left-color: var(--teal);
  color: #1e3f42;
}

.group-tell h3        { color: var(--accent); }
.group-tell h3:after  { background: var(--accent); }
.group-tell .issue-orbit-items p {
  background: rgba(168,91,67,.07);
  border-left-color: var(--accent);
  color: #3d1f14;
}

.group-relation h3       { color: #8a6d2f; }
.group-relation h3:after { background: #c8a84b; }
.group-relation .issue-orbit-items p {
  background: rgba(200,168,75,.09);
  border-left-color: #c8a84b;
  color: #3d3010;
}

/* 旧ISSUEレイアウト非表示 */
.issue-layout-v2, .issue-statement, .issue-statement-v6,
.challenge-board, .challenge-card,
.issue-clusters, .issue-clusters-original,
.issue-list, .issue,
.worry-field, .worry-field-bg, .worry-panels, .worry-panel,
.worry-card, .worry-mark, .issue-visual-grid,
.issue-category-grid, .issue-category, .issue-category-items,
.issue-simple-grid, .issue-simple-card,
.issue-flow, .issue-flow-group, .issue-flow-items,
.uploaded-point, .city-dot, .city-point,
.p1, .p2, .p3, .p4,
.p-tokyo, .p-singapore, .p-bangkok,
.p-shanghai, .p-london, .p-newyork {
  display: none;
}

/* ============================================================
   BACKGROUND セクション
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items: start;
}

.side-title          { position: sticky; top: 118px; }
.side-title h2       { text-align: left; font-size: 36px; }
.side-title p        { margin: 16px 0 0; color: var(--body); }

.article {
  background: #fff;
  border: 1px solid var(--line);
  padding: 42px 46px;
  box-shadow: 0 18px 46px rgba(18,55,67,.07);
}

.article p             { margin: 0 0 17px; color: #3f5064; }
.article p:last-child  { margin-bottom: 0; }

.callout {
  margin: 34px 0;
  padding: 28px 30px;
  background: #f6f8f7;
  border-top: 3px solid var(--teal);
}

.callout h3 { margin: 0 0 12px; color: var(--deep); font-size: 23px; line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.chips span {
  border: 1px solid var(--line);
  padding: 7px 12px;
  background: #fff;
  color: #425266;
  font-size: 13px;
  font-weight: 800;
}

/* ============================================================
   ABOUT セクション
   ============================================================ */
.about-v30 {
  padding: var(--sp-6) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(63,116,119,.07), transparent 36%),
    #f8f7f3;
}

.about-v30-container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.about-v30-head {
  max-width: 930px;
  margin: 0 auto var(--sp-4);
  text-align: center;
}

.about-v30-body {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid #dce4e7;
  box-shadow: 0 28px 70px rgba(18,55,67,.075);
}

.about-v30-article {
  margin: 0 auto var(--sp-4);
  padding: 0;
}

.about-v30-article p,
.about-v30-lead {
  width: 100%;
  margin: 0 0 var(--sp-3);
  padding: 0;
  background: transparent;
  border: 0;
  color: #263443;
  font-size: var(--fs-3);
  line-height: 2.08;
  font-weight: 500;
  letter-spacing: .012em;
}

.about-v30-lead {
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 850;
}

.about-v30-article p:last-child { margin-bottom: 0; }

.about-v30-risk {
  position: relative;
  width: 100%;
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  background: #f5f7f6;
  border: 1px solid #dce4e7;
  border-left: 4px solid #b86c4d;
  color: #405265;
  font-size: 15.8px;
  line-height: 1.98;
  font-weight: 500;
}

.about-v30-themes {
  margin: 0 auto;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
}

.about-v30-themes h3 {
  margin: 0 0 var(--sp-2);
  color: var(--deep);
  font-size: 20px;
  font-weight: 900;
  text-align: left;
  letter-spacing: -.02em;
}

.theme-row-v30 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line);
}

.theme-row-v30 div {
  min-height: 124px;
  padding: var(--sp-2);
  border-right: 1px solid var(--line);
  background: #fff;
  box-sizing: border-box;
}

.theme-row-v30 div:last-child { border-right: 0; }

.theme-row-v30 strong {
  display: block;
  margin: 0 0 8px;
  color: var(--deep);
  font-size: var(--fs-3);
  line-height: 1.45;
  font-weight: 900;
}

.theme-row-v30 span {
  display: block;
  color: #596676;
  font-size: 13.2px;
  line-height: 1.75;
  font-weight: 600;
}

.about-v30-themes .core-note {
  margin: var(--sp-1) 0 0;
  text-align: right;
  color: #87919c;
  font-size: 11.5px;
  line-height: 1.6;
}

/* Related course panel */
.about-v30-related,
.option-panel {
  margin-top: var(--sp-4);
  padding: 30px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid #c8d1d9;
  box-shadow: none;
}

.option-panel:before { display: none; content: none; }

.option-label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 900;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.option-panel h3 {
  margin: 0 0 14px;
  font-size: 23px;
  line-height: 1.45;
  color: #273445;
}

.option-panel p { margin: 0 0 12px; color: #4f5d6f; font-size: var(--fs-2); }

.option-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  align-items: stretch;
}

.option-mini {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.option-mini strong { display: block; margin-bottom: 6px; color: var(--deep); font-size: var(--fs-2); }
.option-mini span   { display: block; color: #4f5d6f; font-size: 13px; line-height: 1.65; }

/* リンクのみhover */
.option-mini-link { display: block; color: inherit; text-decoration: none; }
.option-mini-link:hover { border-color: #b8c7cd; background: #fbfcfc; }
.option-mini-link:hover strong { color: var(--teal); }

.option-sub-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  text-align: center;
}

.option-consult-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  font-size: var(--fs-2);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(63,116,119,.16);
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.option-consult-btn:after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.option-consult-btn:hover {
  transform: translateY(-2px);
  background: #315f62;
  border-color: #315f62;
  box-shadow: 0 14px 28px rgba(63,116,119,.20);
}

/* ============================================================
   FREE SESSION セクション
   ============================================================ */
.session {
  background: #edf3f2;
  color: var(--ink);
}

.session h2       { color: var(--ink); }
.session .lead    { color: var(--body); }
.session .eyebrow { color: var(--teal); }

.session-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-2);
}

.session-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
  box-shadow: 0 12px 30px rgba(18,55,67,.055);
}

.session-card b  { display: block; color: var(--teal); font-size: 13px; letter-spacing: .1em; margin-bottom: 18px; }
.session-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.46; }
.session-card p  { margin: 0; color: var(--body); font-size: var(--fs-2); }

/* ============================================================
   PROGRAM セクション
   ============================================================ */
.program {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.program-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.program-step b      { color: var(--teal); letter-spacing: .1em; }
.program-step strong { color: #263443; font-size: var(--fs-3); }

/* ============================================================
   RECOMMENDED セクション
   ============================================================ */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-2);
}

.recommend-card {
  min-height: 150px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px;
  box-shadow: 0 10px 26px rgba(18,55,67,.045);
}

.recommend-card b {
  display: inline-block;
  color: var(--teal);
  font-size: var(--fs-1);
  letter-spacing: .12em;
  margin-bottom: 16px;
}

.recommend-card p { margin: 0; color: #263443; font-size: var(--fs-3); font-weight: 800; line-height: 1.7; }

/* ============================================================
   SPEAKERS セクション
   ============================================================ */
.speaker-list { display: grid; gap: 24px; }

.speaker {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  align-items: start;
  padding: 38px 0;
  border-top: 1px solid var(--line);
}

.speaker:last-child { border-bottom: 1px solid var(--line); }

.portrait {
  width: 120px;
  height: 120px;
  background: transparent;
  overflow: hidden;
  margin: 0 auto;
}

.portrait img          { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait.contain img  { object-fit: contain; }

.speaker h3  { margin: 0 0 6px; font-size: 29px; }
.role        { color: var(--deep); font-weight: 900; font-size: 15px; margin-bottom: 18px; }
.speaker p   { margin: 0; color: #3f5064; font-size: var(--fs-2); line-height: 1.9; max-width: 680px; }
.speaker p+p { margin-top: 12px; }

/* ============================================================
   INFORMATION テーブル
   ============================================================ */
.overview-table { background: #fff; border: 1px solid var(--line); }

table { width: 100%; border-collapse: collapse; }

th, td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-2);
}

th {
  width: 220px;
  color: var(--deep);
  background: #f7f8f9;
  font-weight: 900;
}

tr:last-child th,
tr:last-child td { border-bottom: none; }

/* ============================================================
   BOTTOM CTA / FOOTER
   ============================================================ */
.bottom-cta {
  padding: 90px 0;
  background: var(--deep);
  color: #fff;
  text-align: center;
}

.bottom-cta h2         { margin: 0; color: #fff; font-size: clamp(30px,3.8vw,46px); }
.bottom-cta p          { margin: 14px auto 0; max-width: 760px; color: #dce7e7; }
.bottom-cta .button    { margin-top: 28px; }

.footer {
  padding: 24px;
  text-align: center;
  background: #17202c;
  color: #aab3bf;
  font-size: var(--fs-1);
}

/* ============================================================
   Course Panel
   ============================================================ */
.course-panel {
  background: #fff;
  border: none;
  box-shadow: 0 22px 58px rgba(18,55,67,.10);
  padding: 50px 54px;
}

.course-panel h2           { text-align: left; margin-bottom: 22px; }
.course-panel p            { margin: 0 0 16px; color: #3f5064; }
.course-panel p:last-child { margin-bottom: 0; }

.risk {
  margin: 30px 0;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  align-items: center;
}

.risk-mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 900;
  letter-spacing: .12em;
}

.risk-text {
  padding: 22px 24px;
  background: #fbfcfc;
  border: 1px solid var(--line);
  color: #3f5064;
}

/* ============================================================
   Motion / Animation
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* スクロールフェードイン対象 */
  .motion-ready .hero-copy > *,
  .motion-ready .hero-event,
  .motion-ready .bg-card,
  .motion-ready .about-v30-body,
  .motion-ready .session-card,
  .motion-ready .program-card,
  .motion-ready .recommended-card,
  .motion-ready .speaker-card,
  .motion-ready .info-card,
  .motion-ready .closing-inner {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .72s cubic-bezier(.22,1,.36,1),
      transform .72s cubic-bezier(.22,1,.36,1);
  }

  .motion-ready .is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .motion-ready .hero-copy > *:nth-child(1) { transition-delay: .04s; }
  .motion-ready .hero-copy > *:nth-child(2) { transition-delay: .10s; }
  .motion-ready .hero-copy > *:nth-child(3) { transition-delay: .18s; }
  .motion-ready .hero-copy > *:nth-child(4) { transition-delay: .26s; }
  .motion-ready .hero-event                 { transition-delay: .18s; }

  /* リンク・ボタンのhover */
  .button, .btn, .cta-button,
  .primary-btn, .secondary-btn,
  .nav-actions a, a[class*="btn"] {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background-color .22s ease,
      color .22s ease,
      border-color .22s ease;
  }

  .button:hover, .btn:hover, .cta-button:hover,
  .primary-btn:hover, .secondary-btn:hover,
  .nav-actions a:hover, a[class*="btn"]:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
    scroll-behavior: auto;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .global-nav { display: none; }
}

@media (max-width: 980px) {
  :root { --sp-5: 48px; --sp-6: 80px; }

  .header-actions            { display: none; }
  .hero-inner                { grid-template-columns: 1fr; }
  .event-card                { max-width: 520px; }
  .side-title                { position: relative; top: auto; }
  .split                     { grid-template-columns: 1fr; }
  .session-grid,
  .recommend-grid            { grid-template-columns: 1fr; }
  .hero-index-head           { grid-template-columns: 1fr; }
  .hero-themes               { grid-template-columns: repeat(2,1fr); }

  .hero-themes span:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-light); }
  .hero-themes span:nth-last-child(-n+2) { border-bottom: none; }

  /* ISSUE：縦並び */
  .issue-orbit {
    min-height: auto;
    padding: 0;
    display: grid;
    gap: 34px;
  }

  .issue-axis { display: none; }

  .issue-orbit-group,
  .group-judge,
  .group-tell,
  .group-relation {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    opacity: 1;
    transform: none;
    text-align: left;
    padding: 0 0 30px;
    border-bottom: 1px solid var(--line-light);
  }

  .issue-orbit-group:last-child       { border-bottom: none; }
  .issue-orbit-group h3               { text-align: left; }
  .issue-orbit-group h3:after         { margin-left: 0; }

  .group-tell .issue-orbit-items,
  .group-judge .issue-orbit-items,
  .group-relation .issue-orbit-items {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 8px;
  }

  .issue-orbit-items p               { white-space: normal; }

  .about-v30-container               { width: min(100% - 40px, 1120px); }
  .about-v30-body                    { padding: var(--sp-4); }

  .theme-row-v30                     { grid-template-columns: 1fr 1fr; }
  .theme-row-v30 div:nth-child(2)    { border-right: 0; }
  .theme-row-v30 div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .speaker                           { grid-template-columns: 1fr; }
  .course-panel                      { padding: 38px 34px; }
  .option-cols                       { grid-template-columns: 1fr; }

  th, td  { display: block; width: 100%; }
  th      { border-bottom: none; padding-bottom: 4px; }
  td      { padding-top: 4px; }
}

@media (max-width: 720px) {
  :root {
    --sp-1: 12px; --sp-2: 20px; --sp-3: 24px;
    --sp-4: 36px; --sp-5: 32px; --sp-6: 64px;
    --fs-3: 15px; --fs-4: 18px; --fs-5: 26px; --fs-6: 36px;
  }

  .site-header-inner,
  .lp-anchor-inner,
  .container,
  .hero-inner                { width: min(calc(100% - 32px), var(--max)); }

  .cb-topbar,
  .cb-topbar-inner           { display: none; }
  .lp-anchor-nav             { display: none; }
  .hero                      { padding: 54px 0 60px; }

  .hero-themes,
  .option-cols               { grid-template-columns: 1fr; }

  .hero-themes span          { border-bottom: 1px solid var(--line-light); }
  .hero-themes span:last-child { border-bottom: none; }

  .about-v30-container       { width: min(calc(100% - 32px), 1120px); }
  .about-v30-body            { padding: var(--sp-3); }
  .about-v30-article         { margin-bottom: var(--sp-4); }

  .about-v30-article p,
  .about-v30-lead,
  .about-v30-risk            { font-size: 15.5px; }

  .about-v30-risk            { padding: var(--sp-2); }

  .theme-row-v30             { grid-template-columns: 1fr; }

  .theme-row-v30 div,
  .theme-row-v30 div:nth-child(2),
  .theme-row-v30 div:last-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .theme-row-v30 div:last-child { border-bottom: 0; }

  .portrait                  { width: 170px; height: 170px; }

  .course-panel,
  .article                   { padding: 28px 22px; }
}


/* ============================================================
 v42 KV hierarchy adjustment
 - Main title is the hero h1.
 - Subtitle/catch uses the fixed type scale (--fs-4), not arbitrary clamp().
 ============================================================ */

.hero-copy{
max-width: 760px;
}

.hero-label{
margin-bottom: 24px;
}

/* subtitle / catch above the main title */
.course-name{
display: inline-block;
margin: 0 0 18px;
color: var(--white);
font-size: var(--fs-4);
line-height: 1.55;
font-weight: 900;
letter-spacing: -.01em;
text-wrap: balance;
}

.course-name:after{
bottom: -8px;
height: 2px;
background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
}

/* main KV title */
.hero h1,
.hero-title,
h1.hero-title{
margin: 0 0 28px;
color: var(--white);
font-size: var(--fs-6);
line-height: 1.16;
font-weight: 900;
letter-spacing: -.04em;
text-wrap: balance;
}

/* supporting copy under the title */
.hero-copy p,
.hero-copy{
color: var(--white);
font-size: var(--fs-3);
line-height: 1.95;
font-weight: 650;
}

@media (max-width: 980px){
.course-name{
  font-size: var(--fs-4);
}
section.issue-orbit-group.group-relation {
  order: 2;
}
section.issue-orbit-group.group-tell {
  order: 3;
}
}

@media (max-width: 720px){
.course-name{
  font-size: var(--fs-4);
  line-height: 1.55;
}
}


/* ============================================================
   v43 Date-specific dual CTA buttons
   - Two application forms can be linked separately.
   - Keeps the existing layout rhythm; buttons share one visual group.
   ============================================================ */

.event-actions,
.dual-cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.event-actions{
  margin-top:24px;
}

.event-actions .button,
.dual-cta .button{
  width:100%;
  min-height:52px;
  padding:14px 14px;
  font-size:var(--fs-2);
  line-height:1.35;
  white-space:nowrap;
}

.event-actions .button:first-child,
.dual-cta .button:first-child{
  background:var(--deep);
  border-color:var(--deep);
  color:#fff;
}

.event-actions .button:nth-child(2),
.dual-cta .button:nth-child(2){
  background:#fff;
  border-color:var(--deep);
  color:var(--deep);
}

.event-actions .button:nth-child(2):hover,
.dual-cta .button:nth-child(2):hover{
  background:#f6f8f7;
  color:var(--deep);
}

.dual-cta{
  width:min(520px,100%);
  margin:0 auto;
}

.bottom-cta .dual-cta{
  margin-top:28px;
}

.bottom-cta .dual-cta .button:first-child{
  background:#fff;
  border-color:#fff;
  color:var(--deep);
}

.bottom-cta .dual-cta .button:nth-child(2){
  background:transparent;
  border-color:rgba(255,255,255,.72);
  color:#fff;
}

.bottom-cta .dual-cta .button:nth-child(2):hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.form-anchor-set{
  position:relative;
  height:0;
}

.form-anchor-set span{
  position:absolute;
  top:-96px;
}

@media(max-width:720px){
  .event-actions,
  .dual-cta{
    grid-template-columns:1fr;
  }
}



/* v44 KV date rows as clickable choices */
.event-card .date-row-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-decoration:none;
  color:inherit;
  padding:16px 0;
  border-top:1px solid var(--line);
  transition:
    padding-left .22s ease,
    padding-right .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.event-card .date-row-link:hover{
  padding-left:14px;
  padding-right:14px;
  background:#f6f8f7;
  border-top-color:#c9d5da;
}

.event-card .date-row-link + .date-row-link{
  border-top:1px solid var(--line);
}

.date-main{
  display:block;
  min-width:0;
}

.date-apply{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  color:var(--teal);
  font-size:var(--fs-1);
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
}

.date-apply:after{
  content:"";
  width:7px;
  height:7px;
  margin-left:8px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

.event-card .event-meta{
  margin-top:20px;
}

@media(max-width:720px){
  .event-card .date-row-link{
    align-items:flex-start;
  }
  .date-apply{
    padding-top:4px;
  }
}


/* v45 CTA refinement
   - KV date links are stronger but keep a stable height on hover.
   - Lower-page dual CTAs use the same visual treatment for both dates.
*/

/* KV: make each date row feel like a selectable CTA card */
.event-card .date-row-link{
  min-height:76px;
  padding:16px 18px;
  margin:0 -18px;
  border-top:1px solid var(--line);
  background:#fff;
  border-left:4px solid transparent;
  box-shadow:none;
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.event-card .date-row-link:hover{
  padding:16px 18px;
  background:#f2f7f6;
  border-top-color:#c8d7d8;
  border-left-color:var(--teal);
  box-shadow:0 10px 22px rgba(18,55,67,.08);
  transform:translateY(-1px);
}

.event-card .date-row-link:focus-visible{
  outline:3px solid rgba(63,116,119,.28);
  outline-offset:2px;
}

.event-card .date-row-link strong{
  color:var(--deep);
  font-size:var(--fs-2);
  letter-spacing:.04em;
}

.event-card .date-row-link p{
  margin-top:3px;
  color:var(--ink);
  font-size:var(--fs-2);
  font-weight:900;
}

.date-apply{
  min-height:30px;
  padding:0 12px;
  border:1px solid var(--teal);
  background:var(--teal);
  color:#fff;
  font-size:var(--fs-1);
}

.date-apply:after{
  border-width:1.5px;
}

/* Lower-page date CTAs: same color, same emphasis */
.dual-cta .button,
.dual-cta .button:first-child,
.dual-cta .button:nth-child(2){
  background:var(--deep);
  border-color:var(--deep);
  color:#fff;
  box-shadow:0 12px 26px rgba(18,55,67,.14);
}

.dual-cta .button:hover,
.dual-cta .button:first-child:hover,
.dual-cta .button:nth-child(2):hover{
  background:#0b2933;
  border-color:#0b2933;
  color:#fff;
  box-shadow:0 16px 30px rgba(18,55,67,.18);
}

/* Bottom CTA keeps white button tone, but both dates are identical */
.bottom-cta .dual-cta .button,
.bottom-cta .dual-cta .button:first-child,
.bottom-cta .dual-cta .button:nth-child(2){
  background:#fff;
  border-color:#fff;
  color:var(--deep);
  box-shadow:none;
}

.bottom-cta .dual-cta .button:hover,
.bottom-cta .dual-cta .button:first-child:hover,
.bottom-cta .dual-cta .button:nth-child(2):hover{
  background:#edf3f2;
  border-color:#edf3f2;
  color:var(--deep);
  box-shadow:none;
}


/* ============================================================
   v46 color / type consolidation
   Color: 4 core colors
   Type: 5 font sizes
   ============================================================ */

:root{
  /* 4色ルール */
  --ink:#3e3a39;        /* text / black */
  --deep:#123743;       /* navy */
  --key:#dadf00;        /* CICOM key color */
  --course:#a588bd;     /* open-class icon color */

  /* 補助色は4色の透明度・白系のみで運用 */
  --body:var(--ink);
  --muted:rgba(62,58,57,.68);
  --teal:var(--deep);
  --accent:var(--course);
  --accent-dark:#8d73a6;
  --line:rgba(18,55,67,.16);
  --line-light:rgba(18,55,67,.09);
  --base:#f8f7f3;
  --white:#fff;

  /* 5サイズルール */
  --fs-1:12px;  /* label / note */
  --fs-2:14px;  /* nav / meta / button */
  --fs-3:16px;  /* body */
  --fs-4:22px;  /* small heading */
  --fs-5:34px;  /* section heading */
  --fs-6:56px;  /* legacy alias: hero only uses this value */
}

/* text colors */
body,
p, li, dd,
.article p,
.course-panel p,
.speaker p,
.option-panel p,
.option-mini span,
.theme-row-v30 span,
.session-card p,
.recommend-card p,
.side-title p,
.lead{
  color:var(--ink);
}

h2,
h3,
h4,
.program-step strong,
.recommend-card p,
.about-v30-article p,
.about-v30-lead{
  color:var(--ink);
}

.hero h1,
.hero-title,
.course-name,
.hero-copy,
.hero-copy p,
.hero-label,
.bottom-cta,
.bottom-cta h2,
.bottom-cta p{
  color:#fff;
}

/* navy as structural / CTA color */
.brand,
.global-nav a:hover,
.lp-anchor-title,
.uploaded-globe-label,
.event-card h2,
.date-row strong,
.date-row-link strong,
th,
.role,
.theme-row-v30 strong,
.option-mini strong,
.callout h3,
.option-panel h3{
  color:var(--deep);
}

.button,
.event-actions .button,
.dual-cta .button,
.date-apply{
  background:var(--deep);
  border-color:var(--deep);
  color:#fff;
}

.button:hover,
.event-actions .button:hover,
.dual-cta .button:hover{
  background:#0b2933;
  border-color:#0b2933;
  color:#fff;
}

/* course color: category accents */
.eyebrow,
.event-label,
.program-step b,
.session-card b,
.recommend-card b,
.group-tell h3,
.option-mini-link:hover strong{
  color:var(--course);
}

.event-card:before,
.group-tell h3:after,
.group-tell .issue-orbit-items p{
  border-left-color:var(--course);
}

.event-card:before,
.group-tell h3:after{
  background:var(--course);
}

/* key color: new-course badge and small highlights */
.hero-label b,
.hero-themes span:before,
.chips span{
  background:var(--key);
  color:var(--deep);
  border-color:var(--key);
}

/* issue colors consolidated */
.group-judge h3,
.group-relation h3{
  color:var(--deep);
}
.group-judge h3:after,
.group-relation h3:after{
  background:var(--deep);
}
.group-judge .issue-orbit-items p,
.group-relation .issue-orbit-items p{
  background:rgba(18,55,67,.06);
  border-left-color:var(--deep);
  color:var(--ink);
}
.group-tell .issue-orbit-items p{
  background:rgba(165,136,189,.10);
  color:var(--ink);
}

/* surface colors derived from white/base only */
.bg-white,
.event-card,
.article,
.about-v30-body,
.option-panel,
.session-card,
.recommend-card,
.overview-table,
.course-panel,
.option-mini,
.theme-row-v30 div{
  background:#fff;
}

.bg-soft,
.session{
  background:#f2f4f2;
}

.about-v30{
  background:
    radial-gradient(circle at 50% 0%, rgba(165,136,189,.10), transparent 36%),
    var(--base);
}

.callout,
.about-v30-risk,
.event-meta span,
th,
.risk-text{
  background:rgba(18,55,67,.04);
}

/* type scale: 5 practical sizes across the site */
body,
p, li, dd,
.lead,
.hero-copy,
.hero-copy p,
.article p,
.about-v30-article p,
.about-v30-lead,
.about-v30-risk,
.recommend-card p,
.program-step strong{
  font-size:var(--fs-3);
}

small,
.note,
.core-note,
.eyebrow,
.option-label,
.event-label,
.recommend-card b,
.event-meta span,
.footer{
  font-size:var(--fs-1);
}

button,
.button,
.btn,
.cta-button,
.header-actions a,
.nav a,
.global-nav,
.cb-topbar-inner,
.lp-anchor-title,
.lp-anchor-nav,
.date-row p,
.date-row strong,
.option-panel p,
.option-mini strong,
.option-mini span,
.session-card p,
.speaker p,
th, td{
  font-size:var(--fs-2);
}

h3,
h4,
.session-card h3,
.option-panel h3,
.about-v30-themes h3,
.callout h3,
.issue-orbit-group h3,
.speaker h3{
  font-size:var(--fs-4);
}

h2,
.section-head h2,
.side-title h2,
.about-v30-head h2,
.bottom-cta h2{
  font-size:var(--fs-5);
}

.hero h1,
.hero-title,
h1.hero-title{
  font-size:56px;
}

.course-name{
  font-size:var(--fs-4);
}

/* keep CTA hierarchy unified */
.event-card .date-row-link{
  border-left-color:transparent;
}
.event-card .date-row-link:hover{
  background:rgba(218,223,0,.13);
  border-left-color:var(--key);
}
.date-apply{
  background:var(--course);
  border-color:var(--course);
  color:#fff;
}

.option-consult-btn{
  background:var(--course);
  border-color:var(--course);
  color:#fff;
}
.option-consult-btn:hover{
  background:#9275ab;
  border-color:#9275ab;
  color:#fff;
}

/* bottom CTA */
.bottom-cta{
  background:var(--deep);
}
.bottom-cta .dual-cta .button,
.bottom-cta .dual-cta .button:first-child,
.bottom-cta .dual-cta .button:nth-child(2){
  background:#fff;
  border-color:#fff;
  color:var(--deep);
}

@media(max-width:720px){
  :root{
    --fs-3:15px;
    --fs-4:20px;
    --fs-5:28px;
  }
  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:38px;
  }
}


/* ============================================================
   v47 color hierarchy correction
   Intent:
   1. CV is the highest-priority action color.
   2. "新講座" label belongs to open-class color.
   3. Key color is used sparingly for CTA attention, not random decoration.
   ============================================================ */

:root{
  --ink:#3e3a39;
  --deep:#123743;
  --key:#dadf00;
  --course:#a588bd;
  --cv:var(--key);
  --cv-text:var(--deep);
  --sub-cv:var(--deep);
}

/* 新講座ラベル：公開講座カラー */
.hero-label b{
  background:var(--course);
  border-color:var(--course);
  color:#fff;
}

.hero-label span{
  color:#fff;
}

/* CV優先：メイン申し込み導線はキーカラー */
.button,
.dual-cta .button,
.dual-cta .button:first-child,
.dual-cta .button:nth-child(2){
  background:var(--cv);
  border-color:var(--cv);
  color:var(--cv-text);
  box-shadow:0 14px 30px rgba(218,223,0,.18);
}

.button:hover,
.dual-cta .button:hover,
.dual-cta .button:first-child:hover,
.dual-cta .button:nth-child(2):hover{
  background:#cbd000;
  border-color:#cbd000;
  color:var(--cv-text);
  box-shadow:0 18px 34px rgba(218,223,0,.24);
}

/* KVの日程リンク：カード全体をCVに寄せる */
.event-card .date-row-link{
  border:1px solid rgba(218,223,0,.55);
  border-left:5px solid var(--cv);
  background:rgba(218,223,0,.10);
  margin:0 0 10px;
  padding:15px 16px;
}

.event-card .date-row-link:hover{
  padding:15px 16px;
  background:rgba(218,223,0,.18);
  border-color:var(--cv);
  border-left-color:var(--cv);
  box-shadow:0 12px 26px rgba(18,55,67,.10);
  transform:translateY(-1px);
}

.date-apply{
  background:var(--cv);
  border-color:var(--cv);
  color:var(--cv-text);
}

/* 下部CTA内の白ボタン指定を解除し、CV色に統一 */
.bottom-cta .dual-cta .button,
.bottom-cta .dual-cta .button:first-child,
.bottom-cta .dual-cta .button:nth-child(2){
  background:var(--cv);
  border-color:var(--cv);
  color:var(--cv-text);
}

.bottom-cta .dual-cta .button:hover,
.bottom-cta .dual-cta .button:first-child:hover,
.bottom-cta .dual-cta .button:nth-child(2):hover{
  background:#cbd000;
  border-color:#cbd000;
  color:var(--cv-text);
}

/* サブ導線：講座組み合わせ相談はCVより一段低いネイビー */
.option-consult-btn{
  background:var(--sub-cv);
  border-color:var(--sub-cv);
  color:#fff;
  box-shadow:none;
}

.option-consult-btn:hover{
  background:#0b2933;
  border-color:#0b2933;
  color:#fff;
}

/* 公開講座カラーの役割：講座種別・セクションラベル中心 */
.eyebrow,
.event-label,
.option-label,
.recommend-card b,
.session-card b,
.program-step b{
  color:var(--course);
}

/* キーカラーはCV以外では点レベルに抑える */
.hero-themes span:before{
  background:var(--course);
}
.chips span{
  background:#fff;
  color:var(--deep);
  border-color:rgba(18,55,67,.18);
}


/* ============================================================
   v48 corporate CSS assumption + body text 16px base
   - common/css/style2016.css is loaded before this LP CSS.
   - LP-specific styles below intentionally override common CSS where needed.
   ============================================================ */

:root{
  --font-jp:"Noto Sans JP","Noto Sans CJK JP","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --fs-1:12px;
  --fs-2:14px;
  --fs-3:16px; /* body base */
  --fs-4:22px;
  --fs-5:34px;
  --fs-6:56px;
}

/* common CSS reset guard */
body .page{
  font-family:var(--font-jp);
  color:var(--ink);
  font-size:var(--fs-3);
  line-height:1.85;
}

/* Body text must be 16px base */
body,
p,
li,
dd,
td,
.article p,
.course-panel p,
.speaker p,
.option-panel p,
.session-card p,
.recommend-card p,
.side-title p,
.lead,
.hero-copy,
.hero-copy p,
.about-v30-article p,
.about-v30-lead,
.about-v30-risk,
.theme-row-v30 span,
.program-step strong{
  font-size:var(--fs-3);
}

/* Keep labels compact */
small,
.note,
.core-note,
.eyebrow,
.option-label,
.event-label,
.recommend-card b,
.session-card b,
.event-meta span,
.footer{
  font-size:var(--fs-1);
}

button,
.button,
.btn,
.cta-button,
.header-actions a,
.global-nav,
.cb-topbar-inner,
.lp-anchor-title,
.lp-anchor-nav,
.date-row strong,
.option-mini strong,
th{
  font-size:var(--fs-2);
}

/* Date/body-like text should not look undersized */
.date-row p,
.option-panel p,
.option-mini span,
.speaker p,
.session-card p,
th,
td{
  font-size:var(--fs-3);
}

/* KV image from existing cross-cultural-management LP */
.hero{
  background:
    linear-gradient(rgba(62,58,57,0.30), rgba(62,58,57,0.50)),
    url(https://www.cicombrains.com/lp/cross-cultural-management/kv_bg.png) center bottom / cover no-repeat;
}

/* Common CSS may affect links/buttons; keep LP CTAs controlled */
.button,
.dual-cta .button,
.event-card .date-row-link,
.option-consult-btn{
  text-decoration:none;
}

/* Mobile: do not shrink body copy below 16px */
@media(max-width:720px){
  :root{
    --fs-3:16px;
    --fs-4:20px;
    --fs-5:28px;
  }

  body,
  p,
  li,
  dd,
  td,
  .article p,
  .course-panel p,
  .speaker p,
  .option-panel p,
  .session-card p,
  .recommend-card p,
  .side-title p,
  .lead,
  .hero-copy,
  .hero-copy p,
  .about-v30-article p,
  .about-v30-lead,
  .about-v30-risk,
  .theme-row-v30 span,
  .program-step strong{
    font-size:var(--fs-3);
  }
}


/* v49 text alignment reset after common CSS
   共通CSSで広く center が当たるのをLP側で戻す。
   中央揃えが必要な見出しブロック・CTAだけ個別に残す。
*/

.page,
.page section,
.page article,
.page aside,
.page li,
.page dl,
.page dt,
.page dd,
.page table,
.page th,
.page td,
.hero-main,
.article,
.about-v30-article,
.about-v30-body,
.option-panel,
.session-card,
.recommend-card,
.speaker,
.speaker div,
.overview-table,
.course-panel,
.program,
.program-step,
.risk-text{
  text-align:left;
}

/* セクション見出しブロックは従来どおり中央 */
.section-head,
.section-head h2,
.about-v30-head,
.about-v30-head h2{
  text-align:center;
}

/* ISSUEのPC用オービット見出しは配置上中央を維持 */
.issue-orbit-group,
.issue-orbit-group h3{
  text-align:center;
}
.issue-orbit-items p{
  text-align:left;
}

/* CTA・メタ・フッターなど、中央配置が意図されている箇所 */
.event-meta span,
.uploaded-globe-block,
.uploaded-globe-label,
.option-sub-cta,
.dual-cta,
.bottom-cta,
.bottom-cta h2,
.bottom-cta p,
.footer{
  text-align:center;
}

/* テーブルは左揃えを明示 */
.overview-table th,
.overview-table td{
  text-align:left;
}

/* 登壇者写真だけ中央配置 */
.portrait{
  margin-left:auto;
  margin-right:auto;
}


/* v50 alignment + CV arrow consistency */

/* 「組み合わせの話を聞いてみる」は中央配置 */
.option-sub-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.option-consult-btn{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* 見出し上の英語ラベルは、セクションヘッド内では中央 */
.section-head .eyebrow,
.about-v30-head .eyebrow{
  display:block;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* サイド見出しだけは左揃えを維持 */
.side-title .eyebrow{
  display:inline-block;
  width:auto;
  margin-left:0;
  margin-right:0;
  text-align:left;
}

/* CVボタン共通：すべて > デザインを付与 */
.button,
.dual-cta .button,
.option-consult-btn{
  position:relative;
  gap:10px;
}

.button:after,
.dual-cta .button:after,
.option-consult-btn:after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  flex:0 0 auto;
}

/* date-apply は既に矢印あり。二重化防止 */
.date-apply:after{
  content:"";
}

/* event-card内の日時CTAの矢印も同じ太さに寄せる */
.date-apply:after{
  width:7px;
  height:7px;
  margin-left:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
}

/* ボタン内テキストと矢印の中央揃え */
.button,
.option-consult-btn{
  align-items:center;
  justify-content:center;
}


/* v52 button arrow alignment
   ボタン内の > はテキスト直後ではなく、右端基準で揃える。
*/

.button,
.dual-cta .button,
.option-consult-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-right:46px;
  padding-left:28px;
}

.button:after,
.dual-cta .button:after,
.option-consult-btn:after{
  position:absolute;
  right:22px;
  top:50%;
  margin-left:0;
  transform:translateY(-50%) rotate(45deg);
}

/* 横並び2CTAは矢印位置が揃って見えるよう幅・余白を統一 */
.dual-cta .button{
  min-width:0;
  text-align:center;
}

/* KV日程内の小さな申し込むラベルはテキスト直後で自然なので維持 */
.date-apply{
  position:static;
  padding:0 12px;
}
.date-apply:after{
  position:static;
  margin-left:8px;
  transform:rotate(45deg);
}

/* イベントカードの日程リンクは右の小CTA幅を固定して揃える */
.date-apply{
  min-width:82px;
  justify-content:center;
}


/* v53 risk highlight redesign + subtle motion */

/* ABOUT内のリスク文：単なる囲みではなく、注意喚起として成立させる */
.about-v30-risk{
  position:relative;
  margin:42px 0;
  padding:30px 34px 30px 88px;
  background:
    linear-gradient(90deg, rgba(165,136,189,.14), rgba(255,255,255,.96) 58%);
  border:1px solid rgba(165,136,189,.38);
  border-left:0;
  color:var(--ink);
  font-size:var(--fs-3);
  line-height:2.02;
  font-weight:650;
  box-shadow:0 18px 42px rgba(18,55,67,.06);
}

.about-v30-risk:before{
  content:"注意したい背景";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  letter-spacing:.12em;
  background:var(--course);
  color:#fff;
  font-size:var(--fs-1);
  font-weight:900;
}

.about-v30-risk:after{
  content:"";
  position:absolute;
  left:58px;
  top:28px;
  width:14px;
  height:14px;
  border-top:2px solid var(--course);
  border-right:2px solid var(--course);
  transform:rotate(45deg);
  opacity:.75;
}

/* リスク文直後の余白を整える */
.about-v30-risk + p{
  margin-top:0;
}

/* subtle motion */
@media (prefers-reduced-motion: no-preference){
  .motion-ready .hero-main,
  .motion-ready .event-card,
  .motion-ready .section-head,
  .motion-ready .article,
  .motion-ready .about-v30-body,
  .motion-ready .option-panel,
  .motion-ready .session-card,
  .motion-ready .program-step,
  .motion-ready .recommend-card,
  .motion-ready .speaker,
  .motion-ready .overview-table,
  .motion-ready .bottom-cta h2,
  .motion-ready .bottom-cta p,
  .motion-ready .bottom-cta .dual-cta{
    opacity:0;
    transform:translateY(18px);
    transition:
      opacity .72s cubic-bezier(.22,1,.36,1),
      transform .72s cubic-bezier(.22,1,.36,1);
  }

  .motion-ready .is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .motion-ready .session-card:nth-child(2),
  .motion-ready .recommend-card:nth-child(2),
  .motion-ready .program-step:nth-child(2){
    transition-delay:.06s;
  }
  .motion-ready .session-card:nth-child(3),
  .motion-ready .recommend-card:nth-child(3),
  .motion-ready .program-step:nth-child(3){
    transition-delay:.12s;
  }
  .motion-ready .recommend-card:nth-child(4),
  .motion-ready .program-step:nth-child(4){
    transition-delay:.18s;
  }
  .motion-ready .recommend-card:nth-child(5),
  .motion-ready .program-step:nth-child(5){
    transition-delay:.24s;
  }
  .motion-ready .recommend-card:nth-child(6),
  .motion-ready .program-step:nth-child(6){
    transition-delay:.30s;
  }

  .button,
  .date-row-link,
  .option-mini-link,
  .option-consult-btn,
  .session-card,
  .recommend-card{
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background-color .22s ease,
      border-color .22s ease;
  }

  .session-card:hover,
  .recommend-card:hover,
  .option-mini-link:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(18,55,67,.08);
  }

  .about-v30-risk{
    transition:
      transform .35s ease,
      box-shadow .35s ease;
  }

  .about-v30-risk.is-visible{
    transform:translateY(0);
  }
}

@media(max-width:720px){
  .about-v30-risk{
    padding:72px 22px 24px 22px;
  }
  .about-v30-risk:before{
    right:auto;
    bottom:auto;
    width:auto;
    height:42px;
    left:0;
    right:0;
    writing-mode:horizontal-tb;
  }
  .about-v30-risk:after{
    display:none;
  }
}


/* v54 risk highlight correction
   縦ラベル・飾り矢印をやめ、本文として自然に読める注意喚起ブロックへ修正。
*/

.about-v30-risk{
  position:relative;
  margin:36px 0;
  padding:28px 32px 28px 34px;
  background:#fff;
  border:1px solid rgba(165,136,189,.34);
  border-left:6px solid var(--course);
  color:var(--ink);
  font-size:var(--fs-3);
  line-height:2.05;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 16px 36px rgba(18,55,67,.055);
}

.about-v30-risk:before{
  content:"COMPLIANCE RISK";
  position:static;
  display:block;
  width:auto;
  height:auto;
  margin:0 0 12px;
  background:transparent;
  color:var(--course);
  writing-mode:horizontal-tb;
  font-size:var(--fs-1);
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}

.about-v30-risk:after{
  display:none;
  content:none;
}

.about-v30-risk + p{
  margin-top:0;
}

@media(max-width:720px){
  .about-v30-risk{
    padding:24px 22px;
    margin:30px 0;
  }
}


/* v55 KV label update */
.hero-label-single{
  display:inline-flex;
  align-items:center;
  gap:0;
  margin-bottom:24px;
  padding:0;
}

.hero-label-single span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  background:var(--course);
  color:#fff;
  font-size:var(--fs-2);
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
}


/* ============================================================
   v56 Page-specific global navigation
   ============================================================ */

.cb-common-header,
.cb-topbar,
.site-header{
  display:none;
}

.lp-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}

.lp-header-inner{
  width:min(var(--max), calc(100% - 48px));
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.lp-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  width:168px;
  text-decoration:none;
}

.lp-logo img{
  display:block;
  width:100%;
  height:auto;
}

.lp-global-nav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  font-size:var(--fs-2);
  font-weight:800;
  white-space:nowrap;
}

.lp-global-nav a{
  color:var(--ink);
  text-decoration:none;
  transition:color .18s ease;
}

.lp-global-nav a:hover{
  color:var(--deep);
}

.lp-header-cta{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.lp-header-cta a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 34px 0 16px;
  background:var(--cv);
  border:1px solid var(--cv);
  color:var(--cv-text);
  font-size:var(--fs-1);
  line-height:1;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-header-cta a:after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

.lp-header-cta a:hover{
  background:#cbd000;
  border-color:#cbd000;
  transform:translateY(-1px);
}

@media(max-width:1100px){
  .lp-global-nav{
    display:none;
  }
}

@media(max-width:720px){
  .lp-header-inner{
    width:min(calc(100% - 32px), var(--max));
    min-height:68px;
    gap:16px;
  }
  .lp-logo{
    width:142px;
  }
  .lp-header-cta{
    gap:6px;
  }
  .lp-header-cta a{
    min-height:34px;
    padding:0 24px 0 10px;
    font-size:11px;
  }
  .lp-header-cta a:after{
    right:10px;
  }
}

@media(max-width:460px){
  .lp-header-inner{
    flex-wrap:wrap;
    padding:12px 0;
  }
  .lp-header-cta{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .lp-header-cta a{
    width:100%;
  }
}


/* ============================================================
   v57 Free-session oriented header navigation
   ============================================================ */

.lp-global-nav{
  gap:28px;
}

.lp-header-cta-single a{
  min-width:190px;
  min-height:42px;
  font-size:var(--fs-2);
  padding:0 42px 0 20px;
}

.lp-header-cta-single a:after{
  right:18px;
}

@media(max-width:720px){
  .lp-header-cta-single{
    flex:1 1 auto;
    justify-content:flex-end;
  }
  .lp-header-cta-single a{
    min-width:150px;
    min-height:36px;
    padding:0 32px 0 14px;
    font-size:12px;
  }
}

@media(max-width:460px){
  .lp-header-cta-single{
    width:auto;
    display:flex;
  }
  .lp-header-cta-single a{
    width:auto;
    min-width:100%;
  }
}


/* ============================================================
   v58 Sticky header with two date CTAs
   ============================================================ */

.lp-header{
  position:sticky;
  top:0;
}

.lp-header-cta-dates{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}

.lp-header-cta-dates a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  min-width:108px;
  padding:0 34px 0 14px;
  background:var(--cv);
  border:1px solid var(--cv);
  color:var(--cv-text);
  font-size:var(--fs-2);
  line-height:1;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-header-cta-dates a:after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

.lp-header-cta-dates a:hover{
  background:#cbd000;
  border-color:#cbd000;
  transform:translateY(-1px);
}

@media(max-width:720px){
  .lp-header-cta-dates{
    gap:6px;
  }
  .lp-header-cta-dates a{
    min-width:86px;
    min-height:34px;
    padding:0 24px 0 9px;
    font-size:11px;
  }
  .lp-header-cta-dates a:after{
    right:9px;
    width:5px;
    height:5px;
  }
}

@media(max-width:460px){
  .lp-header-inner{
    flex-wrap:wrap;
    padding:12px 0;
  }
  .lp-header-cta-dates{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .lp-header-cta-dates a{
    width:100%;
  }
}


/* ============================================================
   v59 Header nav spacing / sticky correction
   - Nav is a reading guide; CTA is a clearly separated action area.
   - Header sticks reliably even if parent wrappers have overflow.
   ============================================================ */

html,
body{
  overflow-x:hidden;
}

.page{
  overflow:visible;
}

/* stickyを確実に効かせる */
.lp-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(18,55,67,.10);
}

body{
  padding-top:76px;
}

.lp-header-inner{
  min-height:76px;
  display:grid;
  grid-template-columns:168px minmax(0,1fr) auto;
  align-items:center;
  column-gap:32px;
}

/* ロゴ、項目ナビ、CVの役割を余白で分ける */
.lp-logo{
  width:168px;
}

.lp-global-nav{
  justify-content:flex-end;
  gap:0;
  padding-right:28px;
  border-right:1px solid rgba(18,55,67,.16);
}

.lp-global-nav a{
  position:relative;
  padding:0 15px;
  font-size:var(--fs-2);
  line-height:1;
}

.lp-global-nav a + a:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:14px;
  background:rgba(18,55,67,.16);
  transform:translateY(-50%);
}

/* CVはナビとは別領域として、左に余白を持たせる */
.lp-header-cta-dates{
  margin-left:0;
  padding-left:0;
  gap:10px;
}

.lp-header-cta-dates a{
  min-width:124px;
  min-height:40px;
  padding:0 34px 0 14px;
  font-size:13px;
  letter-spacing:.01em;
}

/* ヘッダー内の矢印位置を右端基準で統一 */
.lp-header-cta-dates a:after{
  right:14px;
}

@media(max-width:1100px){
  .lp-header-inner{
    grid-template-columns:160px 1fr;
    column-gap:20px;
  }
  .lp-global-nav{
    display:none;
  }
  .lp-header-cta-dates{
    justify-content:flex-end;
  }
}

@media(max-width:720px){
  body{
    padding-top:68px;
  }
  .lp-header-inner{
    width:min(calc(100% - 32px), var(--max));
    min-height:68px;
    grid-template-columns:136px 1fr;
    column-gap:14px;
  }
  .lp-logo{
    width:136px;
  }
  .lp-header-cta-dates{
    gap:6px;
  }
  .lp-header-cta-dates a{
    min-width:92px;
    min-height:34px;
    padding:0 24px 0 9px;
    font-size:11px;
  }
}

@media(max-width:460px){
  body{
    padding-top:112px;
  }
  .lp-header-inner{
    grid-template-columns:1fr;
    row-gap:10px;
    padding:12px 0;
  }
  .lp-logo{
    width:142px;
  }
  .lp-header-cta-dates{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .lp-header-cta-dates a{
    width:100%;
    min-width:0;
  }
}


/* ============================================================
   v60 ISSUE category color separation
   判断に迷う / 伝え方に悩む / 関係づくりに苦労する を区別
   ============================================================ */

.group-judge h3{
  color:var(--deep);
}
.group-judge h3:after{
  background:var(--deep);
}
.group-judge .issue-orbit-items p{
  background:rgba(18,55,67,.065);
  border-left-color:var(--deep);
  color:var(--ink);
}

.group-tell h3{
  color:var(--course);
}
.group-tell h3:after{
  background:var(--course);
}
.group-tell .issue-orbit-items p{
  background:rgba(165,136,189,.12);
  border-left-color:var(--course);
  color:var(--ink);
}

/* 関係づくりは本社キーカラーを淡く使い、CVボタンとは面積・濃度で差をつける */
.group-relation h3{
  color:#7f8300;
}
.group-relation h3:after{
  background:var(--key);
}
.group-relation .issue-orbit-items p{
  background:rgba(218,223,0,.16);
  border-left-color:var(--key);
  color:var(--ink);
}


/* ============================================================
   v61 Mobile layout correction
   スマホでの横はみ出し・KV・申込導線・課題セクション・カード類を調整
   ============================================================ */

@media(max-width:720px){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

  body{
    padding-top:112px;
  }

  .page{
    overflow:visible;
  }

  section{
    padding:56px 0;
    scroll-margin-top:118px;
  }

  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .lp-header-inner{
    width:min(calc(100% - 32px), var(--max));
  }

  /* header */
  .lp-header-inner{
    min-height:auto;
    padding:12px 0;
    display:grid;
    grid-template-columns:1fr;
    row-gap:10px;
  }

  .lp-logo{
    width:146px;
  }

  .lp-header-cta-dates{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .lp-header-cta-dates a{
    width:100%;
    min-width:0;
    min-height:38px;
    padding:0 26px 0 10px;
    font-size:12px;
  }

  .lp-header-cta-dates a:after{
    right:10px;
  }

  /* KV */
  .hero{
    padding:56px 0 64px;
    background-position:center bottom;
  }

  .hero-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }

  .hero-label-single{
    margin-bottom:18px;
  }

  .hero-label-single span{
    min-height:30px;
    padding:0 12px;
    font-size:12px;
  }

  .course-name{
    font-size:20px;
    line-height:1.5;
    margin-bottom:16px;
  }

  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:34px;
    line-height:1.22;
    letter-spacing:-.03em;
    margin-bottom:22px;
  }

  .hero-copy,
  .hero-copy p{
    font-size:16px;
    line-height:1.85;
  }

  .event-card{
    width:100%;
    padding:28px 22px;
  }

  .event-card h2{
    font-size:24px;
    line-height:1.45;
  }

  .event-card .date-row-link{
    margin:0 0 10px;
    padding:14px 14px;
    display:flex;
    align-items:center;
    gap:12px;
  }

  .event-card .date-row-link:hover{
    padding:14px 14px;
  }

  .date-main p{
    font-size:15px;
    line-height:1.55;
  }

  .date-apply{
    min-width:76px;
    min-height:28px;
    padding:0 10px;
    font-size:11px;
  }

  .event-meta{
    grid-template-columns:1fr 1fr;
  }

  /* section heading */
  .section-head{
    max-width:none;
    margin-bottom:32px;
  }

  .section-head h2,
  .about-v30-head h2,
  .side-title h2,
  .bottom-cta h2{
    font-size:28px;
    line-height:1.45;
    letter-spacing:-.02em;
  }

  .section-head p,
  .lead{
    font-size:16px;
    line-height:1.85;
  }

  /* issue section */
  #issue{
    padding-bottom:56px;
  }

  .issue-orbit{
    min-height:auto;
    display:grid;
    gap:26px;
    padding:0;
  }

  .issue-axis{
    display:none;
  }

  .issue-orbit-group,
  .group-judge,
  .group-tell,
  .group-relation{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    opacity:1;
    transform:none;
    text-align:left;
    padding:0 0 26px;
    border-bottom:1px solid var(--line-light);
  }

  .issue-orbit-group:last-child{
    border-bottom:none;
    padding-bottom:0;
  }

  .issue-orbit-group h3{
    text-align:left;
    font-size:22px;
  }

  .issue-orbit-group h3:after{
    margin-left:0;
  }

  .issue-orbit-items{
    max-width:none;
    gap:8px;
  }

  .issue-orbit-items p{
    white-space:normal;
    font-size:15px;
    line-height:1.7;
    padding:10px 12px;
  }

  /* background/about */
  .split{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }

  .side-title{
    position:relative;
    top:auto;
  }

  .article,
  .about-v30-body,
  .course-panel{
    padding:28px 22px;
  }

  .about-v30-head{
    margin-bottom:32px;
  }

  .about-v30-article p,
  .about-v30-lead,
  .about-v30-risk{
    font-size:16px;
    line-height:1.9;
  }

  .about-v30-risk{
    margin:30px 0;
    padding:24px 22px;
  }

  .theme-row-v30{
    grid-template-columns:1fr;
  }

  .theme-row-v30 div{
    min-height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .theme-row-v30 div:last-child{
    border-bottom:0;
  }

  .option-panel{
    padding:26px 22px;
  }

  .option-cols{
    grid-template-columns:1fr;
  }

  .option-consult-btn{
    width:100%;
    min-height:46px;
  }

  /* cards */
  .session-grid,
  .recommend-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .session-card,
  .recommend-card{
    min-height:auto;
    padding:22px;
  }

  .program-step{
    grid-template-columns:52px 1fr;
    gap:12px;
    padding:16px 0;
  }

  .program-step b{
    font-size:12px;
  }

  .speaker{
    grid-template-columns:1fr;
    gap:20px;
    padding:30px 0;
  }

  .portrait{
    width:120px;
    height:120px;
    margin-left:0;
    margin-right:auto;
  }

  .speaker h3{
    font-size:24px;
  }

  .role{
    font-size:14px;
    line-height:1.7;
  }

  /* table */
  th,
  td{
    display:block;
    width:100%;
    padding:14px 16px;
  }

  th{
    padding-bottom:6px;
    border-bottom:none;
  }

  td{
    padding-top:6px;
  }

  /* bottom CTA */
  .bottom-cta{
    padding:64px 0;
  }

  .dual-cta{
    width:100%;
    grid-template-columns:1fr;
    gap:10px;
  }

  .dual-cta .button{
    min-height:52px;
  }
}

@media(max-width:380px){
  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:31px;
  }

  .course-name{
    font-size:18px;
  }

  .lp-header-cta-dates a{
    font-size:11px;
    padding-left:8px;
  }
}


/* ============================================================
   v62 Mobile hard fix
   既存CSS・共通CSSの影響を最後にまとめて上書きするスマホ専用調整
   ============================================================ */

@media screen and (max-width: 767px){

  html{
    width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    padding-top:118px !important;
  }

  .page,
  main{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  img,
  canvas,
  svg,
  iframe{
    max-width:100% !important;
  }

  /* fixed header */
  .lp-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:9999 !important;
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid rgba(18,55,67,.12) !important;
  }

  .lp-header-inner{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:12px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }

  .lp-logo{
    width:142px !important;
    max-width:142px !important;
    display:block !important;
  }

  .lp-logo img{
    width:142px !important;
    height:auto !important;
    display:block !important;
  }

  .lp-global-nav{
    display:none !important;
  }

  .lp-header-cta,
  .lp-header-cta-dates{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .lp-header-cta a,
  .lp-header-cta-dates a{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:0 28px 0 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .lp-header-cta a:after,
  .lp-header-cta-dates a:after{
    right:11px !important;
  }

  /* common widths */
  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .site-header-inner,
  .lp-anchor-inner{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  section{
    padding:56px 0 !important;
    scroll-margin-top:126px !important;
  }

  /* hero */
  .hero{
    padding:48px 0 56px !important;
    min-height:auto !important;
    background-position:center bottom !important;
  }

  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
    align-items:stretch !important;
  }

  .hero-main{
    width:100% !important;
    max-width:100% !important;
  }

  .hero-label,
  .hero-label-single{
    display:inline-flex !important;
    margin:0 0 18px !important;
  }

  .hero-label-single span{
    min-height:30px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .course-name{
    display:block !important;
    width:100% !important;
    font-size:20px !important;
    line-height:1.55 !important;
    margin:0 0 16px !important;
  }

  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:33px !important;
    line-height:1.24 !important;
    letter-spacing:-.03em !important;
    margin:0 0 22px !important;
  }

  .hero-copy,
  .hero-copy p{
    width:100% !important;
    max-width:100% !important;
    font-size:16px !important;
    line-height:1.85 !important;
  }

  .event-card{
    width:100% !important;
    max-width:100% !important;
    padding:28px 22px !important;
    margin:0 !important;
  }

  .event-card h2{
    font-size:24px !important;
    line-height:1.45 !important;
  }

  .event-card .date-row-link{
    width:100% !important;
    min-height:0 !important;
    margin:0 0 10px !important;
    padding:14px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .event-card .date-row-link:hover{
    padding:14px 12px !important;
    transform:none !important;
  }

  .date-main{
    min-width:0 !important;
  }

  .date-main p{
    font-size:15px !important;
    line-height:1.55 !important;
    word-break:keep-all !important;
  }

  .date-apply{
    min-width:70px !important;
    min-height:28px !important;
    padding:0 8px !important;
    font-size:11px !important;
    flex:0 0 auto !important;
  }

  .event-meta{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  /* headings */
  .section-head{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 30px !important;
  }

  .section-head h2,
  .about-v30-head h2,
  .side-title h2,
  .bottom-cta h2{
    font-size:27px !important;
    line-height:1.45 !important;
    letter-spacing:-.02em !important;
  }

  .section-head p,
  .lead{
    font-size:16px !important;
    line-height:1.85 !important;
  }

  /* issue */
  #issue{
    padding-bottom:56px !important;
  }

  .issue-orbit{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .issue-axis{
    display:none !important;
  }

  .issue-orbit-group,
  .group-judge,
  .group-tell,
  .group-relation{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    opacity:1 !important;
    transform:none !important;
    padding:0 0 26px !important;
    margin:0 !important;
    text-align:left !important;
    border-bottom:1px solid var(--line-light) !important;
  }

  .issue-orbit-group:last-child{
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .issue-orbit-group h3{
    text-align:left !important;
    font-size:21px !important;
    margin:0 0 14px !important;
  }

  .issue-orbit-group h3:after{
    margin-left:0 !important;
  }

  .issue-orbit-items{
    max-width:100% !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .issue-orbit-items p{
    width:100% !important;
    white-space:normal !important;
    font-size:15px !important;
    line-height:1.72 !important;
    padding:10px 12px !important;
  }

  /* layout grids */
  .split,
  .session-grid,
  .recommend-grid,
  .option-cols,
  .theme-row-v30,
  .speaker{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .side-title{
    position:static !important;
    top:auto !important;
  }

  .article,
  .about-v30-body,
  .option-panel,
  .course-panel,
  .session-card,
  .recommend-card{
    width:100% !important;
    padding:24px 20px !important;
    min-height:0 !important;
  }

  .about-v30-head{
    margin-bottom:30px !important;
  }

  .about-v30-article p,
  .about-v30-lead,
  .about-v30-risk{
    font-size:16px !important;
    line-height:1.9 !important;
  }

  .about-v30-risk{
    margin:30px 0 !important;
    padding:22px 20px !important;
  }

  .theme-row-v30 div{
    min-height:0 !important;
    padding:20px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
  }

  .theme-row-v30 div:last-child{
    border-bottom:0 !important;
  }

  .option-consult-btn{
    width:100% !important;
    min-height:46px !important;
  }

  /* program */
  .program{
    width:100% !important;
    max-width:100% !important;
  }

  .program-step{
    grid-template-columns:48px 1fr !important;
    gap:12px !important;
    padding:16px 0 !important;
  }

  .program-step strong{
    font-size:16px !important;
    line-height:1.65 !important;
  }

  /* speakers */
  .speaker{
    padding:28px 0 !important;
  }

  .portrait{
    width:120px !important;
    height:120px !important;
    margin:0 !important;
  }

  .speaker h3{
    font-size:24px !important;
  }

  .role{
    font-size:14px !important;
    line-height:1.7 !important;
  }

  /* table */
  table,
  tbody,
  tr,
  th,
  td{
    display:block !important;
    width:100% !important;
  }

  th,
  td{
    padding:14px 16px !important;
    font-size:16px !important;
    line-height:1.75 !important;
  }

  th{
    padding-bottom:6px !important;
    border-bottom:0 !important;
  }

  td{
    padding-top:6px !important;
  }

  /* bottom CTA */
  .bottom-cta{
    padding:60px 0 !important;
  }

  .dual-cta{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .dual-cta .button{
    width:100% !important;
    min-height:52px !important;
  }
}

@media screen and (max-width: 380px){
  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:30px !important;
  }

  .course-name{
    font-size:18px !important;
  }

  .lp-header-cta a,
  .lp-header-cta-dates a{
    font-size:11px !important;
    padding-left:8px !important;
  }
}


/* ============================================================
   v63 Mobile visual refinements
   - KV背景はスマホ時に人物が見える位置へ調整
   - 地球儀はスマホ時も表示
   - 登壇者の写真・名前・肩書をスマホ時は中央揃え
   ============================================================ */

@media screen and (max-width: 767px){

  /* KV：人物が見えるように背景位置を調整 */
  .hero{
    background:
      linear-gradient(rgba(62,58,57,0.36), rgba(62,58,57,0.56)),
      url(https://www.cicombrains.com/lp/cross-cultural-management/kv_bg.png) 62% bottom / cover no-repeat;
  }

  /* スマホでも地球儀を表示し、課題リストの前に置く */
  .issue-orbit{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
  }

  .issue-axis{
    position:relative;
    inset:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:1;
    transform:none;
    order:0;
    width:100%;
    min-height:190px;
    margin:0 auto 4px;
  }

  .globe-wrap{
    width:190px;
    height:190px;
  }

  .uploaded-globe-block{
    width:190px;
    gap:8px;
  }

  .uploaded-globe-label{
    font-size:13px;
    color:var(--deep);
  }

  .uploaded-globe-icon{
    width:132px;
    height:132px;
    margin:0 auto;
  }

  #globe-canvas{
    width:132px;
    height:132px;
  }

  .group-judge{ order:1; }
  .group-tell{ order:2; }
  .group-relation{ order:3; }

  /* 登壇者：スマホでは写真・名前・肩書を中央揃え */
  .speaker{
    text-align:center;
  }

  .speaker .portrait,
  .portrait{
    margin-left:auto;
    margin-right:auto;
  }

  .speaker h3,
  .speaker .role,
  .role{
    text-align:center;
  }

  .speaker h3{
    margin-top:4px;
  }

  .speaker p{
    text-align:left;
  }
}

@media screen and (max-width: 420px){
  .hero{
    background-position:58% bottom;
  }
}


/* ============================================================
   v64 Globe points / nav z-index / date CTA wording
   ============================================================ */

/* 地球儀のオレンジポイントをCSSでも完全に非表示 */
.globe-city,
.globe-city-label,
.uploaded-point,
.city-dot,
.city-point{
  display:none;
}

/* Three.jsで生成される都市ポイント対策：canvas内以外の点は非表示 */
.uploaded-globe-icon > span,
.uploaded-globe-icon > i,
.uploaded-globe-icon > em{
  display:none;
}

/* ABOUTセクション付近でナビが埋もれないよう、ヘッダー階層を最上位に固定 */
.lp-header{
  z-index:2147483000;
  isolation:isolate;
}

.lp-header *{
  position:relative;
  z-index:1;
}

.about-v30,
.about-v30-container,
.about-v30-head,
.about-v30-body{
  position:relative;
  z-index:auto;
}

/* 固定ヘッダーとアンカー位置の整合 */
section,
#about,
#session,
#program,
#speakers,
#overview{
  scroll-margin-top:96px;
}

@media screen and (max-width:767px){
  section,
  #about,
  #session,
  #program,
  #speakers,
  #overview{
    scroll-margin-top:126px;
  }

  .lp-header{
    z-index:2147483000;
  }
}

/* CVボタンの日付文言に合わせた幅調整 */
.lp-header-cta-dates a{
  min-width:142px;
}

@media(max-width:720px){
  .lp-header-cta-dates a{
    min-width:0;
    font-size:11px;
    letter-spacing:0;
  }
}


/* ============================================================
   v65 Globe initial view
   地球儀の初期表示を日本・東アジアが見える位置に調整
   ============================================================ */

.uploaded-globe-icon canvas{
  transform:rotate(0.001deg);
}


/* ============================================================
   v66 Structure trial-focused preview
   講座説明を圧縮し、無料体験会の判断材料を厚くする構成案
   ============================================================ */

.about-compact .about-v30-head{
  margin-bottom:34px;
}

.about-compact-body{
  gap:30px;
}

.session-expanded{
  background:var(--base);
}

.session-grid-four{
  grid-template-columns:repeat(4,1fr);
}

.trial-focus-box{
  margin-top:30px;
  padding:28px 30px;
  background:#fff;
  border:1px solid var(--line);
  border-left:6px solid var(--cv);
}

.trial-focus-box h3{
  margin:0 0 14px;
  color:var(--deep);
  font-size:20px;
  line-height:1.55;
}

.trial-focus-box ul{
  margin:0;
  padding-left:1.2em;
}

.trial-focus-box li{
  font-size:16px;
  line-height:1.9;
}

.program-detailed .program-step{
  align-items:start;
}

.program-detailed .program-step p{
  margin:.45em 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.related-course-section .option-panel{
  margin-top:0;
}

@media(max-width:1080px){
  .session-grid-four{
    grid-template-columns:repeat(2,1fr);
  }
}

@media screen and (max-width:767px){
  .session-grid-four{
    grid-template-columns:1fr;
  }

  .trial-focus-box{
    padding:24px 20px;
  }

  .trial-focus-box h3{
    font-size:18px;
  }

  .program-detailed .program-step{
    grid-template-columns:48px 1fr;
  }
}


/* ============================================================
   v67 Copy-flow cleanup
   構成検討版のテキスト整合・仮文言反映
   ============================================================ */

.about-compact .core-note{
  margin-top:14px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.session-expanded .section-head{
  margin-bottom:36px;
}

.trial-focus-box ul li + li{
  margin-top:4px;
}


/* ============================================================
   v68 Trial confirmation cards: 2 x 2
   「無料体験会で確認できること」は読ませるセクションのため2列化
   ============================================================ */

.session-grid-four{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.session-expanded .session-card{
  min-height:260px;
  padding:30px 30px 32px;
}

.session-expanded .session-card h3{
  font-size:21px;
  line-height:1.55;
}

.session-expanded .session-card p{
  font-size:16px;
  line-height:1.9;
}

@media screen and (max-width:767px){
  .session-grid-four{
    grid-template-columns:1fr;
    gap:16px;
  }

  .session-expanded .session-card{
    min-height:0;
    padding:24px 20px;
  }
}


/* ============================================================
   v69 Copy refinement / nav label alignment
   見出しに合わせたグロナビ項目名と、COURSE CONCEPTの自然な文脈化
   ============================================================ */

.lp-global-nav a{
  padding:0 12px;
}

.about-compact .about-v30-lead{
  font-size:18px;
  line-height:1.95;
}

.trial-focus-box h3{
  max-width:760px;
}

@media(max-width:1180px){
  .lp-global-nav a{
    padding:0 9px;
    font-size:12px;
  }
}


/* ============================================================
   v70 Trial LP flow optimization
   課題 → 必要性 → 誰向けか → 何が確認できるか → 当日の流れ
   ============================================================ */

#recommend{
  scroll-margin-top:96px;
}

.recommend{
  background:var(--base);
}

.recommend + .session-expanded{
  border-top:1px solid var(--line-light);
}

.session-expanded .section-head{
  margin-bottom:34px;
}

.session-expanded .dual-cta{
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:1180px){
  .lp-global-nav a{
    padding:0 8px;
  }
}

@media screen and (max-width:767px){
  #recommend{
    scroll-margin-top:126px;
  }
}


/* ============================================================
   v71 Recommended order / nav wording correction
   おすすめ対象を体験会内容の前へ確実に移動、グロナビ文言を自然化
   ============================================================ */

.lp-global-nav a{
  padding:0 11px;
}

#recommend{
  scroll-margin-top:96px;
}

.recommend{
  background:var(--base);
}

.recommend + .session,
.recommend + .session-expanded{
  border-top:1px solid var(--line-light);
}

@media(max-width:1180px){
  .lp-global-nav a{
    padding:0 8px;
    font-size:12px;
  }
}

@media screen and (max-width:767px){
  #recommend{
    scroll-margin-top:126px;
  }
}


/* ============================================================
   v72 KV wording / global nav cleanup
   KV左は新講座価値、右カードに無料体験会情報を集約
   ============================================================ */

.lp-global-nav{
  padding-right:30px;
}

.lp-global-nav a{
  padding:0 13px;
}

/* KVの強調テキストに少しだけ字間のゆとりを持たせる */
.hero-title,
.hero h1,
h1.hero-title{
  letter-spacing:.015em;
  font-feature-settings:"palt" 1;
}

.course-name{
  letter-spacing:.025em;
}

.hero-label-single span{
  letter-spacing:.08em;
}

@media(max-width:1180px){
  .lp-global-nav a{
    padding:0 9px;
    font-size:12px;
  }
}

@media screen and (max-width:767px){
  .hero-title,
  .hero h1,
  h1.hero-title{
    letter-spacing:.005em;
  }

  .course-name{
    letter-spacing:.015em;
  }
}


/* ============================================================
   v73 Short English labels / section background separation
   英語ラベルは短いカテゴリ語に統一し、FOCUSとTARGETを別セクションとして見せる
   ============================================================ */

/* FOCUS：講座の方向性は白背景で読ませる */
.about-compact,
.about-redesign.about-compact{
  background:#fff;
}

/* TARGET：対象者は判断ブロックとして淡い背景に分ける */
#recommend,
.recommend{
  background:var(--base);
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}

/* EXPERIENCE：次の体験会内容は白背景に戻して、流れを切り替える */
#session.session-expanded,
.session-expanded{
  background:#fff;
}

/* 短い英語ラベルをデザインラベルとして安定させる */
.eyebrow{
  letter-spacing:.16em;
  font-weight:800;
}

/* セクション境界の余白に意図を持たせる */
.about-compact + #recommend,
#recommend + #session{
  margin-top:0;
}

@media screen and (max-width:767px){
  #recommend,
  .recommend{
    border-top:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
  }
}


/* ============================================================
   v74 KV title line break / placeholder copy
   KVタイトルは指定位置で改行し、行間・字間を調整
   ============================================================ */

.hero-title .hero-title-line,
.hero h1 .hero-title-line,
h1.hero-title .hero-title-line{
  display:inline-block;
}

.hero-title br,
.hero h1 br,
h1.hero-title br{
  display:block;
}

.hero-title,
.hero h1,
h1.hero-title{
  line-height:1.18;
}

@media screen and (max-width:767px){
  .hero-title,
  .hero h1,
  h1.hero-title{
    line-height:1.22;
  }
}


/* ============================================================
   v75 Forced KV title line break
   h1内の各行をblock化し、指定位置で確実に改行
   ============================================================ */

.hero-title{
  display:block;
  white-space:normal;
}

.hero-title .hero-title-line{
  display:block;
  white-space:nowrap;
}

.hero-title .hero-title-line + .hero-title-line{
  margin-top:.04em;
}

@media screen and (max-width:767px){
  .hero-title .hero-title-line{
    white-space:normal;
  }
}


/* ============================================================
   v76 Option 2 cleanup / free information session wording
   - titleタグはHTMLタグなし
   - 無料説明会に表記統一
   - EXPERIENCEパネルを3枚構成へ
   ============================================================ */

.session-expanded .section-head{
  max-width:840px;
}

.session-expanded .section-head .lead{
  max-width:820px;
  text-align:left;
}

.section-head .lead + .lead,
.session-expanded .lead-sub{
  margin-top:14px;
}

.session-grid-three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.session-grid-three .session-card{
  min-height:300px;
  padding:32px 28px 34px;
  display:flex;
  flex-direction:column;
  border-top:5px solid var(--course);
}

.session-grid-three .session-card b{
  margin-bottom:18px;
}

.session-grid-three .session-card h3{
  min-height:4.6em;
  margin-bottom:14px;
  font-size:20px;
  line-height:1.55;
}

.session-grid-three .session-card p{
  margin-top:auto;
  font-size:16px;
  line-height:1.9;
}

@media(max-width:980px){
  .session-grid-three{
    grid-template-columns:1fr;
  }

  .session-grid-three .session-card{
    min-height:0;
  }

  .session-grid-three .session-card h3{
    min-height:0;
  }
}

@media screen and (max-width:767px){
  .session-expanded .section-head .lead{
    text-align:left;
  }

  .session-grid-three{
    gap:16px;
  }

  .session-grid-three .session-card{
    padding:24px 20px;
  }
}


/* ============================================================
   v80 ISSUE to FOCUS transition
   ISSUEとFOCUSの切り替わりを明確にし、セクション間の余白を調整
   ============================================================ */

/* ISSUE下の余白を少し詰めて、次のFOCUSへ自然につなぐ */
#issue{
  padding-bottom:64px;
}

/* FOCUSは淡い背景にして、課題提示から講座の方向性へ切り替える */
.about-compact,
.about-redesign.about-compact{
  background:var(--base);
  padding-top:72px;
}

/* FOCUS内の本文カードは白のまま残し、背景との差を作る */
.about-compact .about-v30-body,
.about-redesign.about-compact .about-v30-body{
  background:#fff;
}

/* ISSUE補足文から次セクションまでの間延びを抑える */
.issue-orbit-note{
  margin-bottom:0;
}

@media screen and (max-width:767px){
  #issue{
    padding-bottom:52px;
  }

  .about-compact,
  .about-redesign.about-compact{
    padding-top:56px;
  }
}


/* ============================================================
   v81 FOCUS / TARGET background separation
   FOCUSを淡い背景、TARGETを白背景にして連続セクションの同色化を解消
   ============================================================ */

/* FOCUS：課題から講座の方向性へ切り替える淡い背景 */
.about-compact,
.about-redesign.about-compact{
  background:var(--base);
}

/* TARGET：おすすめ対象は白背景に戻して、FOCUSと分離 */
#recommend,
.recommend{
  background:#fff;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}

/* FOCUS → TARGET の間は詰めすぎず、ただし同一面に見えないよう境界を明確化 */
.about-compact + #recommend,
.about-redesign.about-compact + #recommend{
  margin-top:0;
}

@media screen and (max-width:767px){
  #recommend,
  .recommend{
    background:#fff;
  }

  .recommend-card{
    background:var(--base);
  }
}


/* ============================================================
   v82 TARGET / EXPERIENCE / AGENDA unified background
   TARGETからAGENDAまでは同じ白背景で自然につなぎ、セクション間ボーダーを削除
   ============================================================ */

/* TARGETとEXPERIENCE間の境界線を削除 */
#recommend,
.recommend{
  background:#fff;
  border-top:0;
  border-bottom:0;
}

.recommend + .session,
.recommend + .session-expanded{
  border-top:0;
}

/* TARGET〜AGENDAまでは白背景で統一 */
#session.session-expanded,
.session-expanded,
#program.bg-white{
  background:#fff;
}

/* セクションの連続感を出すため、間の余白をやや抑える */
#recommend{
  padding-bottom:72px;
}

#session{
  padding-top:72px;
  padding-bottom:72px;
}

#program{
  padding-top:72px;
}

@media screen and (max-width:767px){
  #recommend{
    padding-bottom:56px;
  }

  #session{
    padding-top:56px;
    padding-bottom:56px;
  }

  #program{
    padding-top:56px;
  }
}


/* ============================================================
   v83 Inline style consolidation
   HTMLに直書きされていた調整をCSSへ移動し、対象を限定して管理
   ============================================================ */

/* ISSUE冒頭説明文：画像で指定されていた左揃え */
#issue .section-head .lead{
  text-align:left;
}

/* 地球儀下の補足文：中央揃え・ブロック表示 */
#issue .issue-orbit-note{
  display:block;
  max-width:820px;
  margin:18px auto 0;
  color:var(--ink);
  font-size:16px;
  line-height:1.95;
  font-weight:700;
  text-align:center;
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    transform .58s cubic-bezier(.22,1,.36,1);
}

#issue .issue-orbit-note.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* 地球儀関連の展開速度を少し速める */
#issue .issue-axis{
  transition:
    opacity .48s cubic-bezier(.22,1,.36,1),
    transform .48s cubic-bezier(.22,1,.36,1);
}

#issue .issue-orbit-group{
  transition:
    opacity .46s cubic-bezier(.22,1,.36,1),
    transform .46s cubic-bezier(.22,1,.36,1);
}

.pc-only{
  display:inline;
}

@media screen and (min-width:981px){
  #issue .issue-orbit{
    min-height:680px;
    padding-bottom:44px;
  }
}

@media screen and (max-width:980px){
  #issue .issue-orbit-note{
    margin-top:24px;
  }
}

@media screen and (max-width:767px){
  #issue .issue-orbit-note{
    margin-top:14px;
    text-align:left;
  }

  .pc-only{
    display:none;
  }
}



/* セッション内CTA配置 */
.session-cta-block{
  margin-top:34px;
  text-align:center;
}


/* ============================================================
   v84 ISSUE note alignment fix
   広域の text-align リセットに負けないよう、原因側を弱めてから中央揃えを指定
   ============================================================ */

#issue .issue-orbit-note{
  text-align:center;
}

@media screen and (max-width:767px){
  #issue .issue-orbit-note{
    text-align:left;
  }
}


/* ============================================================
   v85 Section lead alignment
   セクション見出し下のリード文は全て左揃えに統一
   ============================================================ */

.section-head .lead,
.about-v30-head .lead,
.side-title .lead{
  text-align:left;
}

.section-head p.lead,
.about-v30-head p.lead{
  text-align:left;
}

/* 見出し自体と英語ラベルは中央のまま */
.section-head h2,
.about-v30-head h2,
.section-head .eyebrow,
.about-v30-head .eyebrow{
  text-align:center;
}

/* CTA直下などの注記は対象外。明示的に中央揃えを維持 */
.core-note.text-center,
.bottom-cta .core-note,
#issue .issue-orbit-note{
  text-align:center;
}

@media screen and (max-width:767px){
  .section-head .lead,
  .about-v30-head .lead,
  .side-title .lead{
    text-align:left;
  }

  #issue .issue-orbit-note{
    text-align:left;
  }
}


/* ============================================================
   v88 Panel background optimized
   recommend-card / session-card の背景は既存の base 色を白で薄めて使用
   色数を増やさず、主張を抑えたカード面にする
   ============================================================ */

#recommend .recommend-card,
#session .session-card{
  background:#fdfcf9;
  background:color-mix(in srgb, var(--base) 38%, #fff);
  border-color:rgba(18,55,67,.10);
  box-shadow:none;
}

/* EXPERIENCEの上部ラインも、色は使うが面積と濃度を抑える */
#session .session-grid-three .session-card{
  border-top:2px solid color-mix(in srgb, var(--course) 22%, #fff);
}

/* ラベル色は既存のcourse色を薄めて使用 */
#recommend .recommend-card b,
#session .session-card b{
  color:color-mix(in srgb, var(--course) 72%, var(--ink));
}

/* 非リンクカードのホバー演出は無効 */
#recommend .recommend-card:hover,
#session .session-card:hover{
  background:#fdfcf9;
  background:color-mix(in srgb, var(--base) 38%, #fff);
  box-shadow:none;
  transform:none;
}

@media (prefers-reduced-motion: no-preference){
  #recommend .recommend-card:hover,
  #session .session-card:hover{
    background:#fdfcf9;
    background:color-mix(in srgb, var(--base) 38%, #fff);
    box-shadow:none;
    transform:none;
  }
}


/* ============================================================
   v89 EXPERIENCE card top border restore
   「無料説明会で確認できること」のパネル上線は残す
   ============================================================ */

#session .session-grid-three .session-card{
  border-top:5px solid var(--course);
}


/* ============================================================
   v93 LP Word update, layout-safe
   既存FOCUSレイアウトを維持しつつ、RISKを追加
   ============================================================ */

.issue-bridge{
  max-width:900px;
  margin:34px auto 0;
  padding:24px 28px;
  border-radius:18px;
  background:color-mix(in srgb, var(--base) 46%, #fff);
  border:1px solid rgba(18,55,67,.10);
  text-align:left;
}

.issue-bridge p{
  margin:0;
  color:var(--ink);
  font-size:15px;
  line-height:1.9;
  font-weight:700;
}

.issue-bridge p + p{
  margin-top:8px;
}

.risk-section{
  padding:86px 0;
  background:#fff;
  border-top:1px solid rgba(18,55,67,.08);
  border-bottom:1px solid rgba(18,55,67,.08);
}

.risk-list{
  max-width:920px;
  margin:0 auto;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(18,55,67,.14);
}

.risk-list li{
  position:relative;
  margin:0;
  padding:18px 10px 18px 34px;
  border-bottom:1px solid rgba(18,55,67,.14);
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  line-height:1.75;
}

.risk-list li::before{
  content:"";
  position:absolute;
  left:8px;
  top:31px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--course);
}

.risk-closing{
  max-width:920px;
  margin:28px auto 0;
  padding:0 0 0 18px;
  border-left:4px solid var(--course);
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  line-height:1.9;
}

.focus-session-bridge{
  max-width:980px;
  margin:28px auto 0;
  padding:22px 28px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(18,55,67,.12);
  box-shadow:0 10px 26px rgba(18,55,67,.045);
  text-align:left;
}

.focus-session-bridge span{
  display:inline-block;
  margin-bottom:6px;
  color:var(--course);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.focus-session-bridge p{
  margin:0;
  color:var(--ink);
  font-size:15px;
  line-height:1.85;
  font-weight:700;
}

@media screen and (max-width:767px){
  .issue-bridge{
    margin-top:24px;
    padding:20px;
  }

  .risk-section{
    padding:64px 0;
  }

  .risk-list li{
    padding:16px 0 16px 26px;
    font-size:15px;
  }

  .risk-list li::before{
    left:4px;
    top:29px;
  }

  .risk-closing{
    margin-top:24px;
    padding-left:14px;
    font-size:15px;
  }

  .focus-session-bridge{
    margin-top:22px;
    padding:20px;
  }
}


/* ============================================================
   v94 User feedback refinements
   ISSUE強調、RISK画像化、FOCUS配置整理
   ============================================================ */

.issue-bridge.issue-bridge-emphasis{
  max-width:900px;
  margin:34px auto 0;
  padding:24px 30px;
  border-radius:18px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--course) 10%, #fff), #fff);
  border:0;
  box-shadow:0 10px 24px rgba(18,55,67,.045);
  text-align:left;
}

.issue-bridge.issue-bridge-emphasis span{
  display:block;
  margin:0 0 8px;
  color:var(--ink);
  font-size:17px;
  font-weight:800;
  line-height:1.7;
}

.issue-bridge.issue-bridge-emphasis p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  line-height:1.9;
}

.risk-section{
  background:#fff;
  border-top:0;
  border-bottom:0;
}

.risk-figure{
  max-width:980px;
  margin:0 auto;
  padding:0;
  text-align:center;
}

.risk-figure img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}

.risk-section .risk-list{
  display:none;
}

.risk-closing.risk-closing-natural{
  max-width:920px;
  margin:28px auto 0;
  padding:24px 28px;
  border-left:0;
  border-radius:18px;
  background:color-mix(in srgb, var(--base) 46%, #fff);
  color:var(--ink);
  font-size:16px;
  font-weight:600;
  line-height:1.9;
}

.risk-closing.risk-closing-natural p{
  margin:0;
}

.risk-closing.risk-closing-natural p + p{
  margin-top:8px;
}

.about-v30-head .lead-sub{
  margin-top:14px;
}

.about-v30-body.about-compact-body{
  grid-template-columns:1fr;
}

.about-v30-body .about-v30-article{
  display:none;
}

.theme-row-v30.theme-row-word{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.theme-row-v30.theme-row-word div{
  justify-content:flex-start;
  align-items:flex-start;
  gap:6px;
}

.theme-row-v30.theme-row-word strong{
  white-space:nowrap;
}

.theme-row-v30.theme-row-word span{
  font-size:14px;
  line-height:1.7;
}

@media screen and (max-width:767px){
  .issue-bridge.issue-bridge-emphasis{
    margin-top:24px;
    padding:22px 20px;
  }

  .issue-bridge.issue-bridge-emphasis span{
    font-size:16px;
  }

  .risk-closing.risk-closing-natural{
    margin-top:22px;
    padding:22px 20px;
    font-size:15px;
  }

  .theme-row-v30.theme-row-word{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   v95 ISSUE to RISK bridge
   ブリッジ文から次セクションへつながる「レ」型矢印
   ============================================================ */

.issue-bridge.issue-bridge-emphasis{
  position:relative;
}

.issue-bridge-next{
  margin-top:12px;
  color:var(--course);
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
}

.issue-to-risk-arrow{
  position:relative;
  width:44px;
  height:62px;
  margin:18px auto -34px;
  z-index:2;
}

.issue-to-risk-arrow::before,
.issue-to-risk-arrow::after{
  content:"";
  position:absolute;
  left:18px;
  width:3px;
  border-radius:999px;
  background:var(--course);
}

.issue-to-risk-arrow::before{
  top:0;
  height:45px;
}

.issue-to-risk-arrow::after{
  top:35px;
  height:25px;
  transform:rotate(42deg);
  transform-origin:bottom center;
}

@media screen and (max-width:767px){
  .issue-bridge-next{
    font-size:14px;
  }

  .issue-to-risk-arrow{
    height:54px;
    margin:14px auto -28px;
  }

  .issue-to-risk-arrow::before{
    height:39px;
  }

  .issue-to-risk-arrow::after{
    top:31px;
    height:22px;
  }
}


/* ============================================================
   v96 RISK split figures zigzag
   fig1〜fig4をPC横並びジグザグ、SP縦並びで表示
   ============================================================ */

.risk-fig-zigzag{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  align-items:start;
}

.risk-fig-item{
  margin:0;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .58s ease, transform .58s ease;
  will-change:opacity, transform;
}

.risk-fig-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

.risk-fig-item img{
  display:block;
  width:100%;
  height:auto;
}

.risk-fig-item-2,
.risk-fig-item-4{
  margin-top:84px;
}

.risk-section .risk-figure,
.risk-section .risk-list{
  display:none;
}

@media screen and (max-width:960px){
  .risk-fig-zigzag{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }

  .risk-fig-item-2,
  .risk-fig-item-4{
    margin-top:54px;
  }
}

@media screen and (max-width:767px){
  .risk-fig-zigzag{
    grid-template-columns:1fr;
    gap:16px;
    max-width:420px;
  }

  .risk-fig-item-2,
  .risk-fig-item-4{
    margin-top:0;
  }
}

/* ============================================================
   v97 RISK split figures size up
   1〜4の分割画像をPC表示で大きく見せる
   ============================================================ */

.risk-section .container.narrow{
  max-width:1280px;
}

.risk-fig-zigzag{
  max-width:1240px;
  gap:22px;
}

.risk-fig-item-2,
.risk-fig-item-4{
  margin-top:72px;
}

@media screen and (max-width:960px){
  .risk-section .container.narrow{
    max-width:100%;
  }

  .risk-fig-zigzag{
    gap:20px;
  }

  .risk-fig-item-2,
  .risk-fig-item-4{
    margin-top:44px;
  }
}

@media screen and (max-width:767px){
  .risk-fig-zigzag{
    max-width:480px;
  }

  .risk-fig-item-2,
  .risk-fig-item-4{
    margin-top:0;
  }
}


/* ============================================================
   v98 feedback refinements
   ISSUE配置調整 / 矢印アニメーション / FOCUSテーブル化 / 講座詳細導線
   ============================================================ */

/* 1. 地球儀と周辺項目のラップを横軸中央に揃え、3項目の距離感を調整 */
@media screen and (min-width:981px){
  #issue .issue-orbit{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    min-height:650px;
  }

  #issue .issue-axis{
    left:50%;
    right:auto;
    width:240px;
    margin-left:-120px;
  }

  #issue .group-judge{
    left:48px;
    top:72px;
    width:310px;
  }

  #issue .group-relation{
    right:48px;
    top:72px;
    width:310px;
  }

  #issue .group-tell{
    left:50%;
    top:392px;
    width:430px;
    transform:translate(-50%, -30px);
  }

  #issue .group-tell.is-visible{
    transform:translate(-50%, 0);
  }
}

/* 2. 既存の「レ」型矢印を下へ続くブリッジとしてアニメーション化 */
.issue-to-risk-arrow{
  margin-top:20px;
  margin-bottom:-28px;
  animation:bridgeArrowDown 1.45s ease-in-out infinite;
}

.issue-to-risk-arrow::before,
.issue-to-risk-arrow::after{
  box-shadow:0 0 0 4px rgba(165,136,189,.08);
}

@keyframes bridgeArrowDown{
  0%,100%{
    transform:translateY(0);
    opacity:.62;
  }
  50%{
    transform:translateY(8px);
    opacity:1;
  }
}

/* 3. FOCUS白背景内の不要な上罫線を削除 */
.about-v30-themes{
  border-top:0;
  padding-top:0;
}

/* 4. 主なテーマはテーブルとして整える */
.theme-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
}

.theme-table th,
.theme-table td{
  display:table-cell;
  border-bottom:1px solid var(--line);
  padding:20px 24px;
  vertical-align:top;
  text-align:left;
  font-size:16px;
  line-height:1.75;
}

.theme-table th{
  width:170px;
  color:var(--deep);
  background:rgba(18,55,67,.035);
  font-weight:900;
}

.theme-table td{
  color:var(--ink);
  background:#fff;
  font-weight:700;
}

.theme-table tr:last-child th,
.theme-table tr:last-child td{
  border-bottom:0;
}

/* 5. 講座詳細リンクを、同一ページ本文とは別の案内要素として見せる */
.course-link-card{
  margin-top:26px;
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:color-mix(in srgb, var(--base) 42%, #fff);
  border:1px solid rgba(18,55,67,.12);
  border-radius:18px;
  box-shadow:none;
}

.course-link-card-text{
  min-width:0;
}

.course-link-card .course-link-label{
  display:block;
  margin-bottom:8px;
  color:var(--course);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.course-link-card h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:22px;
  line-height:1.45;
}

.course-link-card p{
  margin:0;
  color:var(--ink);
  font-size:15px;
  line-height:1.75;
  font-weight:600;
}

.course-link-card .course-link-button{
  flex:0 0 auto;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 42px 0 20px;
  background:#fff;
  border:1px solid rgba(18,55,67,.18);
  color:var(--deep);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.course-link-card .course-link-button::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

.course-link-card .course-link-button:hover{
  background:#f7f8f9;
}

/* SP */
@media screen and (max-width:767px){
  .issue-to-risk-arrow{
    animation:bridgeArrowDown 1.45s ease-in-out infinite;
  }

  .theme-table,
  .theme-table tbody,
  .theme-table tr,
  .theme-table th,
  .theme-table td{
    display:block;
    width:100%;
  }

  .theme-table tr{
    border-bottom:1px solid var(--line);
  }

  .theme-table tr:last-child{
    border-bottom:0;
  }

  .theme-table th{
    padding:18px 18px 4px;
    border-bottom:0;
    background:#fff;
  }

  .theme-table td{
    padding:0 18px 18px;
    border-bottom:0;
  }

  .course-link-card{
    display:block;
    padding:22px 20px;
  }

  .course-link-card .course-link-button{
    width:100%;
    margin-top:18px;
  }
}


/* ============================================================
   v99 ISSUE orbit layout correction
   地球儀まわりを再調整：地球儀と各項目が重ならず、全体を中央配置
   ============================================================ */

@media screen and (min-width:981px){
  #issue .issue-orbit{
    max-width:1120px;
    min-height:660px;
    margin:0 auto;
    padding:28px 0 26px;
  }

  #issue .issue-axis{
    position:absolute;
    inset:0;
    width:auto;
    left:0;
    right:0;
    margin-left:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:220px;
    pointer-events:none;
  }

  #issue .globe-wrap{
    width:220px;
    height:220px;
  }

  #issue .uploaded-globe-block{
    width:220px;
  }

  #issue .group-judge{
    left:24px;
    right:auto;
    top:80px;
    width:340px;
    transform:translateX(44px);
    text-align:center;
  }

  #issue .group-relation{
    left:auto;
    right:24px;
    top:80px;
    width:340px;
    transform:translateX(-44px);
    text-align:center;
  }

  #issue .group-tell{
    left:50%;
    right:auto;
    top:430px;
    width:520px;
    transform:translate(-50%, -26px);
    text-align:center;
  }

  #issue .issue-orbit-group.is-visible.group-judge,
  #issue .issue-orbit-group.is-visible.group-relation{
    transform:translateX(0);
  }

  #issue .issue-orbit-group.is-visible.group-tell{
    transform:translate(-50%, 0);
  }

  #issue .group-judge .issue-orbit-items,
  #issue .group-relation .issue-orbit-items{
    max-width:340px;
  }

  #issue .group-tell .issue-orbit-items{
    max-width:520px;
  }

  #issue .issue-orbit-items p{
    white-space:normal;
  }
}

@media screen and (max-width:980px){
  #issue .issue-axis{
    padding-top:0;
  }
}


/* ============================================================
   v102 ISSUE orbit spacing spot fix
   issue-orbit全体の上下余白のみ調整
   ============================================================ */

@media screen and (min-width:981px){
  #issue .issue-orbit{
    margin-top:-130px;
    margin-bottom:130px;
  }
}


/* ============================================================
   v103 bridge text restore
   ブリッジ文「そして、これを放置すると」の強調を復元
   ============================================================ */


/* ============================================================
   v104 bridge text restore without important
   既存の .issue-bridge.issue-bridge-emphasis p より詳細度を上げて復元
   ============================================================ */

.issue-bridge.issue-bridge-emphasis .issue-bridge-next{
  margin-top:12px;
  color:var(--course);
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
}


/* ============================================================
   v105 bottom CTA display guard
   最下部CTAの表示補強
   ============================================================ */

.bottom-cta{
  display:block;
  visibility:visible;
}

.bottom-cta h2,
.bottom-cta p,
.bottom-cta .dual-cta,
.bottom-cta .dual-cta .button,
.bottom-cta .core-note{
  visibility:visible;
}

.bottom-cta .dual-cta{
  display:grid;
}


/* ============================================================
   v106 bottom CTA visibility fix
   最終CTAはスクロールアニメーション対象から外し、常時表示する
   ============================================================ */

.motion-ready .bottom-cta h2,
.motion-ready .bottom-cta p,
.motion-ready .bottom-cta .dual-cta,
.bottom-cta h2,
.bottom-cta p,
.bottom-cta .dual-cta{
  opacity:1;
  transform:none;
  visibility:visible;
}

.bottom-cta .dual-cta{
  display:grid;
}


/* ============================================================
   v107 overview contact link style
   開催概要の問い合わせURLをリンクとして認識しやすくする
   ============================================================ */

.overview-contact-link{
  display:inline-block;
  margin:4px 0 12px;
  color:#0086af;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  word-break:break-all;
}

.overview-contact-link:hover{
  color:#006f91;
}


/* ============================================================
   v108 ISSUE orbit item width tuning
   手動更新済みHTMLに合わせ、PC表示の地球儀まわりだけ微調整
   ============================================================ */

@media screen and (min-width:981px){
  /* 中央ラベル「赴任先での課題」の上に少し余白を作る */
  #issue .uploaded-globe-label{
    margin-top:18px;
  }

  /* 左上：判断の重さに直面する — 長い項目を1行で見せる */
  #issue .group-judge{
    width:470px;
  }

  #issue .group-judge .issue-orbit-items{
    max-width:470px;
  }

  #issue .group-judge .issue-orbit-items p{
    white-space:nowrap;
  }

  /* 下：伝え方・運用に悩む — 広がりすぎを抑えつつ1行維持 */
  #issue .group-tell{
    width:460px;
  }

  #issue .group-tell .issue-orbit-items{
    max-width:460px;
  }

  #issue .group-tell .issue-orbit-items p{
    white-space:nowrap;
  }
}


/* ============================================================
   v109 ISSUE orbit distance correction
   地球儀と左右項目の距離を確保し、下段項目の中央位置は動かさない
   ============================================================ */

@media screen and (min-width:981px){
  /* 全体幅は広げすぎず、地球儀中心は維持 */
  #issue .issue-orbit{
    max-width:1120px;
  }

  /* 地球儀の位置は中央固定。左右項目に寄せない */
  #issue .issue-axis{
    left:0;
    right:0;
    width:auto;
    margin-left:0;
    justify-content:center;
  }

  /* 左上：横幅を本文にフィットさせつつ、地球儀から離す */
  #issue .group-judge{
    left:0;
    width:420px;
  }

  #issue .group-judge .issue-orbit-items{
    max-width:420px;
  }

  #issue .group-judge .issue-orbit-items p{
    width:max-content;
    max-width:420px;
    white-space:nowrap;
  }

  /* 右上：地球儀との距離を左側と揃える */
  #issue .group-relation{
    right:0;
    width:360px;
  }

  #issue .group-relation .issue-orbit-items{
    max-width:360px;
  }

  #issue .group-relation .issue-orbit-items p{
    width:max-content;
    max-width:360px;
    white-space:nowrap;
  }

  /* 下段：中央位置は固定したまま、箱幅だけ本文にフィット */
  #issue .group-tell{
    left:50%;
    width:460px;
    transform:translate(-50%, -26px);
  }

  #issue .issue-orbit-group.is-visible.group-tell{
    transform:translate(-50%, 0);
  }

  #issue .group-tell .issue-orbit-items{
    max-width:460px;
    justify-items:center;
  }

  #issue .group-tell .issue-orbit-items p{
    width:max-content;
    max-width:460px;
    white-space:nowrap;
  }
}


/* ============================================================
   v110 ISSUE orbit equal-width items per group
   各見出しグループ内の項目幅を、そのグループ内の最長テキストに揃える
   ============================================================ */

@media screen and (min-width:981px){
  /* 左右の距離は確保したまま、項目リスト自体は最長テキスト幅にフィット */
  #issue .group-judge{
    left:0;
    width:430px;
  }

  #issue .group-relation{
    right:0;
    width:360px;
  }

  #issue .group-tell{
    left:50%;
    width:460px;
    transform:translate(-50%, -26px);
  }

  #issue .issue-orbit-group.is-visible.group-tell{
    transform:translate(-50%, 0);
  }

  /* 各グループ内で、最長項目の幅を基準に全項目幅を統一 */
  #issue .group-judge .issue-orbit-items,
  #issue .group-relation .issue-orbit-items,
  #issue .group-tell .issue-orbit-items{
    display:grid;
    width:max-content;
    margin-left:auto;
    margin-right:auto;
    justify-items:stretch;
  }

  #issue .group-judge .issue-orbit-items{
    max-width:430px;
  }

  #issue .group-relation .issue-orbit-items{
    max-width:360px;
  }

  #issue .group-tell .issue-orbit-items{
    max-width:460px;
  }

  #issue .group-judge .issue-orbit-items p,
  #issue .group-relation .issue-orbit-items p,
  #issue .group-tell .issue-orbit-items p{
    width:100%;
    max-width:none;
    white-space:nowrap;
  }
}


/* ============================================================
   v111 Responsive hardening without removing existing elements
   - Small screens use 100% wrappers with internal padding.
   - Prevents horizontal overflow from fixed-width cards, CTA, tables,
     max-content items, long URLs, and media.
   ============================================================ */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

body,
.page,
main{
  min-width:0;
}

.page,
.page *{
  box-sizing:border-box;
}

img,
svg,
canvas,
video,
iframe{
  max-width:100%;
}

/* Long URLs / long Japanese-English mixed text should wrap instead of forcing overflow. */
.page a,
.page p,
.page li,
.page dd,
.page td,
.page th,
.page span,
.page strong{
  overflow-wrap:anywhere;
}

/* Grid/flex children need min-width:0 or long text can push the layout wider than the viewport. */
.hero-inner > *,
.lp-header-inner > *,
.split > *,
.session-grid > *,
.recommend-grid > *,
.option-cols > *,
.theme-row-v30 > *,
.speaker > *,
.program-step > *,
.event-card,
.article,
.about-v30-body,
.option-panel,
.course-panel,
.overview-table,
.theme-table,
.risk-fig-zigzag,
.issue-orbit,
.issue-orbit-group{
  min-width:0;
}

@media screen and (max-width:980px){
  /* Wrapper policy: on smaller screens, wrappers occupy the full viewport width.
     Spacing is handled by padding, not by shrinking width with calc(). */
  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .lp-header-inner,
  .site-header-inner,
  .lp-anchor-inner,
  .cb-topbar-inner{
    width:100% !important;
    max-width:var(--max) !important;
    padding-left:24px !important;
    padding-right:24px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .about-v30-container,
  .container.narrow,
  .risk-section .container.narrow{
    max-width:100% !important;
  }

  .hero-inner,
  .split,
  .session-grid,
  .recommend-grid,
  .option-cols,
  .speaker{
    grid-template-columns:1fr !important;
  }

  .risk-fig-zigzag{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .theme-table,
  .overview-table,
  table{
    width:100% !important;
    max-width:100% !important;
  }
}

@media screen and (max-width:767px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    min-width:0 !important;
  }

  .page,
  main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  /* Wrapper policy requested: full-width wrappers on small screens. */
  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .lp-header-inner,
  .site-header-inner,
  .lp-anchor-inner,
  .cb-topbar-inner{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  section,
  .hero,
  .risk-section,
  .about-v30,
  .recommend,
  .session,
  .bottom-cta,
  .related-course-section,
  .bg-white,
  .bg-soft,
  .bg-base{
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
  }

  /* Header: keep existing logo and two CTAs, but make them shrink safely. */
  .lp-header{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .lp-header-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .lp-logo,
  .lp-logo img{
    max-width:142px !important;
    width:142px !important;
  }

  .lp-header-cta,
  .lp-header-cta-dates{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  .lp-header-cta a,
  .lp-header-cta-dates a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    line-height:1.25 !important;
    text-align:center !important;
  }

  /* Cards / panels */
  .event-card,
  .article,
  .about-v30-body,
  .option-panel,
  .course-panel,
  .session-card,
  .recommend-card,
  .course-link-card,
  .overview-table{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .event-card .date-row-link{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .date-main,
  .date-main p{
    min-width:0 !important;
  }

  .date-apply{
    flex:0 0 auto !important;
  }

  /* ISSUE: disable desktop max-content / nowrap behavior on mobile. */
  #issue .issue-orbit,
  #issue .issue-orbit-group,
  #issue .group-judge,
  #issue .group-tell,
  #issue .group-relation,
  #issue .issue-orbit-items,
  #issue .issue-orbit-items p{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #issue .issue-orbit-items p{
    white-space:normal !important;
  }

  .uploaded-globe-block,
  .globe-wrap,
  .uploaded-globe-icon,
  #globe-canvas{
    max-width:100% !important;
  }

  /* Figures / images */
  .risk-fig-zigzag{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }

  .risk-fig-item,
  .risk-fig-item img,
  figure{
    max-width:100% !important;
  }

  /* Tables: stack on mobile without forcing viewport width. */
  table,
  tbody,
  tr,
  th,
  td,
  .theme-table,
  .theme-table tbody,
  .theme-table tr,
  .theme-table th,
  .theme-table td{
    width:100% !important;
    max-width:100% !important;
  }

  th,
  td,
  .theme-table th,
  .theme-table td{
    display:block !important;
    white-space:normal !important;
  }

  .overview-contact-link{
    word-break:break-all !important;
  }

  /* CTA blocks */
  .dual-cta,
  .event-actions{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }

  .button,
  .dual-cta .button,
  .option-consult-btn,
  .course-link-card .course-link-button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
  }
}

@media screen and (max-width:380px){
  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .lp-header-inner,
  .site-header-inner,
  .lp-anchor-inner{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .lp-header-cta,
  .lp-header-cta-dates{
    gap:6px !important;
  }

  .lp-header-cta a,
  .lp-header-cta-dates a{
    font-size:10.5px !important;
    padding-left:8px !important;
    padding-right:24px !important;
  }
}

/* ============================================================
   v66 Tablet / max-width 980 correction
   980px前後の表示を、PCを潰した状態ではなくタブレット用レイアウトとして整理。
   既存要素は保持し、CSS末尾で上書きする。
   ============================================================ */

@media screen and (min-width:768px) and (max-width:980px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    min-width:0 !important;
    padding-top:76px !important;
  }

  .page,
  main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  section{
    width:100% !important;
    max-width:100% !important;
    padding:80px 0 !important;
    overflow-x:clip !important;
    scroll-margin-top:96px !important;
  }

  .container,
  .narrow,
  .about-v30-container,
  .hero-inner,
  .lp-header-inner,
  .site-header-inner,
  .lp-anchor-inner,
  .cb-topbar-inner{
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:48px !important;
    padding-right:48px !important;
  }

  /* Header: ロゴ左・日程CTA右のまま、ナビだけ非表示 */
  .lp-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:2147483000 !important;
  }

  .lp-header-inner{
    min-height:76px !important;
    display:grid !important;
    grid-template-columns:168px minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:28px !important;
  }

  .lp-logo{
    width:168px !important;
    max-width:168px !important;
  }

  .lp-logo img{
    width:100% !important;
    height:auto !important;
  }

  .lp-global-nav{
    display:none !important;
  }

  .lp-header-cta,
  .lp-header-cta-dates{
    width:auto !important;
    max-width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .lp-header-cta a,
  .lp-header-cta-dates a{
    flex:0 1 auto !important;
    width:auto !important;
    min-width:146px !important;
    max-width:100% !important;
    min-height:40px !important;
    padding:0 34px 0 14px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  /* KV: 1カラム化し、イベントカードは横幅いっぱいに */
  .hero{
    padding:104px 0 88px !important;
    background-position:60% bottom !important;
  }

  .hero-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:56px !important;
    align-items:stretch !important;
  }

  .hero-main,
  .hero-copy,
  .hero-copy p{
    width:100% !important;
    max-width:100% !important;
  }

  .hero h1,
  .hero-title,
  h1.hero-title{
    font-size:52px !important;
    line-height:1.18 !important;
    letter-spacing:-.04em !important;
  }

  .course-name{
    display:block !important;
    width:100% !important;
    font-size:22px !important;
    line-height:1.5 !important;
  }

  .event-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:34px 32px !important;
  }

  .event-card .date-row-link{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px !important;
    padding:16px 18px !important;
  }

  .event-card .date-row-link:hover{
    padding:16px 18px !important;
  }

  .event-meta{
    grid-template-columns:1fr 1fr !important;
  }

  /* ISSUE: 980px時は縦並び。ただし見出しは添付のように中央 */
  #issue{
    padding-bottom:80px !important;
  }

  #issue .issue-orbit{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:44px !important;
    padding:0 !important;
    margin:0 auto !important;
  }

  #issue .issue-axis{
    display:none !important;
  }

  #issue .issue-orbit-group,
  #issue .group-judge,
  #issue .group-tell,
  #issue .group-relation{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    opacity:1 !important;
    transform:none !important;
    margin:0 !important;
    padding:0 0 42px !important;
    text-align:center !important;
    border-bottom:1px solid var(--line-light) !important;
  }

  #issue .group-judge{ order:1 !important; }
  #issue .group-relation{ order:2 !important; }
  #issue .group-tell{ order:3 !important; }

  #issue .issue-orbit-group:last-child{
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #issue .issue-orbit-group h3{
    text-align:center !important;
    font-size:24px !important;
    line-height:1.45 !important;
    margin:0 0 20px !important;
  }

  #issue .issue-orbit-group h3:after{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #issue .issue-orbit-items,
  #issue .group-judge .issue-orbit-items,
  #issue .group-tell .issue-orbit-items,
  #issue .group-relation .issue-orbit-items{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:0 !important;
  }

  #issue .issue-orbit-items p{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    font-size:14px !important;
    line-height:1.7 !important;
    padding:11px 16px !important;
    text-align:left !important;
  }

  .issue-bridge,
  .issue-bridge.issue-bridge-emphasis{
    width:100% !important;
    max-width:100% !important;
  }

  /* FOCUS: 980pxではテーブルをPC同様に2カラム維持 */
  .about-v30-body,
  .about-compact-body{
    width:100% !important;
    max-width:100% !important;
    padding:48px !important;
  }

  .theme-table,
  .overview-table table{
    display:table !important;
    width:100% !important;
    max-width:100% !important;
    table-layout:auto !important;
    border-collapse:collapse !important;
  }

  .theme-table tbody,
  .overview-table tbody{
    display:table-row-group !important;
  }

  .theme-table tr,
  .overview-table tr{
    display:table-row !important;
  }

  .theme-table th,
  .theme-table td,
  .overview-table th,
  .overview-table td{
    display:table-cell !important;
    width:auto !important;
    max-width:none !important;
    padding:20px 24px !important;
    vertical-align:top !important;
    white-space:normal !important;
    border-bottom:1px solid var(--line) !important;
  }

  .theme-table th,
  .overview-table th{
    width:180px !important;
  }

  .theme-table tr:last-child th,
  .theme-table tr:last-child td,
  .overview-table tr:last-child th,
  .overview-table tr:last-child td{
    border-bottom:0 !important;
  }

  .course-link-card{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
    padding:28px 32px !important;
  }

  .course-link-card-text{
    min-width:0 !important;
  }

  .course-link-card .course-link-button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:192px !important;
    white-space:nowrap !important;
  }

  /* Card grids: 980pxでは1カラム寄せで間延び・はみ出しを防ぐ */
  .session-grid,
  .recommend-grid,
  .option-cols,
  .split{
    grid-template-columns:1fr !important;
  }

  /* Speaker: 添付のように写真・名前・肩書・本文を中央配置 */
  .speaker{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:54px 0 !important;
    text-align:center !important;
  }

  .speaker .portrait,
  .portrait{
    width:120px !important;
    height:120px !important;
    margin:0 auto 28px !important;
  }

  .speaker h3,
  .speaker .role,
  .role{
    text-align:center !important;
  }

  .speaker h3{
    font-size:26px !important;
    margin:0 0 8px !important;
  }

  .speaker p{
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    line-height:2 !important;
  }

  .speaker p + p{
    margin-top:18px !important;
  }

  .portrait img,
  img,
  canvas,
  svg,
  iframe{
    max-width:100% !important;
  }

  .overview-contact-link{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
}

/* ============================================================
   v66 Mobile speaker portrait centering fix
   スマホ幅で登壇者写真が左寄せになる指定を最終上書き。
   ============================================================ */
@media screen and (max-width: 767px){
  #speakers .speaker,
  #speakers .speaker > div,
  #speakers .portrait,
  #speakers .speaker .portrait,
  #speakers .portrait.contain{
    text-align:center !important;
  }

  #speakers .portrait,
  #speakers .speaker .portrait,
  #speakers .portrait.contain{
    display:block !important;
    width:120px !important;
    height:120px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:24px !important;
    float:none !important;
  }

  #speakers .portrait img,
  #speakers .speaker .portrait img{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}