/* ============================================================
   philosophy.css - 育成哲学と未来（サブページ再設計版）
   ワイヤーフレーム_サブページ再設計.md §3-1 準拠
   参考: zelvia /club/overview/（章立て）＋/partner/partner-list/（数字先出し）
   ============================================================ */

/* ---------- VISION（大タイポ2カラム） ---------- */
.ph-vision {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}

.ph-vision .sub-head {
  margin-bottom: 0;
}

.sub-head__ja.ph-vision__catch {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.6;
}

.ph-vision__catch span {
  color: var(--primary);
}

.ph-statement p {
  margin-bottom: 20px;
}

.ph-statement p:last-child {
  margin-bottom: 0;
}

/* feature-card形（影付き白箱＋金の小英字ラベル）。金の左ボーダーは全廃（2026-07-12） */
.ph-highlight {
  margin: 28px 0;
  padding: 24px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
}

.ph-highlight::before {
  content: "OUR STANCE";
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

.ph-highlight p {
  margin-bottom: 4px;
}

.ph-highlight p:last-child {
  margin-bottom: 0;
}

.ph-highlight strong {
  font-size: 17px;
}

/* ---------- RESULTS（数字タイル4枚・実績の先出し） ---------- */
.sub-head__ja.ph-results__lead {
  font-size: clamp(24px, 3vw, 34px);
}

.ph-results__lead span {
  color: var(--accent-dark);
}

.ph-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ph-result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  padding: 28px 20px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.ph-result__num {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.ph-result strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.ph-result span {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-sub);
}

/* ---------- 全幅写真帯（Ken Burns） ---------- */
.ph-visual {
  height: 380px;
  overflow: hidden;
  position: relative;
}

.ph-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ph-visual img {
    animation: none;
  }
}

/* ---------- 03 MISSION（中央寄せ引用大タイポ＋番号リスト） ---------- */
.mission-copy {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.mission-copy > blockquote {
  position: relative;
  margin: 44px auto;
  font-family: var(--font-head);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.mission-copy > blockquote::before,
.mission-copy > blockquote::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto;
}

.mission-copy > blockquote::before {
  margin-bottom: 24px;
}

.mission-copy > blockquote::after {
  margin-top: 24px;
}

.mission-points {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  counter-reset: mission;
}

.mission-points p {
  counter-increment: mission;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

.mission-points p:first-child {
  border-top: 1px solid var(--border);
}

.mission-points p::before {
  content: "0" counter(mission);
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  flex: 0 0 auto;
}

.mission-closing {
  margin-top: 40px;
  font-size: 17px;
  font-weight: 700;
}

.mission-closing span {
  color: var(--accent-dark);
}

/* ---------- 04 THREE PILLARS（濃紺帯・金Inter大数字3カード） ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 32px 28px;
}

.pillar-card__number {
  display: block;
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 18px;
}

.pillar-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-inverse);
}

.pillar-card__lead {
  margin: 6px 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.pillar-card p:last-child {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- 05 THEME（番号2ブロック＋写真の2カラム） ---------- */
.theme-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.theme-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
}

.theme-item + .theme-item {
  border-top: 1px solid var(--border);
}

.theme-item > span {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  flex: 0 0 auto;
}

.theme-item h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.theme-item p {
  font-size: 14px;
  line-height: 1.9;
}

.theme-visual img {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- 06 STORY（全幅写真の上にストーリー本文） ---------- */
.ph-story {
  position: relative;
  padding: 112px 0;
  overflow: hidden;
  background: var(--secondary);
}

.ph-story__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.ph-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 33, 65, 0.78);
}

.ph-story .container {
  position: relative;
  z-index: 1;
}

.ph-story .sub-head__en {
  color: var(--accent);
}

.ph-story .sub-head__ja {
  color: var(--text-inverse);
}

.ph-story__copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-inverse);
  font-size: 16px;
  line-height: 2.2;
}

.ph-story__copy span {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 07 MESSAGE（濃紺・写真＋テキスト2カラム） ---------- */
.message-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.message-visual img {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-2);
}

.message-copy p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}

.message-copy p:last-child {
  margin-bottom: 0;
}

.message-emphasis {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--text-inverse) !important;
}

/* feature-card形の濃紺上バリエーション（半透明カード＋金の小英字ラベル）。金の左ボーダーは全廃（2026-07-12） */
.message-highlight {
  margin: 24px 0;
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--accent);
}

.message-highlight::before {
  content: "BELIEF";
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ---------- BELIEF（全幅写真＋白大タイポのオーバーレイ） ---------- */
.belief {
  position: relative;
  padding: 128px 0;
  overflow: hidden;
  background: var(--secondary);
}

.belief__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.belief::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 33, 65, 0.72) 0%, rgba(0, 33, 65, 0.6) 100%);
}

.belief .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.belief h2 {
  font-family: var(--font-head);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-inverse);
  text-shadow: 0 2px 16px rgba(0, 33, 65, 0.6);
}

.belief h2 span {
  color: var(--accent);
}

.belief p {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ph-vision {
    gap: 40px;
  }

  .ph-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ph-vision {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ph-results-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ph-result {
    padding: 22px 16px;
  }

  .ph-visual {
    height: 220px;
  }

  .theme-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .message-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ph-story {
    padding: 52px 0;
  }

  .ph-story__copy {
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }

  .belief {
    padding: 56px 0;
  }
}