/* ============================================================
   HAJIKEL Phase1: front-page.php / page-about.php 共通スタイル
   既存デザインシステム(h2-enja / btn-o / container-lg)を踏襲
   ============================================================ */

.hj-eyebrow {
  font-family: "Jost", sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  color: #8836AE;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

/* ---------- HERO ---------- */
.hj-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background: linear-gradient(180deg, #FBF3F8 0%, #FFFFFF 100%);
}
.hj-hero__kicker {
  font-family: "Jost", sans-serif;
  font-size: .82rem;
  letter-spacing: .1em;
  color: #8836AE;
  margin-bottom: 1.2rem;
}
.hj-hero__ttl {
  font-size: 2.1rem;
  line-height: 1.6;
  font-weight: 700;
  color: #222;
  margin-bottom: 1.4rem;
}
.hj-hero__lead {
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
  max-width: 34em;
  margin: 0 auto .4rem;
  line-height: 1.9;
}
.hj-hero__sub {
  font-size: .95rem;
  color: #666;
  max-width: 34em;
  margin: 0 auto 2rem;
}
@media (max-width: 767px) {
  .hj-hero { padding: 3.2rem 0 2.6rem; }
  .hj-hero__ttl { font-size: 1.5rem; }
  .hj-hero__lead { font-size: .95rem; }
}

/* ---------- buttons ---------- */
.hj-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: .5rem;
}
.hj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.8rem;
  border-radius: 60px;
  font-weight: bold;
  font-size: .92rem;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity .2s;
}
.hj-btn:hover { opacity: .85; }
.hj-btn--primary { background: #F97709; color: #FFF; }
.hj-btn--outline { background: #FFF; color: #D10456; border: 1px solid #D10456; }
.hj-btn--navy { background: #00377D; color: #FFF; }
@media (max-width: 767px) {
  .hj-btnrow { flex-direction: column; align-items: stretch; }
}

.hj-link {
  display: inline-block;
  font-size: .86rem;
  font-weight: bold;
  color: #D10456;
  text-decoration: none;
  margin-top: .6rem;
}
.hj-link:hover { text-decoration: underline; }

/* ---------- sections ---------- */
.hj-sec { padding: 4.5rem 0; }
.hj-sec--alt { background: #FAF8FB; }
.hj-sec--navy { background: #00377D; color: #fff; }
.hj-sec--navy .hj-lead { color: #E4E9F5; }
@media (max-width: 767px) { .hj-sec { padding: 3rem 0; } }

.hj-lead {
  font-size: .98rem;
  color: #444;
  line-height: 1.95;
  max-width: 46em;
  margin: 0 auto 2rem;
  text-align: center;
}

/* ---------- grids ---------- */
.hj-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hj-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.hj-grid6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 767px) {
  .hj-grid2, .hj-grid3, .hj-grid6 { grid-template-columns: 1fr; }
}

.hj-box {
  background: #FFF;
  border: 1px solid #EAEAEA;
  border-radius: 12px;
  padding: 1.6rem 1.7rem;
}
.hj-box h3 { font-size: .98rem; margin-bottom: .8rem; font-weight: bold; color: #222; }
.hj-box p { font-size: .84rem; color: #666; margin: .6rem 0; line-height: 1.8; }

.hj-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .3rem; }
.hj-chiprow span {
  font-family: "Jost", sans-serif;
  font-size: .78rem;
  padding: .35rem .8rem;
  border-radius: 99px;
  background: #F5EEF7;
  color: #8836AE;
}
.hj-chiprow span.is-accent { background: #FFEFE0; color: #F97709; font-weight: bold; }

.hj-flow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.hj-flow span {
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  padding: .35rem .7rem;
  border-radius: 99px;
  background: #EFF3FA;
  color: #00377D;
}
.hj-flow span:not(:first-child)::before { content: "→"; margin-right: .4rem; color: #C9C2AC; font-family: sans-serif; }

/* ---------- fact cards (policy / partners) ---------- */
.hj-card {
  background: #FFF;
  border: 1px solid #EAEAEA;
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
}
.hj-card .src {
  font-family: "Jost", sans-serif;
  font-size: .68rem;
  letter-spacing: .06em;
  color: #999;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.hj-card h4 { font-size: .92rem; margin-bottom: .5rem; font-weight: bold; color: #222; }
.hj-card p { font-size: .82rem; color: #666; line-height: 1.8; margin: 0; }

.hj-menucard {
  background: #FFF;
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  padding: 1.1rem 1rem;
  text-align: center;
  font-size: .84rem;
  font-weight: bold;
  color: #333;
}

.hj-factlist { display: flex; flex-direction: column; gap: .7rem; }
.hj-factlist .f {
  font-size: .86rem;
  color: #555;
  line-height: 1.8;
  padding: .3rem 0 .3rem 1rem;
  border-left: 3px solid #D10456;
}
.hj-factlist .f b { color: #222; }

.hj-subblock {
  background: #FAF8FB;
  border-radius: 12px;
  padding: 1.8rem 2rem;
  margin-top: 2rem;
}
.hj-subblock h3 { font-size: 1rem; margin-bottom: 1rem; font-weight: bold; }

/* ---------- program cards (ゆめキッズアカデミー) ---------- */
.hj-proggrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 767px) {
  .hj-proggrid { grid-template-columns: 1fr; gap: .7rem; }
}
.hj-progcard {
  background: #FFF;
  border: 1px solid #EAEAEA;
  border-radius: 12px;
  padding: 1.3rem 1rem;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: box-shadow .2s;
}
.hj-progcard:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.hj-progcard .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: #F5EEF7; color: #8836AE;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .6rem; font-family: "Jost", sans-serif; font-size: .78rem; font-weight: bold;
}
.hj-progcard.is-linked { border: 1px dashed #F97709; }
.hj-progcard.is-linked .ic { background: #FFEFE0; color: #F97709; }
.hj-progcard h5 { font-size: .86rem; color: #222; margin: 0; }
.hj-progcard .badge {
  display: inline-block; font-family: "Jost", sans-serif; font-size: .64rem;
  color: #F97709; border: 1px solid #F97709; border-radius: 99px; padding: .1rem .6rem; margin-top: .5rem;
}
@media (max-width: 767px) {
  .hj-progcard { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .9rem 1.1rem; }
  .hj-progcard .ic { margin: 0; flex: none; }
  .hj-progcard .badge { margin: 0 0 0 auto; }
}

.hj-note {
  font-size: .78rem;
  color: #999;
  margin-top: 1.2rem;
}
.hj-note a { color: #8836AE; }

/* ---------- marche photos ---------- */
.hj-photorow { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2rem 0; }
@media (max-width: 767px) { .hj-photorow { grid-template-columns: 1fr; } }
.hj-photo {
  height: 150px; border-radius: 12px;
  background: linear-gradient(135deg, #D10456 0%, #8836AE 100%);
  display: flex; align-items: flex-end; padding: 1rem;
  color: #fff; font-size: .78rem; font-weight: bold;
}
.hj-photo.alt2 { background: linear-gradient(135deg, #00377D 0%, #1E8EF5 100%); }
.hj-photo.alt3 { background: linear-gradient(135deg, #F97709 0%, #D10456 100%); }

/* ---------- founder ---------- */
.hj-founder { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center; }
@media (max-width: 767px) { .hj-founder { grid-template-columns: 1fr; text-align: center; } }
.hj-founder__photo {
  width: 200px; height: 200px; border-radius: 50%;
  background: linear-gradient(135deg, #F5EEF7, #FBF3F8);
  margin: 0 auto;
}

/* ---------- blog list ---------- */
.hj-bloggrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
@media (max-width: 767px) { .hj-bloggrid { grid-template-columns: 1fr 1fr; } }
.hj-blogcard { text-decoration: none; display: block; }
.hj-blogcard .thumb { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: #F0ECEF; overflow: hidden; margin-bottom: .6rem; }
.hj-blogcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hj-blogcard .ttl { font-size: .82rem; color: #333; line-height: 1.6; }

/* ---------- final CTA ---------- */
.hj-final { text-align: center; }
.hj-final .hj-btn { min-width: 260px; }

/* ============================================================
   Phase2 追加コンポーネント
   ============================================================ */

/* page hero (post_titleの下に置くリード文) */
.hj-page-lead {
  padding: 2.2rem 0 0;
}
.hj-page-lead p {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  max-width: 46em;
  margin: 0 auto 1rem;
  text-align: center;
  line-height: 1.9;
}

/* timeline (6ステップ/キャリア年表など) */
.hj-timeline { display: flex; flex-direction: column; gap: 0; max-width: 46em; margin: 0 auto; }
.hj-timeline .step {
  display: grid; grid-template-columns: 44px 1fr; gap: 1.2rem;
  padding: 1.4rem 0; border-bottom: 1px solid #EAEAEA;
}
.hj-timeline .step:last-child { border-bottom: none; }
.hj-timeline .num {
  width: 44px; height: 44px; border-radius: 50%;
  background: #F5EEF7; color: #8836AE;
  display: flex; align-items: center; justify-content: center;
  font-family: "Jost", sans-serif; font-weight: bold; font-size: .82rem;
}
.hj-timeline .step h4 { font-size: .95rem; margin-bottom: .5rem; color: #222; }
.hj-timeline .step p { font-size: .85rem; color: #666; line-height: 1.85; margin: 0; }
.hj-timeline .step .en { font-family: "Jost", sans-serif; font-size: .7rem; color: #D10456; letter-spacing: .06em; margin-bottom: .3rem; display: block; }

/* 育つ力 → 学校でのつながり 対応表 */
.hj-tbl { width: 100%; border-collapse: collapse; max-width: 50em; margin: 0 auto; }
.hj-tbl th, .hj-tbl td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid #EAEAEA; font-size: .84rem; }
.hj-tbl th { font-family: "Jost", sans-serif; font-size: .7rem; letter-spacing: .06em; color: #999; text-transform: uppercase; }
.hj-tbl td:first-child { color: #222; font-weight: bold; }
.hj-tbl td:last-child { color: #666; }
.hj-tbl-wrap { overflow-x: auto; }

/* diff box (2案比較 / プログラム間の違い) */
.hj-diffgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 767px) { .hj-diffgrid { grid-template-columns: 1fr; } }
.hj-diffgrid .col { background: #FFF; border: 1px solid #EAEAEA; border-radius: 12px; padding: 1.5rem 1.6rem; }
.hj-diffgrid .col.is-accent { border-color: #F97709; }
.hj-diffgrid .col .tt { font-family: "Jost", sans-serif; font-size: .72rem; letter-spacing: .06em; color: #D10456; margin-bottom: .5rem; text-transform: uppercase; }
.hj-diffgrid .col h4 { font-size: 1rem; margin-bottom: .8rem; }
.hj-diffgrid .col p { font-size: .85rem; color: #666; line-height: 1.85; margin: 0; }

/* CTA band (途中/末尾の連携相談・体験誘導帯) */
.hj-ctaband { background: #FAF8FB; border-radius: 16px; padding: 2.4rem 2rem; text-align: center; }
.hj-ctaband.is-navy { background: #00377D; color: #fff; }
.hj-ctaband.is-navy p { color: #E4E9F5; }
.hj-ctaband h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.hj-ctaband p { font-size: .9rem; color: #666; max-width: 40em; margin: 0 auto 1.2rem; }

/* worklist (お仕事体験マルシェ等のステップ) */
.hj-worklist { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.5rem 0; }
.hj-worklist span {
  font-family: "Jost", sans-serif; font-size: .74rem; padding: .5rem 1rem; border-radius: 99px;
  background: #FFEFE0; color: #F97709; font-weight: bold;
}
.hj-worklist span:not(:first-child)::before { content: "→ "; color: #C9C2AC; font-family: sans-serif; font-weight: normal; }

/* 注記(断定回避・事実ベース表現の補足) */
.hj-fn { font-size: .76rem; color: #999; max-width: 46em; margin: 1.2rem auto 0; text-align: center; line-height: 1.8; }

/* section spacing helper (Phase2ページ全体で使用) */
.hj-sec--tight { padding: 3.2rem 0; }
@media (max-width: 767px) { .hj-sec--tight { padding: 2.2rem 0; } }

.hj-center { text-align: center; }
.hj-h3-c { font-size: 1.15rem; text-align: center; margin-bottom: 1.6rem; font-family: "YuMincho","Hiragino Mincho ProN","Yu Mincho",serif; }