/*
 * 記事のテーマ別CTA（0.6.0。モック10・COO OK）と、求人詳細の右カラムの未経験LPバナー
 *
 * 色：オレンジ #EC6A1E（濃い #C9560F・薄い #FFF1E6）、ネイビー #1D3557（薄い #EAF0F8）
 * 見出しの書体 Zen Kaku Gothic New はテーマ（2.7.0）が読み込む。なければ本文の書体になる。
 */

.trj-acta-strip,
.trj-acta-box,
.trj-acta-lp,
.trj-acta-sticky { --trj-o: #EC6A1E; --trj-od: #C9560F; --trj-ot: #FFF1E6; --trj-n: #1D3557; --trj-ns: #EAF0F8; --trj-line: #DCE2EA; --trj-t2: #4B5563; }

/* 記事上部の帯（art_top） */
.trj-acta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--trj-ns); border-radius: 10px; padding: 12px 16px; margin: 0 0 20px;
}
.trj-acta-strip p { margin: 0 !important; font-size: 15px; font-weight: 700; color: var(--trj-n); line-height: 1.6; }
.trj-acta-strip-btn {
  flex: 0 0 auto; background: var(--trj-o); color: #fff !important; font-weight: 700; font-size: 14px;
  text-decoration: none !important; border-radius: 6px; padding: 8px 14px; box-shadow: 0 3px 0 var(--trj-od); line-height: 1.5;
}
.trj-acta-strip-btn:hover { background: #D55816; }

/* 相談の枠（art_mid1・art_mid2・art_bottom） */
.trj-acta-box {
  background: var(--trj-ot); border-radius: 14px; padding: 22px 24px 18px; margin: 2em 0; text-align: center;
}
.trj-acta-box .trj-acta-lead {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 22px;
  color: var(--trj-n); margin: 0 0 4px !important; line-height: 1.45;
}
.trj-acta-box .trj-acta-sub { font-size: 14.5px; color: var(--trj-t2); margin: 0 0 12px !important; line-height: 1.7; }
.trj-acta-box .trj-acta-why {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: 440px; margin: 0 auto 10px !important; padding: 0 !important;
  list-style: none; border-top: 2px solid var(--trj-n); border-bottom: 1px solid var(--trj-line);
}
.trj-acta-box .trj-acta-why li {
  padding: 7px 4px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--trj-t2);
  line-height: 1.4; margin: 0 !important; background: #fff; list-style: none;
}
.trj-acta-box .trj-acta-why li::before, .trj-acta-box .trj-acta-why li::marker { content: none; display: none; }
.trj-acta-box .trj-acta-why li + li { border-left: 1px solid var(--trj-line); }
.trj-acta-box .trj-acta-why b {
  display: block; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-weight: 900;
  font-size: 18px; color: var(--trj-od); line-height: 1.3;
}
.trj-acta-btn {
  position: relative; display: block; max-width: 440px; margin: 0 auto; background: var(--trj-o); color: #fff !important;
  text-decoration: none !important; font-weight: 700; font-size: 17px; line-height: 1.35; text-align: center;
  border-radius: 6px; padding: 16px 46px 16px 30px; box-shadow: 0 4px 0 var(--trj-od);
}
.trj-acta-btn::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translateY(-50%) rotate(45deg);
}
.trj-acta-btn:hover { background: #D55816; }
.trj-acta-box .trj-acta-after { font-size: 12.5px; color: var(--trj-t2); margin: 8px 0 0 !important; line-height: 1.6; }

/* 未経験LPのカード（art_mid2_lp・art_side_lp・job_side_lp） */
.trj-acta-lp {
  display: block; text-decoration: none !important; background: linear-gradient(160deg, #FFF5EA, #FFE1CC);
  border-radius: 12px; padding: 18px 20px; margin: 2em 0; text-align: center; color: var(--trj-n) !important;
}
.trj-acta-lp-lb { display: inline-block; background: var(--trj-n); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 0 8px; line-height: 1.7; }
.trj-acta-lp-h {
  display: block; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-weight: 900;
  font-size: 20px; line-height: 1.5; color: var(--trj-n); margin: 6px 0 10px;
}
.trj-acta-lp-go {
  display: inline-block; background: var(--trj-o); color: #fff; font-weight: 700; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; box-shadow: 0 3px 0 var(--trj-od); line-height: 1.5;
}
.trj-acta-lp:hover .trj-acta-lp-go { background: #D55816; }
.trj-acta-side .trj-acta-lp, .trj-detail-side .trj-acta-lp { margin: 0; }
.trj-acta-side .trj-acta-lp-h, .trj-detail-side .trj-acta-lp-h { font-size: 19px; }

/* スマホの追従（art_sticky）。PCでは出さない */
.trj-acta-sticky { display: none; }
@media (max-width: 640px) {
  .trj-acta-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .trj-acta-box { padding: 20px 14px 16px; }
  .trj-acta-box .trj-acta-lead { font-size: 19px; }
  .trj-acta-btn { font-size: 16px; padding: 15px 38px 15px 16px; }
  .trj-acta-sticky:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(29, 53, 87, .97); color: #fff; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    font-size: 13px; font-weight: 700; line-height: 1.45;
  }
  .trj-acta-sticky a {
    flex: 0 0 auto; background: var(--trj-o); color: #fff !important; text-decoration: none !important;
    border-radius: 6px; padding: 8px 14px;
  }
}