@charset "UTF-8";
/* =============================================
   PHILOSOPHY ページ（2026リニューアル / Figma PHILOSOPHY_PC node 280:553 / 1200pxフレーム）
   - 黄背景・白の巨大見出し（VISION/MISSION/CULTURE）・ヒーローは書き出し画像
   - OOHバーストは js/philosophy.js でスクロール連動（左端→右へ / 右端→左へ）
   - 単位は em()（_mixins.scss）。PC=16px固定 / SP=440px相当のvw追従（SPデザイン未支給のため展開実装）
============================================= */
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

main {
  padding-top: 0; /* style.scss の main{padding-top:160px} を打ち消し */
}

.philosophy {
  position: relative;
  overflow: clip;
  background-color: #FFF226;
  padding-top: 13em; /* fixedヘッダー(90px)込みのFigma実測タイトル位置 */
  padding-bottom: 13.75em; /* チェックバック: フッター手前の余白を広めに（footer margin100pxと合わせ計320px） */
  color: #2c2c2c;
}
@media screen and (max-width: 768px) {
  .philosophy {
    padding-top: 6.5em;
    padding-bottom: 8.125em;
  }
}

/*--- ページタイトル ---*/
.philosophy__title {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 4.0625em;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .philosophy__title {
    font-size: 2.875em;
  }
}

/*--- ヒーロー（世界を、OOH!と言わせる会社。）
      Lottie(images/philosophy/philosophy.json)のマウント先。lottie-webがこの中に
      <svg viewBox="0 0 851 326"> を100%×100%で生成する。
      コンポ851×326の中身は旧書き出し画像と同じアートワーク823.7×302.3（Figma実測823.7×302）で、
      周囲に余白（左13.2 / 右14.1 / 上11.5 / 下12.3）が付いている。
      旧実装は「アートワーク＝ボックス」だったため、余白ぶんボックスを広げて
      アートワークの見た目サイズと位置を据え置く:
        max-width 824 × 851/823.7 ≒ 851 / width 80% × 851/823.7 ≒ 82.7%
      ※タグを <p> から <div> に変更済み。common.scss の p{font-size:16px} で継承が切れると
        SPで em() が16px固定になり、本ファイルの前提（SP=440px相当のvw追従）が崩れるため ---*/
.philosophy__hero {
  max-width: 53.1875em;
  width: 82.7%;
  aspect-ratio: 851/326;
  margin: 7.90625em auto 0; /* 旧138px − コンポ上余白11.5px。アートワーク上端の位置を据え置く */
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .philosophy__hero {
    width: calc(103.31% - 3.875em); /* 旧 calc(100% - em(60)) をコンポ基準へ換算（×1.0331） */
    margin-top: 3.03125em; /* 旧60px − 11.5px */
  }
}

.philosophy__hero svg {
  display: block;
}

/* lottieが使えない環境用のフォールバック画像（＝旧実装の書き出し画像）。
   画像は余白なしのアートワークそのものなので、コンポ内での比率(823.7/851)に合わせて中央に置く */
.philosophy__hero-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96.8%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* lottie再生中はフォールバック画像を出さない（二重表示防止） */
.philosophy__hero.is-lottie-ready .philosophy__hero-img {
  display: none;
}

/*--- セクション共通（VISION / MISSION / CULTURE） ---*/
.philosophy-section {
  position: relative;
}

.philosophy-section--vision {
  margin-top: 9.5625em; /* Figma実測: ヒーロー下端(729)→VISION(882) */
}
@media screen and (max-width: 768px) {
  .philosophy-section--vision {
    margin-top: 5.625em;
  }
}

.philosophy-section--mission {
  margin-top: 12.4375em; /* Figma実測: VISION本文下端(1397)→MISSION(1596) */
}
@media screen and (max-width: 768px) {
  .philosophy-section--mission {
    margin-top: 6.875em;
  }
}

.philosophy-section--culture {
  margin-top: 10.8125em; /* Figma実測: MISSIONリード下端(1928)→CULTURE(2101) */
}
@media screen and (max-width: 768px) {
  .philosophy-section--culture {
    margin-top: 6.875em;
  }
}

/* 巨大白見出し（装飾）＋重ねサブタイトルのラッパー */
.philosophy-section__heading {
  position: relative;
}

.philosophy-section__word {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 800;
  font-size: 11.125em;
  line-height: 1.24; /* Figma実測 222px相当 */
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  opacity: 0.9;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .philosophy-section__word {
    font-size: 5.5em; /* チェックバック: CULTURE(最長)が440px幅の両端ギリギリに届くサイズ */
  }
}

/* 白見出しに重ねる日本語サブタイトル（Figma実測: 見出し上端+104px） */
.philosophy-section__subtitle {
  /* チェックバック: 白見出しブロックの上下中央に重ねる（absolute+flexで見出し高に自動追従） */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 1.5625em;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .philosophy-section__subtitle {
    font-size: 1.125em;
  }
}

.philosophy-section__lead {
  margin-top: 0.3333333333em; /* Figma実測: 白見出しブロック下端(1104)→リード(1114)（自身のfont-size 30px補正） */
  font-size: 2.1875em;
  font-weight: 700;
  line-height: 1.667; /* Figma実測 50px/30px */
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .philosophy-section__lead {
    margin-top: 0.6666666667em;
    font-size: 1.5625em;
    line-height: 1.7;
  }
}

.philosophy-section__body {
  max-width: 56.0666666667em;
  width: 91%;
  margin: 1.6666666667em auto 0; /* Figma実測: リード下端(1214)→本文(1239) */
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.667; /* Figma実測 25px/15px */
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .philosophy-section__body {
    width: calc(100% - 3.3333333333em);
    margin-top: 1.6666666667em;
    font-size: 0.9375em;
    line-height: 1.85;
  }
}

/*--- カルチャー5項目 ---*/
.philosophy-culture {
  position: relative;
  z-index: 1;
  max-width: 39.125em; /* Figma実測: 罫線幅 */
  width: 91%;
  margin: 7.8125em auto 0; /* Figma実測: サブタイトル下端(2228)→リスト(2353) */
  list-style: none;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .philosophy-culture {
    width: calc(100% - 3.125em);
    margin-top: 4.375em;
  }
}

.philosophy-culture__item {
  min-height: 13.75em; /* Figma実測: 1項目220px */
  border-top: 1px solid #2c2c2c;
  padding-top: 2.0625em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .philosophy-culture__item {
    min-height: 0;
    padding: 1.5em 0 1.875em;
  }
}

.philosophy-culture__item:last-child {
  border-bottom: 1px solid #2c2c2c;
}

.philosophy-culture__number {
  display: block;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 1.875em;
  letter-spacing: 0.05em;
  line-height: 1.24;
}
@media screen and (max-width: 768px) {
  .philosophy-culture__number {
    font-size: 1.5em;
  }
}

.philosophy-culture__name {
  margin-top: 0.2068965517em;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 1.8125em;
  letter-spacing: 0.05em;
  line-height: 1.24;
}
@media screen and (max-width: 768px) {
  .philosophy-culture__name {
    font-size: 1.375em;
  }
}

.philosophy-culture__text {
  margin-top: 1em;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.53; /* Figma実測 23px/15px */
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .philosophy-culture__text {
    margin-top: 0.9230769231em;
    font-size: 0.8125em;
    line-height: 1.7;
  }
}

/*--- OOHバースト（スクロール連動の装飾。基準位置はFigma実測・セクション上端基準） ---*/
.philosophy__burst {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  will-change: transform; /* philosophy.js が translateX を毎スクロール更新する */
}

.philosophy__burst--vision {
  width: 68.25em; /* Group 268 */
  left: calc(50% - 63.8125em); /* Figma x-421（中央基準） */
  top: 18.375em; /* VISION上端(882)→バースト(1176) */
  z-index: 2;
}

.philosophy__burst--culture-right {
  width: 152.5em; /* Group 242（右へ大きくはみ出す） */
  left: calc(50% - 29.0625em); /* Figma x135 */
  top: 22.0625em; /* CULTURE上端(2101)→バースト(2454) */
}

.philosophy__burst--culture-left {
  width: 68.625em; /* Group 267 */
  left: calc(50% - 49.0625em); /* Figma x-185 */
  top: 81.875em; /* CULTURE上端(2101)→バースト(3411) */
}

@media screen and (max-width: 768px) {
  /* SPは幅を約1/2に抑えて同じ雰囲気で配置（よしなに対応） */
  /* --vision の left（チェックバック: 2つ目のOの右半分をちらっと見せる）。
     burst-left-01.webp(1092×315)は O(x0-316) / O(x338-654) / H(x675-943) / !(x964-1090) の4グリフ。
     SP幅560px時の縮尺は 560/1092 = 0.513 なので、left の絶対値がそのまま
     「画面左端で切れる元画像のx座標 × 0.513」になる。
     2つ目のOの中心は x=496 → 496 × 0.513 = 254 → left: em(-254) でちょうど右半分から表示される */
  .philosophy__burst--vision {
    width: 35em;
    left: -11.5em;
    top: 21.25em;
  }
  .philosophy__burst--culture-right {
    width: 68.75em;
    left: 3.75em;
    top: 26.25em;
  }
  .philosophy__burst--culture-left {
    width: 35em;
    left: -10em;
    top: 88.75em;
  }
}
/*# sourceMappingURL=style_philosophy.css.map */