/* ============================================================
 * Company Philosophy Page — sundayfolk-child
 * ============================================================ */

.company-philosophy-page {
  --c-orange: #e05531;
  --c-orange-dk: #c44420;
  --c-navy: #1e2f4d;
  --c-navy-dk: #131f34;
  --c-text: #2c3e50;
  --c-sub: #6b7280;
  --c-border: rgba(0, 0, 0, .07);
  --max-w: 1200px;
  --sec-pad: 100px;
  font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-weight: 600;
  background: linear-gradient(180deg, #fff 0, #fbf6ef 520px, #fff 100%);
  color: var(--c-text);
}

.company-philosophy-main {
  overflow: hidden;
}
.company-philosophy-main .container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
}
/* 旧: .company-philosophy-page .contact-cta .container も同セレクタリストに含めていたが、
 *     詳細度 (0,3,0) が .contact-cta--full .contact-cta__inner (0,2,0) に勝ち、
 *     padding: 0 48px（縦 0）/ max-width: 1200px に上書きして CTA レイアウト崩れ
 *     → 2026-05-28 B-1 残部削除直後の不具合修正で除去。.contact-cta の整形は
 *     sf-contact-cta.css に委譲（SERVICE での同パターン修正
 *     [[MIGRATION_STEPS Step 10-4 不具合修正 原因②]] と同じ流儀）。
 *     なお `page-company-philosophy.php` では contact-cta が </main> の外側で呼ばれるため
 *     .company-philosophy-main .container は CTA を捕捉しない（philosophy 本文専用セレクタ）。 */

.company-philosophy-page #philosophy,
.company-philosophy-page #purpose,
.company-philosophy-page #mission,
.company-philosophy-page #value,
.company-philosophy-page #vision,
.company-philosophy-page #brand,
.company-philosophy-page #message,
.company-philosophy-page #contact {
  scroll-margin-top: 120px;
}

/* event-page-header / split-slide-line は sf-components.css に集約（Step 10-9 パス1b）。 */

.philosophy-lead {
  position: relative;
  padding: calc(var(--sec-pad) - 36px) 0 var(--sec-pad);
  background: linear-gradient(90deg, rgba(238, 114, 53, .08) 0, rgba(238, 114, 53, 0) 48%), #fff;
  isolation: isolate;
  overflow: hidden;
}
.philosophy-lead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}
.philosophy-lead .container {
  position: relative;
  z-index: 1;
  width: calc(100% - clamp(96px, 15vw, 270px) * 2);
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.philosophy-lead__grid {
  display: grid;
  gap: clamp(48px, 6vw, 84px);
  align-items: start;
}
/* philosophy-kicker の base は sf-components.css に集約（パス1b）。
 * philosophy 固有の上書き（.philosophy-message .philosophy-kicker{color}）は本ファイルに残す。 */
.philosophy-lead__statement {
  max-width: none;
  margin: 0;
  font-size: clamp(31px, 3.8vw, 54px);
  line-height: 1.38;
  letter-spacing: .04em;
  color: var(--c-navy);
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.philosophy-lead__body {
  display: grid;
  gap: clamp(32px, 4vw, 46px);
}
html.intro-ready .company-philosophy-page .philosophy-lead__statement {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.company-philosophy-page [data-scroll-reveal] {
  opacity: 0;
  transform: translate3d(0, 54px, 0);
  transition: opacity .72s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.company-philosophy-page [data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.philosophy-text-block {
  max-width: 820px;
  margin-left: min(5.5vw, 86px);
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(30, 47, 77, .12);
}
.philosophy-text-block:nth-child(2) {
  margin-left: min(16.5vw, 256px);
}
.philosophy-text-block:nth-child(3) {
  margin-left: min(27.5vw, 426px);
}
.philosophy-text-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.philosophy-text-block__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.45;
  color: var(--c-navy);
}
.philosophy-text-block__title::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 2px;
  background: var(--c-orange);
}
.philosophy-text-block__text,
.philosophy-card__text,
.philosophy-brand__text,
.philosophy-message__text {
  color: var(--c-text);
  line-height: 2;
}

.philosophy-core,
.philosophy-brand {
  padding: var(--sec-pad) 0;
  background: #fff;
}
.philosophy-core__head {
  max-width: 1080px;
  margin-bottom: 52px;
}
.philosophy-core__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.3;
  color: var(--c-navy);
}
.philosophy-core__br-sp {
  display: none;
}
.philosophy-core__lead {
  margin: 0;
  color: var(--c-sub);
  line-height: 1.9;
}
.philosophy-card-list {
  display: grid;
  gap: 28px;
}
.philosophy-card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  padding: clamp(32px, 4.4vw, 56px);
  border: 1px solid rgba(30, 47, 77, .1);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 12px 34px rgba(19, 31, 52, .045);
}
.philosophy-card > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  text-align: center;
}
.philosophy-card__no {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: clamp(50px, 6vw, 78px);
  font-weight: 600;
  line-height: 1;
  color: rgba(238, 114, 53, .26);
}
.philosophy-card-list .philosophy-card:nth-child(odd) .philosophy-card__no {
  color: transparent;
  -webkit-text-stroke: 2px rgba(238, 114, 53, .26);
}
.philosophy-card__en {
  display: block;
  margin-top: 12px;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--c-orange);
  text-transform: uppercase;
}
.philosophy-card__title {
  display: block;
  margin: 0 0 18px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(30, 47, 77, .05) 0%, rgba(30, 47, 77, .026) 54%, rgba(30, 47, 77, 0) 100%);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
  color: #0c182c;
}
.philosophy-card__statement {
  margin: 0 0 24px;
  padding: 0 18px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
}
.philosophy-card__text {
  padding: 0 18px;
  color: rgba(38, 49, 67, .82);
}

.philosophy-brand__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 6vw, 92px);
  align-items: start;
}
.philosophy-brand__statement {
  max-width: 760px;
  margin: 0;
  font-size: clamp(26px, 3.35vw, 46px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .04em;
  color: var(--c-navy);
}
.philosophy-brand__statement span {
  color: var(--c-orange);
}
.philosophy-brand__copy {
  display: grid;
  max-width: 700px;
  margin-top: clamp(54px, 7vw, 112px);
  gap: 18px;
}

.philosophy-message {
  position: relative;
  padding: var(--sec-pad) 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(12, 24, 44, .96) 0%, rgba(30, 47, 77, .96) 100%);
  color: #fff;
}
.philosophy-message::before,
.philosophy-message::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.philosophy-message::before {
  left: 48%;
  background: url("../img/message-footer-img/message-footer-img-01.webp") center right / cover no-repeat;
}
.philosophy-message::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 24, 44, 1) 0%, rgba(12, 24, 44, .96) 56%, rgba(12, 24, 44, .42) 76%, rgba(12, 24, 44, .16) 100%);
}
.philosophy-message .container {
  position: relative;
  z-index: 1;
}
.philosophy-message__inner {
  max-width: 980px;
}
.philosophy-message .philosophy-kicker {
  color: #ffb08c;
}
.philosophy-message__title {
  margin: 0 0 24px;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.42;
  color: #fff;
}
.philosophy-message__text {
  max-width: 760px;
  margin-left: clamp(14px, 2.5vw, 36px);
  color: rgba(255, 255, 255, .84);
}

/* .br-sp-only / .c-arrow / .contact-cta--full / .top-fab 系の .company-philosophy-page スコープ重複定義は
 * sf-contact-cta.css / sf-fab.css が全ページ enqueue で同等値を提供するため削除（B-1 残部 / 2026-05-28）。
 *
 * 未削除（動作が変わるため別タスク扱い）:
 *   - @media (max-width:767px) 内の .company-philosophy-page .br-sp-only / .contact-cta__inner /
 *     __ja / __btn / .top-fab — sf-contact-cta.css / sf-fab.css は 599px ブレイクポイント。
 *     philosophy のみ 767px で独自レスポンシブ。とくに .top-fab は philosophy 767px 「width:92px のピル」、
 *     sf-fab.css 599px 「46x46 円形」と挙動が異なる。design 判断後に統一すべき
 *
 * 追記（B-1 残部直後の不具合修正 / 2026-05-28）:
 *   L24 / L498 の `.company-philosophy-page .contact-cta .container` 共有セレクタも除去済み。
 *   詳細度 (0,3,0) が sf-contact-cta.css の `.contact-cta--full .contact-cta__inner` (0,2,0) に
 *   勝って padding/max-width を奪い CTA 縦圧壊を起こしていた。SERVICE での同パターン修正
 *   [[MIGRATION_STEPS Step 10-4 不具合修正 原因②]] と同じ流儀。
 */

@media (prefers-reduced-motion: reduce) {
  /* event-page-header / split-slide の reduced-motion は sf-components.css に集約（パス1b） */
  .philosophy-lead__statement,
  .company-philosophy-page [data-scroll-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* @media (max-width: 980px) .company-philosophy-page .contact-cta--full .contact-cta__inner:
 * sf-contact-cta.css L178-184 と完全一致のため削除（B-1 残部 / 2026-05-28） */

@media (max-width: 900px) {
  .philosophy-lead__grid,
  .philosophy-card,
  .philosophy-brand__inner {
    grid-template-columns: 1fr;
  }
  .philosophy-text-block,
  .philosophy-text-block:nth-child(2),
  .philosophy-text-block:nth-child(3) {
    margin-left: 0;
  }
  .philosophy-card {
    gap: 18px;
  }
  .philosophy-card > div:first-child {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
  }
  .philosophy-card__en {
    margin-top: 0;
  }
  .philosophy-message__text {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  /* .company-philosophy-page .contact-cta .container は L24 の comma list から除外と同じ理由で
   * ここでも除外（B-1 残部削除直後の不具合修正 / 2026-05-28）。 */
  .company-philosophy-main .container {
    padding: 0 20px;
  }
  /* event-page-header の SP 調整は sf-components.css に集約（パス1b） */
  .philosophy-lead,
  .philosophy-core,
  .philosophy-brand,
  .philosophy-message {
    padding: 72px 0;
  }
  .philosophy-lead {
    padding-top: 54px;
    background: linear-gradient(180deg, rgba(238, 114, 53, .09) 0, rgba(238, 114, 53, 0) 42%), #fff;
  }
  .philosophy-lead .container {
    width: calc(100% - 40px);
  }
  .philosophy-lead__grid {
    gap: 38px;
  }
  .philosophy-lead__bg {
    display: none;
  }
  .philosophy-lead__statement {
    font-size: 26px;
    line-height: 1.48;
    letter-spacing: .03em;
  }
  .philosophy-lead__body {
    gap: 28px;
  }
  .philosophy-text-block {
    padding-bottom: 24px;
  }
  .philosophy-text-block__title {
    gap: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    line-height: 1.45;
  }
  .philosophy-text-block__title::before {
    flex-basis: 14px;
    width: 14px;
  }
  .philosophy-text-block__text {
    font-size: 15px;
    line-height: 1.9;
  }
  .philosophy-core__br-pc {
    display: none;
  }
  .philosophy-core__br-sp {
    display: inline;
  }
  .philosophy-card {
    padding: 30px 24px;
  }
  .philosophy-card__no {
    font-size: 48px;
  }
  .philosophy-card > div:first-child {
    align-items: baseline;
    flex-wrap: wrap;
  }
  .philosophy-card__en {
    font-size: 13px;
  }
  .philosophy-card__statement {
    padding: 16px 18px;
  }
  .philosophy-card__statement br {
    display: none;
  }
  .company-philosophy-page .br-sp-only {
    display: block;
  }
  .philosophy-message__title {
    font-size: clamp(24px, calc(4.4vw - 6px), 50px);
  }
  .company-philosophy-page .contact-cta--full .contact-cta__inner {
    padding: 64px 24px;
  }
  .company-philosophy-page .contact-cta__ja {
    font-size: 22px;
    line-height: 1.55;
  }
  .company-philosophy-page .contact-cta__btn {
    align-self: flex-start;
    padding: 18px 42px;
    font-size: 16px;
  }
  .company-philosophy-page .top-fab {
    right: 12px;
    bottom: 16px;
    width: 92px;
    padding: 10px 12px;
    font-size: 10px;
  }
}

/* ============================================================
 * company-link-nav 幅補正
 *
 * company-link-nav は会社案内 5 ページ共通テンプレ（template-parts/company-link-nav.php）。
 * philosophy の :root 相当で `--max-w: 1200px` に上書きされているため、
 * 共通テンプレ `.company-link-nav .container { max-width: var(--max-w, 1440px) }`
 * が 1200px で評価されてカード幅が他 4 ページ（ハブ / overview / history / message）と
 * 揃わなかった。さらに L24 の `.company-philosophy-main .container` セレクタも
 * 子孫の company-link-nav .container を巻き込んでいたため二重に幅が狭くなっていた。
 *
 * 対応: company-link-nav 配下だけ --max-w を 1440px に再上書きする（CSS変数の継承を利用）。
 * これで .company-link-nav .container と .company-link-nav__grid 内の参照が
 * すべて 1440px 基準に戻り、他 4 ページと視覚同一になる。
 *
 * (2026-05-28 ToDo A-1 作業中に発見した既存バグ)
 * ============================================================ */
.company-philosophy-main .company-link-nav {
  --max-w: 1440px;
}