/* ============================================================
   about.html（私たちが大切にしていること）専用スタイル
   ------------------------------------------------------------
   読み込み順：common.css → about.css
   構成はFigmaワイヤーフレーム node 648-245（SP-375）準拠。
   配下ページはTOPより控えめな「一般レベル」の文字サイズにする
   ============================================================ */

/* ---- 配下ページ共通の控えめ見出し（このページ内のみ上書き） ---- */
main .en-h2 {
  font-size: var(--fs-en-h3);   /* TOPの--fs-displayより1段小さく */
  letter-spacing: 3px;
}
main .section-head__body h3 {
  font-size: var(--fs-jp-md);   /* TOPの--fs-jp-lgより1段小さく */
  letter-spacing: 3px;
  line-height: 1.6;
}
main .section-head__body p {
  line-height: 2;
}

/* ---- セクションの縦リズム ---- */
/* ティール→アイボリーの共有カラー。--bg-p は about.html末尾のJSが 0→1 で書き込む。
   .concept-burst（上のティール面）と .post-teal（下のアイボリー面）が
   この1つの色を共有するので、遷移中も両者に色差が出ず境目の線が生まれない */
:root { --bg-shift: color-mix(in srgb, var(--neutral-50) calc(var(--bg-p, 0) * 100%), var(--teal-300)); }

.about-section { padding-top: clamp(72px, 8.5vw, 140px); }
/* concept-stage（ティール4本柱）を抜けた直後のLOGO STORYだけ、上余白を広めに。
   ティールが終わった直後にすぐ見出しが来て詰まって見えるための調整。
   LOGO STORYとFOUNDER MESSAGEはどちらも.post-teal（#postTeal）の中にあり
   concept-stageの直接の兄弟ではないため、`.concept-stage + .about-section` は
   一致しない（.post-tealが兄弟）。.post-teal内の最初の.about-sectionだけを
   狙う。FOUNDER MESSAGE側（2つ目の.about-section）は対象外＝従来のまま */
.post-teal > .about-section:first-child { padding-top: clamp(100px, 11.5vw, 200px); }
/* 最後の .about-section は中身が関連ページナビだけ（FOUNDER MESSAGEはトルツメ済み）。
   セクション自身の padding-top と related の margin-top が二重になり
   228pxまで開いていたので padding-top を 0 にして、間隔は related 側に任せる
   （他ページの回遊リンク上余白＝121pxに揃う）。
   下は Contact＋SNS パネルが続くため padding-bottom も 0 */
.about-section--last { padding-top: 0; padding-bottom: 0; }

/* ============ HERO：声明文（中央配置） ============ */
.about-hero {
  padding-block: clamp(48px, 6vw, 104px) 0;
  text-align: center;
}
/* タイトルは共通.revealより、ぼかし（blur）を効かせて非常にゆっくり・柔らかく出現。
   移動量は小さめにして、スロー遷移中に下のリード文へかぶらないようにする */
.about-hero__title.reveal {
  transform: translateY(16px);
  filter: blur(12px);
  transition: opacity 1.3s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1.3s cubic-bezier(0.16, 0.84, 0.44, 1),
              filter 1.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.about-hero__title.reveal.is-visible { filter: blur(0); }

/* リード文2つは「スクロール開始」で出現（JSが .is-in を付与）。
   共通.revealはページ読み込み時に即発火してしまうため使わず、専用の状態を持つ。
   2文はcascadeして見えるよう、後の段落に遅延を付与 */
.about-hero__lead {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) var(--reveal-delay, 0s),
              transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) var(--reveal-delay, 0s);
}
.about-hero__lead.is-in { opacity: 1; transform: none; }
.about-hero__lead:nth-of-type(1) { --reveal-delay: 0s; }
.about-hero__lead:nth-of-type(2) { --reveal-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .about-hero__title.reveal { filter: none; }
  .about-hero__lead { opacity: 1; transform: none; }
}
.about-hero__title {
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 4px;
  color: var(--teal-400);
}
/* リードは幅で折り返さず、HTML側の<br>（文の切れ目）どおりに改行する */
.about-hero__lead {
  margin-top: clamp(40px, 5vw, 72px);
  text-align: center;
  font-size: var(--fs-body);
  line-height: 2.1;
  letter-spacing: 2px;
  color: var(--neutral-800);
}
.about-hero__lead + .about-hero__lead { margin-top: 1.6em; } /* 段落間はやや詰める */
.about-hero__lead strong {
  font-size: calc(var(--fs-body) + 4px);
  font-weight: 700;
  color: var(--teal-900);
}

/* ============ 番号ピル（姿勢カード・向き合い方カード共通） ============ */
.num-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 16px;
  border: 1px solid var(--teal-400);
  border-radius: 999px;
  font-family: var(--font-en-serif);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--teal-400);
}

/* ============ BRAND CONCEPT：スクロール展開 ============
   .concept-stage は concept-body（4本柱）まで丸ごと包み、高さは自然な流し込み。
   .concept-pin が sticky で最後まで固定され、その間に
   .concept-burst（丸と同じ大きさ・同じティール色の円）が丸に重なった
   状態からスケールし、全画面へ広がる。
   burstの初期サイズを丸と同一にしているのは、10px等の小さい円を
   何十倍にも拡大すると縁のアンチエイリアスがぼやけて滲むため
   （拡大率を抑えることでシャープな縁を保つ）。色も丸と同じにして
   継ぎ目を完全に消している */
.concept-stage {
  position: relative;
  --concept-d: clamp(200px, 24vw, 280px); /* 丸の直径 */
  --symbol-w: clamp(140px, 16vw, 200px);  /* ハンドシェイクアニメの幅 */
}
/* 背景レイヤー（burst）：パネル（z1）より下。sticky固定で最後まで全画面ティール */
.concept-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* burstのはみ出しを隠す */
  z-index: 0;
  background: #fff; /* 休止時（円が小さい間）の背景。MISSIONの白カードと連続させる。
                       スクロールでburst（ティール）が全画面に広がり白は隠れる */
}
/* 前面レイヤー（ヘッダー）：パネル（z1）より上。負marginで背景レイヤーに重ねる。
   100vh全面を覆うがヘッダー以外はクリックを透過させる（下のパネル操作を阻害しない） */
.concept-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-top: -100vh;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.concept-pin .concept-focus { pointer-events: auto; }
.concept-burst {
  position: absolute;
  /* SPでは中身（シンボル＋タイトル＋リード）を上へ寄せているので、
     丸も同じ量だけ上げて同心を保つ。--concept-shift はJSが入れる（PCは0） */
  top: calc(50% - var(--concept-shift, 0px));
  left: 50%;
  width: var(--concept-d);
  height: var(--concept-d);
  border-radius: 50%;
  /* 下の .post-teal と同じ --bg-shift を使う。LOGO STORYのスクロールに
     連動して「画面全体」がティール→アイボリーへ一緒に変わるので、
     セクションの境目に色の段差＝線が出ない */
  background: var(--bg-shift);
  transform: translate(-50%, -50%) scale(1);
  will-change: transform;
}
/* タイトル＋リード（ピン内で中央固定）。
   タイトル「人を想う」は常時中央。リードはタイトルの直下に絶対配置し、
   背景が広がり切ったら「競り上がらず」その場で透過フェード出現する
   （リードを絶対配置にしているのは、非表示時にタイトルの中央位置を
   ずらさない＝小さい円の中でタイトルが常に中央に来るようにするため） */
.concept-focus {
  position: relative;
  z-index: 3;                /* 4本柱パネルより手前（SPで上部固定時に隠れないように） */
  text-align: center;
  transform-origin: top center; /* SPで上部へ縮小移動する際の基点 */
  will-change: transform;    /* リード退場後、JSが位置・サイズを変える */
}
.concept-focus__title {
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.4;
  letter-spacing: 8px;
  padding-left: 8px; /* letter-spacing分の光学調整 */
  color: #fff;
}
/* 「Dealの」＝上の行、「とは」＝下の行に置き、本体より小さく（丸ゴシックのまま） */
.concept-focus__title-sub {
  font-size: 0.5em;
  letter-spacing: 4px;
}
.concept-focus__title-pre { display: block; margin-bottom: 2px; }
.concept-focus__title-suffix { display: block; margin-top: 2px; }
/* 押し上げ完了時（JSが .is-docked を付与）は3行を1行に畳んで高さを抑える。
   「Dealの／人を想う／とは」→「Dealの人を想うとは」 */
.concept-focus.is-docked .concept-focus__title-pre,
.concept-focus.is-docked .concept-focus__title-suffix {
  display: inline;
  margin: 0;
}
/* SP：リード退場後、ヘッダーを小さくして画面上部に全幅ティールバーとして固定。
   pin＝z2なのでbar（このバー自体はz50）は後続パネル（z1）の上に載る。
   シンボルは通常フローに戻してタイトル直上へ寄せ、全体を小さくする */
@media (max-width: 959.98px) {
  .concept-focus.is-sp-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 12px 0 14px;
    background: var(--teal-300);
    box-shadow: 0 8px 18px rgba(14, 59, 52, 0.12);
    transform: none !important; /* JSのtransformは使わずCSSで上部配置 */
  }
  .concept-focus.is-sp-fixed .concept-focus__symbol {
    position: static;
    transform: none;
    width: 46px;
    margin: 0 auto -2px;
  }
  .concept-focus.is-sp-fixed .concept-focus__title { font-size: 19px; line-height: 1.25; letter-spacing: 4px; }
  /* このバーが上部に固定されている間は、追従ヘッダー（common.cssでfixed）を退避。
     どちらも画面上部に居座るため、ロゴがバーに重なり「Dealの人を想うとは」が
     読めなくなる。バーが外れれば自動で戻る */
  body:has(.concept-focus.is-sp-fixed) .site-header .logo-card,
  body:has(.concept-focus.is-sp-fixed) .site-header__actions {
    opacity: 0;
    pointer-events: none;
  }
}
/* ハンドシェイクの透過アニメ（ユーザー支給の素材 assets/heartbeat.webp）。
   静止時はティールの丸の上端からはみ出す位置に絶対配置（丸の中心＝タイトル中央を
   基準に半径ぶん上へ）。ドッキング時はJSがタイトル直上へ寄せる */
.concept-focus__symbol {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--concept-d) / 2 - var(--symbol-w) * 0.33);
  transform: translateX(-50%);
  width: var(--symbol-w);
  pointer-events: none;
}
.concept-focus__lead {
  position: absolute;
  top: 100%;                 /* タイトルのすぐ下 */
  left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(28px, 4vw, 56px);
  width: min(880px, 90vw);   /* <br>指定の各行が収まる幅に拡張 */
  opacity: 0;                /* JSがスクロールに応じてフェードイン */
  color: #fff;
}
.concept-focus__lead p {
  font-size: calc(var(--fs-body) + 2px); /* 2px下げ */
  line-height: 2.1;
  letter-spacing: 1.5px;
}
/* 締めの「人を想う」だけ太字にして理念のキーワードを立てる（サイズ・色は本文のまま） */
.concept-focus__lead strong { font-weight: 700; }

/* ============ 4本柱を載せる層（concept-stage内） ============
   背景ティールはピンされた.concept-burstが供給するため透明。
   上余白（リード退場までのスクロール間隔）と下余白（ヘッダーと白箱の
   同時解放調整）はJSがmargin-top / padding-bottomで設定する */
.concept-body {
  position: relative;
  z-index: 1;
  width: 100%;
  background: none;
  color: #fff;
  padding-block: 0;
}

/* ============ MISSION：画面幅いっぱいの白カード（TOP .service と同系） ============
   .mission-lead が全幅の白・角丸の器。中身は.mission-cardで--shell幅に頭打ち。
   見出し「MISSION」は他セクションのen-h2（大見出し）とは扱いを分け、
   CONCEPTの「Brand Concept」ラベルと同格の小さなオーバーラインにする */
.mission-lead {
  width: 100%;
  background: #fff;
  /* 下はCONCEPTの白い休止画面へ連続させるため角丸なし・余白なし */
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--pad-section) var(--edge) 16px;
}
@media (min-width: 960px) {
  /* HEROの声明文と白背景の起点の間隔をあける */
  .mission-lead { margin-top: 120px; }
}
/* SPは指定が無く、「Dealが存在する理由です。」の直後に白背景が
   ぴったり接していて息継ぎが無かった */
@media (max-width: 959.98px) {
  .mission-lead { margin-top: 40px; }
}
/* ランディング時は白背景ごと非表示。スクロールで視界に入ったら
   （＝HEROのリード文が出た後）下から少しふわっとフェードイン（JSが .is-in） */
.mission-lead {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.mission-lead.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mission-lead { opacity: 1; transform: none; transition: none; }
}
.mission-card {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  text-align: center;
  /* HERO声明文の後、スクロールで出現（読み込み時に見切れていても即出さないよう、
     共通.revealではなくJS（missionCard）が閾値超えでis-inを付与する） */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.mission-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mission-card { opacity: 1; transform: none; transition: none; }
}
.mission-card__en {
  font-family: var(--font-en-serif);
  font-weight: 700;
  font-size: var(--fs-sm);   /* Brand Conceptラベルと同格の小さいオーバーライン */
  letter-spacing: 2px;
  color: var(--teal-400);
}
/* ページの主張点なので、配下ページの控えめ基準（--fs-jp-md）より1段上げて
   --fs-jp-lg に。MISSIONだけは見出しとして強く出す */
.mission-card__title {
  margin-top: 8px;
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 5px;
  color: var(--teal-400);
}
.mission-card__body {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 1.5px;
  color: var(--neutral-800);
}
/* 理念キーワード「人を想う」だけティールで強調 */
.mission-card__accent { color: var(--teal-400); font-weight: 700; }

/* ティール面の後に続くアイボリー面（LOGO STORY／FOUNDER）。
   不透明背景＋z-indexでティール面より手前。負のmargin-topはJSが算出し、
   MISSIONのフェード30%地点で画面下端に達するよう配置する（競り上がり） */
/* ティール面（concept-stage）の直後のアイボリー面。
   セクション固有の背景色は持たず、上のティール面（.concept-burst）と
   同じ共有カラー --bg-shift を使う。1つの進捗 --bg-p で両方が同時に
   動くので、遷移の途中でも色差＝境目の線ができない */
.post-teal {
  position: relative;
  z-index: 2;
  background: var(--bg-shift);
}
@media (prefers-reduced-motion: reduce) {
  .post-teal { margin-top: 0 !important; } /* 競り上がり無効時は素直に下に置く */
  .concept-bg { position: static; height: auto; }        /* 演出なし：素直に流す */
  .concept-pin { position: static; margin-top: 0; height: auto; padding-block: clamp(48px, 8vw, 96px); }
  .concept-body {
    background: var(--teal-300);      /* ピンが流れるので自前でティールを持つ */
    padding-top: clamp(56px, 7vw, 120px);
  }
}
/* ティール上の配色オーバーライド（メニュー側のみ。白箱の中は通常配色） */
.concept-body .pillars__nav-item { border-color: rgba(255, 255, 255, 0.4); }
.concept-body .pillars__nav-item .num-pill { border-color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.8); }
.concept-body .pillars__nav-label { color: rgba(255, 255, 255, 0.75); }
.concept-body .pillars__nav-item.is-active {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.concept-body .pillars__nav-item.is-active .num-pill { border-color: #fff; color: #fff; }
.concept-body .pillars__nav-item.is-active .pillars__nav-label { color: #fff; font-weight: 700; }


/* ============ LOGO STORY（Figma 709-211） ============
   白カードの中央にシンボル＋Deal → 導入文 → 「シンボルにこめた想い」ラベル
   → 3カラム（アイコン／ティール見出し／本文）。本文のみ左揃え */
.logo-story {
  margin-top: clamp(40px, 5vw, 72px);
  background: #fff;
  border-radius: clamp(24px, 2.78vw, 40px);
  padding: clamp(40px, 5vw, 72px) var(--pad-card);
  text-align: center;
}
.logo-story__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo-story__brand-symbol { width: clamp(64px, 6.4vw, 92px); }
.logo-story__brand-name {
  margin-top: -4px;
  font-family: var(--font-en-serif);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 0.9;
  letter-spacing: -0.3px;
  color: var(--neutral-900);
}
.logo-story__intro {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 1.5px;
  color: var(--neutral-900);
}
.logo-story__label {
  margin-top: clamp(36px, 4.5vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-story__label img { width: 20px; }
.logo-story__label span {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
}
.logo-story__rows {
  margin-top: 16px;
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}
/* モチーフ各列はロゴカードと同じ虹色の囲み線を持つカードにする。
   実装も.logo-card（common.css）と同じ「透明ボーダー＋二層背景」方式：
   小さい要素をtransform:scaleで拡大する方式だと縁がぼやけるため、
   実サイズのボーダーで直接描く。--logo-angleのアニメは共通定義を再利用 */
.logo-story__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 28px);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff 0 0) padding-box,
    conic-gradient(from var(--logo-angle, 135deg),
      #fc6a6d, #ffa36a, #ffd169, #9ab55b, #00cca0, #00bd9f, #fc6a6d) border-box;
  border-radius: clamp(16px, 1.67vw, 24px);
  animation: logo-hue-rotate 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .logo-story__row { animation: none; }
}
/* アイコンは背景ボックスなしで素材をそのまま置く（3D素材・透過PNG）。
   高さを揃えて3カラムの見出しラインを揃える */
.logo-story__icon {
  height: clamp(48px, 4.5vw, 64px);
  display: grid;
  place-items: center;
}
.logo-story__icon img { width: clamp(48px, 4.5vw, 64px); }
/* 素材ごとの視覚的な重さを揃える微調整 */
.logo-story__icon--heart img { width: clamp(40px, 3.8vw, 54px); }
.logo-story__icon--puzzle img { width: clamp(38px, 3.6vw, 52px); }
.logo-story__tag {
  margin-top: 12px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #0e9c8a;
}
.logo-story__row p {
  margin-top: 10px;
  max-width: 320px;
  text-align: left;
  /* concept（4本柱）の姿勢カード本文（.work-item p）とサイズを揃える */
  font-size: clamp(11px, 0.97vw, 16px);
  line-height: 1.7;
  letter-spacing: 1.5px;
  color: var(--neutral-800);
}
@media (min-width: 768px) {
  .logo-story__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ============ HOW WE WORK：Dealの"人を想う" 4本柱 ============
   ティール面の中に「Dealの"人を想う"」小タイトル＋4柱メニュー（左）と
   白い箱（右）を置く。
   PC：.pillars-stage の高さ＝1画面＋(柱数-1)×60vh。.pillars-pin が sticky で
       1画面ぶん固定され、スクロール進捗に応じてJSが白箱の中身
       （.pillar-panel.is-current）を入れ替える。メニュークリックで該当位置へ。
   SP：ピンなし。白いカードを縦積みで全部表示し、メニューは横スクロールタブ */
.pillars-stage { position: relative; /* 高さはPC時にJSが設定 */ }
.pillars-pin { display: block; }
.pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pillars__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ブランドブロック（シンボル＋Deal＋"人を想う"とは）は廃止：
   ピンされたCONCEPTヘッダー「Dealの人を想うとは」がその役割を担う */
.pillars__nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pillars__nav::-webkit-scrollbar { display: none; }
/* SPではタブとして機能していない（押しても内容が切り替わらず、
   4パネルとも縦に並んで全部見えている）ので、飾りのピルが並ぶだけになる。
   PC（960px以上）は左のstickyメニューとして機能しているのでそちらは残す */
@media (max-width: 959.98px) {
  .pillars__nav { display: none; }
}
.pillars__nav-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.pillars__nav-item .num-pill {
  transition: border-color 0.25s ease, color 0.25s ease;
}
.pillars__nav-label {
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 1.5px;
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* 白い箱（中身のカード）。SPは縦積み、PCは1箱で中身が入れ替わる */
.pillars__box { display: flex; flex-direction: column; gap: 20px; }
.pillar-panel {
  background: #fff;
  border-radius: clamp(24px, 2.78vw, 40px);
  padding: clamp(28px, 3.9vw, 56px);
}
.pillar-panel__head { display: flex; align-items: center; gap: 14px; }
/* 番号はピル枠なしのYoung Serif（Figma 707-141） */
.pillar-panel__num {
  font-family: var(--font-en-serif);
  font-size: clamp(16px, 1.39vw, 20px);
  letter-spacing: 2px;
  color: #0e9c8a; /* brand/primary-dark（デザイントークン） */
}
.pillar-panel__label {
  font-size: var(--fs-jp-md);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
}
.pillar-panel__def {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 2px;
  color: var(--teal-900);
}
/* 区切り線＋「Dealの姿勢」ラベル（シンボル付き） */
.pillar-panel__stance {
  margin-top: clamp(16px, 2vw, 24px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid #dbebeb; /* line/border（デザイントークン） */
  display: flex;
  align-items: center;
  gap: 8px;
}
.pillar-panel__stance img { width: 33px; height: 26px; }
.pillar-panel__stance span {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: #0e9c8a;
}
.pillar-panel__items {
  margin-top: 12px;
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
}

@media (min-width: 960px) {
  /* ピンはコンテンツ高さのまま、sticky top をJSが (100vh−高さ)/2 に設定して
     画面中央で固定する。100vh＋中央寄せにしないのは、上半分の余白が
     直前のリード文との間の無駄な距離になるため */
  .pillars-pin {
    position: sticky;
    top: 0; /* JSが上書き */
  }
  .pillars { flex-direction: row; align-items: center; gap: 64px; width: 100%; }
  .pillars__side { width: 260px; flex-shrink: 0; gap: 24px; }
  .pillars__nav { flex-direction: column; overflow: visible; gap: 4px; padding-bottom: 0; }
  .pillars__nav-item { justify-content: flex-start; border: none; border-radius: 12px; padding: 14px 16px; }
  /* 白箱：1箱固定サイズで、パネルを重ねてフェード切替 */
  .pillars__box {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: clamp(440px, 62vh, 620px);
  }
  .pillar-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* 上揃え。中央寄せ（justify-content:center）だと中身の量で位置が変わり、
       01〜04を切り替えたときにタイトルが上下に動いてしまう
       （03「行動で示す」は work-item が1枚だけなので特にずれて見えた） */
    justify-content: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  .pillar-panel.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
  }
  .pillar-panel__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* 無料相談CTA（.about-cta）は削除。フッター直前の Contact＋SNS パネルに統合した */

/* ============ 4本柱の各パネル内：向き合い方アイテム（work-item） ============
   Figma 707-150：薄ミント（teal-50 #f4fafa）のカードにティール見出し＋本文 */
.work-item {
  background: #f4fafa;
  border-radius: 12px;
  padding: clamp(20px, 1.9vw, 24px);
}
.work-item h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.4;
  color: #0e9c8a;
}
.work-item p {
  margin-top: 10px;
  /* --fs-body-sm の上限18pxは姿勢カードでは大きすぎるため16pxに抑える */
  font-size: clamp(11px, 0.97vw, 16px);
  line-height: 1.7;
  letter-spacing: 1.5px;
  color: var(--neutral-800);
}

/* ============ FOUNDER MESSAGE ============ */
.founder {
  margin-top: clamp(40px, 5vw, 72px);
  background: #fff;
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: grid;
  /* SP（1カラム）でも minmax(0,1fr) が要る。省略すると暗黙カラムが auto ＝
     min-width:auto となり、word-break:auto-phrase が「ダミーテキスト…」の
     連続を1文節扱いして min-content が巨大化し、カードが911pxまで広がっていた。
     PC用の2カラム指定（下の@media）だけでは足りない */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 48px);
}
/* 写真枠（実写真の差し替え前提のプレースホルダー） */
.founder__photo {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) * 0.6);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(30, 217, 195, 0.28), transparent 60%),
    radial-gradient(110% 100% at 90% 90%, rgba(231, 204, 63, 0.25), transparent 55%),
    var(--neutral-50);
  display: grid;
  place-items: center;
}
.founder__photo img { width: 42%; opacity: 0.3; }
.founder__photo-note {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-inter);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--neutral-700);
}
.founder__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.founder__block h4 {
  font-size: var(--fs-ttl);
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.6;
  color: var(--teal-900);
}
.founder__block p {
  margin-top: 12px;
  font-size: var(--fs-body-sm);
  line-height: 2.1;
  letter-spacing: 1.5px;
  color: var(--neutral-800);
}
.founder__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.founder__sign-role {
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  color: var(--neutral-700);
}
.founder__sign-name {
  font-size: var(--fs-jp-md);
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--teal-900);
}
@media (min-width: 960px) {
  .founder {
    /* minmax(0,1fr) が要る。グリッド項目の既定 min-width:auto では、
       中身の min-content 幅までカラムが広がってしまう。
       word-break:auto-phrase は「ダミーテキストダミーテキスト…」のような
       文節の切れ目が無い連続文字列を1文節として扱うため min-content が巨大になり、
       右カラムが925pxまで膨らんでカード(1120px)からはみ出していた */
    grid-template-columns: 360px minmax(0, 1fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }
}

/* 関連ページリンク（.related / .related-row）は common.css に移動（company.htmlと共用） */