/* ============================================================
 * 領域別キャリアマップ C案（現在地セレクター＋縦展開ルート）
 * career.php 専用。既存の p-career-route 系とは完全に独立。
 * ロールバック時はこのファイルの読み込みと該当マークアップを
 * 削除するだけでよい（career2.php には影響しない）。
 * ============================================================ */

.p-cmap {
  --cmap-infra: #2f6fb5;
  --cmap-dev: #1e8a5a;
  --cmap-consul: #33415c;
}

/* ---------- 質問見出し ---------- */
.p-cmap__q {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

.p-cmap__q-sub {
  font-size: 13px;
  color: var(--fc2);
  font-weight: 700;
  text-align: center;
  margin: 10px 0 0;
}

@media screen and (min-width: 992px) {
  .p-cmap__q {
    font-size: 32px;
  }

  .p-cmap__q-sub {
    font-size: 15px;
  }
}

/* 選択を促すひとこと */
.p-cmap__choose {
  font-size: 14px;
  font-weight: 700;
  margin: 28px 0 0;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .p-cmap__choose {
    font-size: 17px;
    margin-top: 40px;
  }
}

/* ---------- 現在地セレクター ---------- */
.p-cmap__select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}

@media screen and (min-width: 992px) {
  .p-cmap__select {
    gap: 24px;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
  }
}

.p-cmap__card {
  --cmap-ac: var(--sc);
  appearance: none;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.p-cmap__card.--infra {
  --cmap-ac: var(--cmap-infra);
}

.p-cmap__card.--dev {
  --cmap-ac: var(--cmap-dev);
}

.p-cmap__card.--consul {
  --cmap-ac: var(--cmap-consul);
}

.p-cmap__card:hover {
  border-color: var(--cmap-ac);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.p-cmap__card.is-active {
  border-color: var(--cmap-ac);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 選択中カードの下向き接続矢印 */
.p-cmap__card.is-active::after {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--cmap-ac);
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.p-cmap__card-img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
}

.p-cmap__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 14px;
}

@media screen and (min-width: 992px) {
  .p-cmap__card-body {
    gap: 10px;
    padding: 16px 16px 22px;
  }
}

.p-cmap__card-badge {
  background: var(--cmap-ac);
  border-radius: 100px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 5px 14px;
}

@media screen and (min-width: 992px) {
  .p-cmap__card-badge {
    font-size: 14px;
    padding: 6px 20px;
  }
}

.p-cmap__card-copy {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (min-width: 992px) {
  .p-cmap__card-copy {
    font-size: 15px;
  }
}

/* タップ誘導チップ（常時表示。ホバー不要でクリック可能と分かるように） */
.p-cmap__card-tap {
  background: var(--cmap-ac);
  border-radius: 100px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  padding: 6px 12px;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .p-cmap__card-tap {
    font-size: 13px;
    margin-top: 4px;
    padding: 8px 18px;
  }
}

/* --- タップ誘導チップの文言：SPは短縮（カード幅に収める） ---
   SP  : 「タップ ▼」
   PC  : 「タップしてルートを見る ▼」（従来どおり） */
.p-cmap__tap-full {
  display: none;
}

.p-cmap__tap-min {
  display: inline;
}

@media screen and (min-width: 992px) {
  .p-cmap__tap-full {
    display: inline;
  }

  .p-cmap__tap-min {
    display: none;
  }
}

.p-cmap__tap-y {
  display: none;
}

.p-cmap__card.is-active .p-cmap__tap-n {
  display: none;
}

.p-cmap__card.is-active .p-cmap__tap-y {
  display: inline;
}

/* 未選択状態の視覚的な区別（選択中以外を少し沈める） */
.p-cmap__select.has-active .p-cmap__card:not(.is-active) {
  opacity: 0.55;
}

.p-cmap__select.has-active .p-cmap__card:not(.is-active):hover {
  opacity: 1;
}

/* ---------- 展開パネル ---------- */
.p-cmap__panels {
  margin-top: 24px;
}

.p-cmap__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-cmap__panel.is-open {
  grid-template-rows: 1fr;
}

.p-cmap__panel-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.55s;
}

.p-cmap__panel.is-open .p-cmap__panel-inner {
  visibility: visible;
  transition: visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .p-cmap__panel,
  .p-cmap__panel-inner,
  .p-cmap__card {
    transition: none !important;
  }
}

.p-cmap__box {
  --cmap-ac: var(--sc);
  background: #fff;
  border: 1px solid #e5e0da;
  border-radius: 24px;
  margin: 0 auto 8px;
  max-width: 1040px;
  padding: 28px 16px 32px;
}

@media screen and (min-width: 992px) {
  .p-cmap__box {
    padding: 56px 72px 64px;
  }
}

.p-cmap__panel.--infra .p-cmap__box {
  --cmap-ac: var(--cmap-infra);
}

.p-cmap__panel.--dev .p-cmap__box {
  --cmap-ac: var(--cmap-dev);
}

.p-cmap__panel.--consul .p-cmap__box {
  --cmap-ac: var(--cmap-consul);
}

/* パネルヘッダー（イラスト＋タイトル） */
.p-cmap__hero {
  margin: 0 auto;
  max-width: 720px;
}

.p-cmap__hero img {
  width: 100%;
  height: auto;
  display: block;
}

.p-cmap__ttl {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.8;
  margin: 8px 0 0;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .p-cmap__ttl {
    font-size: 30px;
    margin-top: 16px;
  }
}

.p-cmap__ttl small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cmap-ac);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

@media screen and (min-width: 992px) {
  .p-cmap__ttl small {
    font-size: 14px;
  }
}

/* ---------- 縦型ルート（タイムライン） ---------- */
.p-cmap__route {
  list-style: none;
  margin: 32px auto 0;
  max-width: 800px;
  padding: 0;
  position: relative;
}

@media screen and (min-width: 992px) {
  .p-cmap__route {
    margin-top: 48px;
  }
}

.p-cmap__step {
  padding: 0 0 28px 52px;
  position: relative;
}

@media screen and (min-width: 992px) {
  .p-cmap__step {
    padding: 0 0 36px 72px;
  }
}

.p-cmap__step:last-child {
  padding-bottom: 0;
}

/* 縦のレール */
.p-cmap__step::before {
  content: '';
  background: var(--cmap-ac);
  opacity: 0.25;
  width: 3px;
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: 0;
}

@media screen and (min-width: 992px) {
  .p-cmap__step::before {
    left: 22px;
    top: 44px;
  }
}

.p-cmap__step:last-child::before {
  display: none;
}

/* STEP番号の丸 */
.p-cmap__step-dot {
  background: #fff;
  border: 3px solid var(--cmap-ac);
  border-radius: 50%;
  color: var(--cmap-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  width: 34px;
  height: 34px;
  position: absolute;
  left: 0;
  top: 0;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-dot {
    font-size: 18px;
    width: 46px;
    height: 46px;
  }
}

.p-cmap__step.is-goal .p-cmap__step-dot {
  background: var(--cmap-ac);
  color: #fff;
}

/* ステップ見出し */
.p-cmap__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 34px;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-head {
    min-height: 46px;
  }
}

.p-cmap__step-no {
  color: var(--cmap-ac);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-no {
    font-size: 13px;
  }
}

.p-cmap__step-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-name {
    font-size: 24px;
  }
}

.p-cmap__step-name small {
  font-size: 0.65em;
  font-weight: 700;
}

.p-cmap__step-now {
  background: var(--cmap-ac);
  border-radius: 100px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 12px;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-now {
    font-size: 12px;
  }
}

.p-cmap__step-desc {
  color: var(--fc2);
  font-size: 13px;
  line-height: 1.8;
  margin: 8px 0 0;
  text-align: left;
}

@media screen and (min-width: 992px) {
  .p-cmap__step-desc {
    font-size: 15px;
    text-align: center;
  }
}

/* 深掘り3項目 */
.p-cmap__detail {
  background: rgba(var(--lightgray-rgb), 0.6);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 0;
  padding: 16px 14px;
}

@media screen and (min-width: 992px) {
  .p-cmap__detail {
    gap: 14px;
    padding: 22px 24px;
  }
}

.p-cmap__detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media screen and (min-width: 992px) {
  .p-cmap__detail-item {
    flex-direction: row;
    gap: 16px;
  }
}

.p-cmap__detail-item dt {
  color: var(--cmap-ac);
  border: 1px solid var(--cmap-ac);
  border-radius: 100px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 12px;
  align-self: flex-start;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .p-cmap__detail-item dt {
    font-size: 12px;
    margin-top: 2px;
    text-align: center;
    width: 132px;
  }
}

.p-cmap__detail-item dd {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

@media screen and (min-width: 992px) {
  .p-cmap__detail-item dd {
    font-size: 14px;
  }
}

/* 「いまのあなた」だけ強調（自分ごと化の釣り針） */
.p-cmap__detail-item.--hook dd {
  font-weight: 700;
  text-align: left;
}

/* ゴールステップの見出しを強調 */
.p-cmap__step.is-goal .p-cmap__step-name {
  color: var(--cmap-ac);
}

/* ---------- 空白の最終ステップ（あなたが目指す未来） ---------- */
/* ゴール→空白ステップ間のレールは「まだ歩いていない道」として点線に */
.p-cmap__step.is-goal::before {
  background: transparent;
  border-left: 3px dashed var(--cmap-ac);
  opacity: 0.45;
  width: 0;
}

.p-cmap__step.is-blank .p-cmap__step-dot {
  background: #fff;
  border-style: dashed;
}

.p-cmap__blank {
  border: 2px dashed var(--cmap-ac);
  border-radius: 12px;
  margin-top: 14px;
  padding: 18px 14px;
}

@media screen and (min-width: 992px) {
  .p-cmap__blank {
    padding: 26px 28px;
  }
}

.p-cmap__blank-q {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.7;
  margin: 0;
}

@media screen and (min-width: 992px) {
  .p-cmap__blank-q {
    font-size: 20px;
  }
}

.p-cmap__blank-eg {
  color: var(--fc2);
  font-size: 13px;
  line-height: 1.9;
  margin: 10px 0 0;
}

@media screen and (min-width: 992px) {
  .p-cmap__blank-eg {
    font-size: 14px;
  }
}

.p-cmap__blank-note {
  border-top: 1px solid rgba(var(--fc2-rgb), 0.2);
  color: var(--cmap-ac);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  margin: 14px 0 0;
  padding-top: 14px;
}

@media screen and (min-width: 992px) {
  .p-cmap__blank-note {
    font-size: 15px;
  }
}

/* 注記・ストーリーへの橋 */
.p-cmap__note {
  color: var(--fc2);
  font-size: 12px;
  margin: 24px auto 0;
  max-width: 800px;
  text-align: left;
}

.p-cmap__bridge {
  margin: 20px auto 0;
  max-width: 800px;
  text-align: center;
}

.p-cmap__bridge a {
  color: var(--cmap-ac);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media screen and (min-width: 992px) {
  .p-cmap__bridge a {
    font-size: 16px;
  }
}

/* ---------- 経験の読み替え（あなたの日常 → 市場での呼び名） ---------- */
.p-cworth__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  max-width: 940px;
}

@media screen and (min-width: 992px) {
  .p-cworth__list {
    gap: 16px;
  }
}

.p-cworth__item {
  background: #fff;
  border: 1px solid #e5e0da;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  padding: 18px 16px;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .p-cworth__item {
    grid-template-columns: 1fr 56px 1.3fr;
    gap: 0;
    padding: 24px 32px;
    text-align: left;
  }
}

.p-cworth__from {
  color: var(--fc2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

@media screen and (min-width: 992px) {
  .p-cworth__from {
    font-size: 16px;
  }
}

/* 変換の矢印: スマホは下向き、PCは右向き */
.p-cworth__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-cworth__arrow::before {
  content: '';
  border-right: 3px solid var(--sc);
  border-bottom: 3px solid var(--sc);
  border-radius: 1px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

@media screen and (min-width: 992px) {
  .p-cworth__arrow::before {
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
  }
}

.p-cworth__to {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.7;
}

@media screen and (min-width: 992px) {
  .p-cworth__to {
    font-size: 19px;
  }
}

/* ---------- ルート選択後にだけ見せる締めブロック ---------- */
.p-cmap__after {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-cmap.has-open .p-cmap__after {
  grid-template-rows: 1fr;
}

.p-cmap__after-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.55s;
}

.p-cmap.has-open .p-cmap__after-inner {
  visibility: visible;
  transition: visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .p-cmap__after,
  .p-cmap__after-inner {
    transition: none !important;
  }
}

/* ---------- ストーリーへの視線誘導矢印（セクション間） ---------- */
.p-cmap-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-cmap-flow span {
  border-right: 4px solid var(--kc);
  border-bottom: 4px solid var(--kc);
  border-radius: 2px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  animation: cmap-flow 1.8s ease-in-out infinite;
}

.p-cmap-flow span + span {
  margin-top: -8px;
  animation-delay: 0.3s;
}

@media screen and (min-width: 992px) {
  .p-cmap-flow span {
    border-width: 0 5px 5px 0;
    width: 28px;
    height: 28px;
  }

  .p-cmap-flow span + span {
    margin-top: -12px;
  }
}

@keyframes cmap-flow {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-cmap-flow span {
    animation: none;
    opacity: 0.6;
  }
}


/* ==========================================================================
   SP専用：読ませたい本文は左揃え（見出し・ボタン・カードUIは中央のまま）
   ※ 992px以上（PC）には一切影響しません
   ========================================================================== */
@media screen and (max-width: 991.98px) {

  /* --- .text-center で囲んだリード文・注記の本文 ---
     見出し（h2/h3など）とボタンは .text-center の中央寄せのまま残すため、
     直下の <p> だけを左揃えにする */
  #contents .text-center > p,
  #contents p.text-center {
    text-align: left !important;
  }

  /* --- 経験の読み替えカード（あなたの日常 → 市場での呼び名） ---
     矢印は flex + justify-content:center なので中央のまま */
  .p-cworth__item {
    text-align: left;
  }

  /* --- キャリアマップの導入文（見出し .p-cmap__q は中央のまま） --- */
  .p-cmap__q-sub {
    text-align: left;
  }

  /* --- 「正直に言うと、合わない人もいます。」ブロック ---
     見出し h3 は中央のまま、本文と箇条書きだけ左揃え */
  .p-career-cta__honest > p,
  .p-career-cta__honest-list {
    text-align: left;
  }
}


/* ==========================================================================
   ボタンらしさの強化 ＋ ソフトゲート
   ========================================================================== */

/* --- 選択を促すひとこと（2行目） --- */
.p-cmap__choose-sub {
  color: var(--fc2);
  font-size: 12px;
  font-weight: 700;
  margin: 6px 0 0;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .p-cmap__choose-sub {
    font-size: 14px;
  }
}

/* --- カードを「押せるもの」に見せる --- */
.p-cmap__card {
  border-color: var(--cmap-ac);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
}

.p-cmap__card:active {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(2px);
}

.p-cmap__card.is-active {
  box-shadow: none;
  transform: translateY(2px);
}

/* --- 未選択のあいだ、タップ誘導チップを軽く上下させる --- */
@keyframes cmapTapNudge {
  0%,
  70%,
  100% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-3px);
  }

  90% {
    transform: translateY(-1px);
  }
}

.p-cmap__select:not(.has-active) .p-cmap__card-tap {
  animation: cmapTapNudge 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .p-cmap__select:not(.has-active) .p-cmap__card-tap {
    animation: none;
  }

  .p-cmap__card,
  .p-cmap__card:active {
    transform: none;
  }
}

/* --- ソフトゲート：選ぶまで、この先は上端だけ見えて読めない ---
   mask-image で中身そのものをフェードさせるため、背景色に依存しない */
.p-career-gate.is-locked {
  max-height: 340px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 92%);
  pointer-events: none;
  user-select: none;
}

@media screen and (min-width: 992px) {
  .p-career-gate.is-locked {
    max-height: 420px;
  }
}


/* --- 選択を促す吹き出し（下向きのしっぽでカードを指す） --- */
.p-cmap__balloon {
  background: #fff;
  border: 2px solid var(--fc);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  margin: 28px auto 0;
  max-width: 560px;
  padding: 12px 16px;
  position: relative;
}

@media screen and (min-width: 992px) {
  .p-cmap__balloon {
    margin-top: 40px;
    padding: 16px 24px;
  }
}

/* しっぽ：外側（枠の色）と内側（白）を重ねて、枠線つきの三角に見せる */
.p-cmap__balloon::before,
.p-cmap__balloon::after {
  border-style: solid;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;
}

.p-cmap__balloon::before {
  border-color: var(--fc) transparent transparent transparent;
  border-width: 14px 11px 0 11px;
  bottom: -14px;
  margin-left: -11px;
}

.p-cmap__balloon::after {
  border-color: #fff transparent transparent transparent;
  border-width: 11px 8px 0 8px;
  bottom: -10px;
  margin-left: -8px;
}

/* 吹き出しの中では、文言側の余白をリセットする */
.p-cmap__balloon .p-cmap__choose {
  margin: 0;
}

.p-cmap__balloon .p-cmap__choose-sub {
  margin-top: 4px;
}


/* --- ゲート中の案内（ロック時のみ表示。JS無効なら出ない） --- */
.p-career-gate__lead {
  display: none;
}

.p-career-gate__lead.is-shown {
  border-top: 3px solid #eee;
  display: block;
  margin: 32px auto 0;
  max-width: 720px;
  padding: 32px 20px 64px;
  text-align: center;
}

.p-career-gate__lead-txt {
  color: var(--fc2);
  font-size: 13px;
  line-height: 1.9;
  margin: 0;
}

@media screen and (min-width: 992px) {
  .p-career-gate__lead-txt {
    font-size: 15px;
  }
}

.p-career-gate__lead-strong {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.7;
  margin: 10px 0 0;
}

@media screen and (min-width: 992px) {
  .p-career-gate__lead-strong {
    font-size: 18px;
  }
}

.p-career-gate__back {
  appearance: none;
  background: #fff;
  border: 2px solid var(--fc);
  border-radius: 100px;
  color: var(--fc);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  margin-top: 16px;
  padding: 10px 24px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-career-gate__back:hover {
  background: var(--fc);
  color: #fff;
}

@media screen and (min-width: 992px) {
  .p-career-gate__back {
    font-size: 14px;
    padding: 12px 32px;
  }
}