@charset "UTF-8";
/* =========================================================
   研修LP ファーストビュー（fv-base.css の上書き・追加分）
   - fv-base.css は採用LP（recruit_new/css/fv-v2.css）と同じ内容
   - モバイルファースト。1024px以上でPCレイアウト
   ========================================================= */

:root {
  /* 研修LPは青ベース（旧研修LPの #399fbf 系）。文字に使う青はコントラストを確保した濃さに */
  --c-brand: #1f7fa6;        /* メインの青（見出しの強調・チェック等） */
  --c-brand-dark: #16627f;
  --c-navy: #1d4e74;         /* ラベル・濃い青 */
  --c-navy-dark: #143a57;
  --c-bg-fv: #f2f8fb;
  --c-line: #d3e3ea;
  --c-accent: #d93a48;       /* 主ボタン（旧研修LPのCTA赤 #e5414f 系・白文字が読める濃さ） */
  --c-accent-dark: #b52c39;
  --shadow: 0 6px 20px rgba(20, 70, 100, .12);
  /* ジョハリの窓シート（実物レポート）の配色 */
  --c-jh-bar: #739337;       /* シート名の帯（緑） */
  --c-sure: #f8bb8a;         /* 確信できる資質（オレンジ） */
  --c-modest: #c3d89a;       /* 控えめな資質（黄緑） */
  --c-unseen: #f8c966;       /* 気づかれにくい資質（山吹） */
  --c-sleep: #93c8d8;        /* 眠っている資質（水色） */
}

/* 青ベースに合わせた上書き（fv-base.css の赤系を置き換え） */
.fv--training {
  background:
    radial-gradient(120% 60% at 100% 0, rgba(31, 127, 166, .07), transparent 60%),
    var(--c-bg-fv);
}
.site-header__btn { background: var(--c-accent); }
.site-header__btn:hover,
.site-header__btn:focus-visible { background: var(--c-accent-dark); }

.u-nw { white-space: nowrap; }

/* ラベル：スマホは2行（区切り線を隠す）、PCは1行 */
.fv--training .fv__eyebrow { border-radius: 8px; line-height: 1.5; }
.fv--training .fv__eyebrow-sep { display: none; }
.fv__eyebrow-product { display: block; }
@media (min-width: 1024px) {
  .fv--training .fv__eyebrow { border-radius: 999px; }
  .fv--training .fv__eyebrow-sep { display: inline; }
  .fv__eyebrow-product { display: inline; }
}
.johari__caption-sub { display: block; font-size: .8em; font-weight: 500; opacity: .9; }

/* ---------------------------------------------------------
   見出し（研修版：3行。2行目を主役に）
   --------------------------------------------------------- */
.fv--training .fv__title { font-size: clamp(18px, 6vw, 38px); }
.fv--training .fv__title-line--pre { font-size: .76em; }
.fv--training .fv__title-line--main { margin: .06em 0; }
.fv__title-key { font-style: normal; color: var(--c-brand); }
/* 案3（比較用）は1行が長いのでスマホのみ縮める */
@media (max-width: 1023px) {
  .fv__title--c3 .fv__title-line--pre:first-child { font-size: .68em; }
  .fv__title--c3 .fv__title-line--main { font-size: .84em; }
}
@media (min-width: 1024px) {
  .fv__title--c3 .fv__title-line--pre:first-child { font-size: .76em; }
  .fv__title--c3 .fv__title-line--main { font-size: .9em; }
}

/* 活用シーン（チップ） */
.fv__scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.fv__scenes li {
  padding: 5px 14px;
  border: 2px solid var(--c-brand);
  border-radius: 999px;
  background: #fff;
  color: var(--c-brand-dark);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   図：ジョハリの窓の考え方を応用した4分類
   --------------------------------------------------------- */
.johari {
  margin: 0;
  padding: 14px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.johari__caption {
  margin: -14px -14px 12px;
  padding: 7px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c-jh-bar);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.johari__grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 6px;
}

/* 軸ラベル */
.johari__axis {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-sub);
  text-align: center;
  line-height: 1.3;
}
.johari__axis--x {
  grid-column: 2 / 4;
  grid-row: 1;
  grid-template-columns: 1fr 1fr;
}
.johari__axis--x .johari__axis-name { grid-column: 1 / -1; }
.johari__axis--y {
  grid-column: 1;
  grid-row: 2 / 4;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
}
.johari__axis--y > span { writing-mode: vertical-rl; }
.johari__axis--y .johari__axis-name { grid-row: 1 / 3; grid-column: 1; }
.johari__axis-name {
  font-weight: 800;
  letter-spacing: .04em;
}
.johari__axis-name::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 4px 0 0;
  border-radius: 2px;
  vertical-align: -1px;
}
.johari__axis--y .johari__axis-name::before { margin: 0 0 4px; }
.johari__axis-name--self { color: #8a6100; }
.johari__axis-name--self::before { background: var(--c-self); }
.johari__axis-name--obj { color: var(--c-obj-dark); }
.johari__axis-name--obj::before { background: var(--c-obj); }

/* 4つの窓（行＝客観データ、列＝自己評価）。見出し帯の色は実物のジョハリの窓シートに合わせる */
.johari__cell {
  --c: var(--c-sure);
  overflow: hidden;
  border: 1px solid #c9c2b8;
  border-radius: 6px;
  background: #fff;
}
.johari__cell--sure   { --c: var(--c-sure);   grid-column: 2; grid-row: 2; }
.johari__cell--modest { --c: var(--c-modest); grid-column: 3; grid-row: 2; }
.johari__cell--unseen { --c: var(--c-unseen); grid-column: 2; grid-row: 3; }
.johari__cell--sleep  { --c: var(--c-sleep);  grid-column: 3; grid-row: 3; }

.johari__name {
  margin: 0;
  padding: 5px 8px;
  background: var(--c);
  color: #2a2a2a;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}
.johari__desc {
  margin: 0;
  padding: 6px 8px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text);
}
.johari__use {
  display: inline-block;
  margin-top: 3px;
  font-weight: 800;
  color: #333;
}
.johari__use::before { content: "→ "; color: var(--c-brand); }
.johari__note {
  display: none;
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--c-text-sub);
}


/* ---------------------------------------------------------
   特長（チェックリスト）
   --------------------------------------------------------- */
.fv__points {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.fv__points li {
  position: relative;
  padding-left: 1.6em;
}
.fv__points li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .35em;
  width: .5em;
  height: .85em;
  border: solid var(--c-brand);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.fv__points-num { color: var(--c-brand); }

/* ---------------------------------------------------------
   CTA：主（フォーム）を大きく、副（Webアプリお試し）は控えめに
   --------------------------------------------------------- */
.cta-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cta--primary { background: var(--c-accent); }
.cta--primary:hover,
.cta--primary:focus-visible { background: var(--c-accent-dark); }
.cta--trial { background: var(--c-brand); }
.cta--trial:hover,
.cta--trial:focus-visible { background: var(--c-brand-dark); }
.cta:focus-visible { outline-color: #ffd200; }

/* ---------------------------------------------------------
   PC（1024px〜）
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .fv--training .fv__title { font-size: clamp(24px, 2.6vw, 36px); }
  .fv--training .fv__title-line--pre { font-size: .82em; }
  .fv__scenes { gap: 8px; margin-top: 14px; }
  .fv__scenes li { padding: 6px 16px; font-size: 16px; }

  .johari { padding: 20px; }
  .johari__caption { margin: -20px -20px 14px; padding: 9px 20px; font-size: 16px; }
  .johari__grid { gap: 8px; }
  .johari__axis { font-size: 12px; }
  .johari__name { padding: 6px 12px; font-size: 16px; }
  .johari__desc { padding: 8px 12px 10px; font-size: 13px; }
  .johari__note { display: block; }

  .fv__points { grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; }
  .cta-stack { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .cta--trial .cta__main { font-size: 18px; }
}


/* 図の中の短文を文節で改行（対応ブラウザのみ） */
.johari__desc { word-break: auto-phrase; }

/* ボタン下の注記：1文ずつ改行。行末に数文字だけ残らないように */
.fv__note-line { display: block; text-wrap: pretty; }

/* ---------------------------------------------------------
   PC：FV左側の行間・余白を広げる（2026/10/22 決裁者指摘「詰まって見える」）
   左列の下（注記の下）に空きがあったため、その分を見出し・説明文・要素間に配分。
   1366×768のノートPCでも主ボタンが1画面に収まる範囲にとどめる
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .fv--training .fv__inner { row-gap: 22px; }
  .fv--training .fv__eyebrow { margin-bottom: 14px; }
  .fv--training .fv__title { font-size: clamp(26px, 2.75vw, 38px); line-height: 1.42; }
  .fv--training .fv__lead { margin-top: 14px; line-height: 1.8; }
  .fv--training .fv__scenes { margin-top: 16px; }
  .fv--training .fv__points { margin-bottom: 14px; padding: 13px 16px; gap: 7px 14px; }
  .fv--training .fv__offer-note { margin-top: 12px; line-height: 1.8; }
}