:root {
  --brand: #00a37a;
  --brand-soft: #93e5c2;
  --accent: #0a9156;
  --accent-2: #93e5c2;

  --bg: #fff;
  --panel: #f7f8fa;
  --fg: #111418;
  --muted: #535e6c;
  --line: #e6e9ef;
  --shadow-1: 0 2px 8px rgba(14, 16, 22, .06);
  --shadow-2: 0 14px 40px rgba(14, 16, 22, .10);
  --radius: 12px;
  --radius-sm: 8px;
  --content-w: 1280px;
  --fixed-w: 1280px;
  --hero-h: 100svh;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --reveal-dur: 900ms;
  --reveal-stagger: 500ms;

  --runner-len: 220px;
  --runner-dur: 4500ms;
  --runner-delay: 120ms;
  --runner-ease: cubic-bezier(.2, .8, .2, 1);
  --runner-blur: 1.5px;
  --hold-after-run: 1000ms;
  --erase-dur: 3500ms;
  --cycle-gap: 2000ms;
  --runner-start-ratio: 0;
  --z-margin: 40;
  --arc-stroke: clamp(90px, 16vw, 300px);
  --bp-md: 900px;
  --bp-sm: 600px;
}

.page-root {
  color: var(--fg);
  background: var(--bg);
  min-height: 100svh;
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.page-root .u-container {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 24px);
}

.page-root a {
  color: var(--accent);
  text-decoration: none;
}

.page-root a:hover {
  text-decoration: underline;
}

.page-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Section ---------- */
.page-root .section {
  padding: clamp(40px, 8vw, 96px) 0;
}

.page-root .section__head {
  margin: 0 0 28px;
}

.page-root .section__title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .02em;
}

.page-root .section__subtitle {
  color: var(--muted);
  font-weight: 600;
}

.page-root .hero.u-container {
  max-width: none;
  padding: 0;
}

.page-root .hero__grid {
  display: grid;
  overflow: hidden;
}

.page-root .hero__grid::before {
  content: none !important;
}

.page-root .hero__stage {
  width: 100%;
  min-height: var(--hero-h);
}

.kv {
  position: relative;
  min-height: 82svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px) 16px;
  color: var(--fg);
  isolation: isolate;
  overflow: hidden;
  --lb: 0vh;
}

.kv__inner {
  position: relative;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: transform;
}

.kv__inner.is-in {
  opacity: 1;
  transform: none;
}

.kv__copy {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .02em;
  font-size: clamp(24px, 7vw, 40px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  color: #000;
  will-change: transform;
}

.kv__line {
  display: inline-block;
  position: relative;
  clip-path: inset(100% 0 0 0);
  --shineX: -140%;
}

.kv__line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 0.22em;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform-origin: 10% 50%;
  transform: scaleX(var(--u, 0));
  opacity: .9;
  pointer-events: none;
}

.kv__line::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -15%;
  width: 38%;
  background: linear-gradient(75deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: skewX(-22deg) translateX(var(--shineX));
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
}

/* KV 背景（3枚スライダー） */
.kv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  --kv-1: url("../img/IMG_0254.JPG");
  --kv-2: var(--kv-1);
  --kv-3: var(--kv-1);
  --kv-o2: 0;
  --kv-o3: 0;
  background: var(--kv-1) center/cover no-repeat;
  animation: kvZoom 8s ease-out both;
  filter: saturate(.82) contrast(.92) brightness(1.10);
}

.kv__bg::before,
.kv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .6s var(--ease);
}

.kv__bg::before {
  background-image: var(--kv-2);
  opacity: var(--kv-o2);
}

.kv__bg::after {
  background-image: var(--kv-3);
  opacity: var(--kv-o3);
}

@keyframes kvZoom {
  from {
    transform: scale(1.02);
  }

  to {
    transform: scale(1);
  }
}

/* KV 黒帯 */
.kv::before,
.kv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--lb);
  background: #000;
  z-index: 5;
  pointer-events: none;
}

.kv::before {
  top: 0;
}

.kv::after {
  bottom: 0;
}

/* ランナー */
.kv__runners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.kv__runner {
  position: absolute;
  left: -20vw;
  top: var(--y, 50%);
  width: var(--len, 20vw);
  height: var(--thickness, 2px);
  transform: translateX(-40vw) rotate(var(--angle, 0deg));
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 70%, #fff 30%), transparent);
  filter: blur(var(--blur, 1.2px));
  will-change: transform, opacity;
  animation: kv-run var(--dur, 6s) var(--ease) var(--delay, 0s) infinite;
}

@keyframes kv-run {
  0% {
    transform: translateX(-40vw) rotate(var(--angle));
    opacity: 0;
  }

  8% {
    opacity: var(--alpha, .8);
  }

  92% {
    opacity: var(--alpha, .8);
  }

  100% {
    transform: translateX(140vw) rotate(var(--angle));
    opacity: 0;
  }
}

/* Arc (optional) */
.kv--arc {
  --accent: #e65421;
  --accent-2: #ff8a3d;
}

.kv__arc-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.kv__arc-layer.is-in {
  opacity: 1;
}

.kv__arc {
  width: 100%;
  height: 100%;
  display: block;
}

#kvArcStroke {
  stroke-width: var(--arc-stroke);
}

.kv__arc-layer.is-in #kvArcStroke {
  stroke-dasharray: var(--arc-L, 2000);
  stroke-dashoffset: var(--arc-L, 2000);
  animation: kvArcDraw 1.4s var(--ease) .1s both;
}

@keyframes kvArcDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.kv__arc-layer--loop.is-in #kvArcStroke {
  stroke-dasharray: var(--arc-L, 2000);
  stroke-dashoffset: var(--arc-L, 2000);
  animation: kvArcLoop 6s var(--ease) .1s infinite;
}

@keyframes kvArcLoop {
  0% {
    stroke-dasharray: var(--arc-L, 2000) var(--arc-L, 2000);
    stroke-dashoffset: var(--arc-L, 2000);
  }

  35% {
    stroke-dasharray: var(--arc-L, 2000) var(--arc-L, 2000);
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: var(--arc-L, 2000) var(--arc-L, 2000);
    stroke-dashoffset: 0;
  }

  95% {
    stroke-dasharray: 0 var(--arc-L, 2000);
    stroke-dashoffset: calc(-1 * var(--arc-L, 2000));
  }

  100% {
    stroke-dasharray: 0 var(--arc-L, 2000);
    stroke-dashoffset: calc(-1 * var(--arc-L, 2000));
  }
}

/* ---------- Cards & Lists ---------- */
.page-root .cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}

.page-root .card {
  grid-column: span 4;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: none;
  transition: transform .12s var(--ease);
  will-change: transform;
}

.page-root .card__title {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 10px;
  position: relative;
}

.page-root .card__meta {
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.page-root .card__body {
  margin-top: 12px;
}

/* Philosophy cards */
#philosophy {
  --content-w: 1280px;
  position: relative;
  --ph-lb: 0vh;
  --u-h2: 0;
  --shineX: -140%;
  background: #312b2a;
  color: #fff;
}

#philosophy .section__title,
#philosophy .section__subtitle,
#philosophy .card__title,
#philosophy .card__body,
#philosophy h3,
#philosophy p {
  color: #fff;
}

#philosophy .section__title {
  position: relative;
  padding-left: 30px;
  font-size: 4.5rem;
  line-height: 1.06;
  letter-spacing: .01em;
  text-shadow: 0 4px 18px rgba(10, 145, 86, .25);
  z-index: 21;  
}

#philosophy .section__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 0.26em;
  background: linear-gradient(90deg, transparent, var(--accent-2) 45%, transparent);
  transform-origin: 10% 50%;
  transform: scaleX(var(--u-h2));
  opacity: 1;
  pointer-events: none;
}

#philosophy .section__title::before {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -12%;
  width: 48%;
  transform: skewX(-22deg) translateX(var(--shineX));
  filter: blur(7px);
  mix-blend-mode: screen;
  pointer-events: none;
}

#philosophy .card__title {
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: .01em;
}

/* ========== ph-section base (shared) ========== */
#philosophy .ph-section,
#philosophy-add.ph-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: clamp(32px, 4vw, 56px);
  padding-block: clamp(72px, 12vw, 160px);
  display: grid;
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  grid-template-columns: minmax(280px, clamp(28vw, 36vw, 520px)) 1fr;
  --sx: 0;
  --sy: 0;
  --srot: 0deg;
  --sscale: 1;
}

#philosophy .ph-section__title,
#philosophy-add .ph-section__title {
  grid-column: 1;
  margin: 0;
  line-height: .95;
  letter-spacing: .005em;
  font-size: clamp(48px, 11vw, 120px);
  position: relative;
  z-index: 30;
}

#philosophy .ph-section__title::before,
#philosophy-add .ph-section__title::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: -12px;
  bottom: -12px;
  width: clamp(3px, .6vw, 6px);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  opacity: .9;
}

#philosophy .ph-section__title::after,
#philosophy-add .ph-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 0.22em;
  background: linear-gradient(90deg, transparent, var(--accent-2) 45%, transparent);
  transform-origin: 10% 50%;
  transform: scaleX(var(--u-add, 0));
  opacity: .95;
  pointer-events: none;
}

#philosophy .ph-section__body,
#philosophy-add .ph-section__body {
  grid-column: 2;
  max-width: 72ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  position: relative;
  z-index: 2;
  color: inherit;
}

/* ========== philosophy-add（背景波・色） ========== */
#philosophy-add.ph-section {
  margin-top: 0;
  background: #eaebef;
  grid-template-columns: minmax(220px, clamp(28vw, 36vw, 520px)) 1fr;
  align-items: start;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 48px);
}

#philosophy-add::before,
#philosophy-add::after {
  content: none;
}

#philosophy-add .ph-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#philosophy-add .ph-wave {
  position: absolute;
  inset: 0% 10% 0% 0%;
  width: 100%;
  height: auto;
  display: block;
  opacity: .9;
  color: var(--ph-add-wave, #E9450A);
  --wave-w: clamp(120px, 6.5vw, 240px);
  z-index: 1;
}

/* 可視レイヤーは塗りのみ、刷毛はマスク内で白 */
#philosophy-add .ph-wave #fill-reveal--ph {
  stroke: none !important;
}

#philosophy-add .ph-wave mask use {
  stroke: white;
}

/* ---------- Timeline / Footer / Reveal ---------- */
.page-root .timeline {
  position: relative;
  margin-top: 10px;
  padding-left: 22px;
  border-left: 2px dashed color-mix(in oklab, var(--fg), transparent 70%);
}

.page-root .timeline__item {
  margin: 14px 0;
  position: relative;
}

.page-root .timeline__item::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}

.page-root .site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 64px;
  color: var(--muted);
}

.page-root .reveal>* {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}

.page-root .reveal.is-inview>* {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--io-index, 0) * var(--reveal-stagger));
}

/* ---------- Scroll Progress ---------- */
.scrollbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 999;
  background: transparent;
}

.scrollbar__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--scrollProgress, 0));
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .page-root * {
    animation: none !important;
    transition: none !important;
  }

  .kv__inner,
  .kv__copy .kv__line,
  .kv__bg {
    opacity: 1 !important;
    transform: none !important;
  }

  .kv__runner {
    animation: none !important;
    opacity: 1 !important;
  }

  .kv__arc-layer--loop.is-in #kvArcStroke,
  .kv__arc-layer.is-in #kvArcStroke {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- ≤ 900px：レイアウト集約 ---------- */
@media (max-width: 900px) {
  .page-root .cards {
    grid-template-columns: 1fr;
  }

  #philosophy .card--split {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "title" "body";
  }

  #philosophy .ph-section,
  #philosophy-add.ph-section {
    grid-template-columns: 1fr;
    padding-block: clamp(64px, 12vw, 120px);
  }

  #philosophy .ph-section__body,
  #philosophy-add .ph-section__body {
    grid-column: 1;
    max-width: none;
    font-size: clamp(15px, 4vw, 18px);
  }
}

/* ---------- ≤ 600px：モバイル最適化（集約） ---------- */
@media (max-width: 600px) {

  /* 背景の波：モバイル位置/サイズ */
  #philosophy-add .ph-wave {
    inset: -8% -10% -14% -10%;
    width: 130%;
    --wave-w: clamp(56px, 8vw, 144px);
    opacity: .6;
  }

  /* 中央配置 */
  .mobile-center {
    min-height: 100dvh;
    /* fallback を入れるなら次行に 100vh を追加 */
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    position: relative;
    z-index: 3;
  }

  .mobile-center>p {
    margin: 0;
    max-width: 28rem;
    text-wrap: balance;
  }

  /* 段落の折返し */
  #philosophy-add p {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    max-width: 100%;
  }
}

/* #philosophy を前面に ---- */
#philosophy {
  /* ← ここが肝 */
  top: 0;
  /* ビューポート上端で張り付く */
  min-height: 100vh;
  /* 画面いっぱいを覆えるように */
  z-index: 10;
  /* 直前セクションの装飾より前面に */
  isolation: isolate;
  /* セクション内のレイヤーを閉じ込める（保険） */
}



/* スマホ～タブレット*/
@media (max-width: 900px) {

  /* セクション全体 */
  #philosophy {
    display: grid;
    justify-items: start;
    /* ← center を上書き */
    text-align: left;
    /* ← center を上書き */
    padding-inline: clamp(16px, 5vw, 24px);
  }

  /* 見出し：左の余白と飾りを無効化して中央に */
  #philosophy .section__title {
    padding-left: 0;
    margin: 0 auto;
    font-size: clamp(34px, 10vw, 56px);
  }

  #philosophy .section__title::before {
    content: none;
  }

  /* カードのグリッドそのものを中央寄せ（親の指定は継承されない） */
  #philosophy .cards {
    grid-template-columns: 1fr !important;
    justify-items: center;
    /* ★これが効きます */
    width: 100%;
  }

  /* 各カード内のテキストも中央に */
  #philosophy .card {
    width: min(100%, 720px);
    text-align: center;
    margin-inline: auto;
  }

  #philosophy .card__title {
    margin: 0 auto 10px;
  }

  #philosophy .card__body {
    text-align: center;
  }

  #philosophy .card__body p {
    margin: .6em auto;
    max-width: 40ch;
    font-size: clamp(16px, 4.2vw, 20px);
    overflow-wrap: anywhere;
  }

  /* 画像の見切れ防止 */
  #philosophy .card__media {
    margin: 0 0 12px;
  }

  #philosophy .card--split .card__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
  }
}

/* ===== 不具合：@media の入れ子を解消（単独で記述） ===== */
@media (max-width:600px) {
  #philosophy-add .ph-wave {
    --wave-w: clamp(240px, 14vw, 420px);
  }
}


/* 1) カーテン本体：#philosophy を張り付け＆画面を覆う */
#philosophy {
  top: 0;
  /* 固定ヘッダーがあるなら px 値に変更（例: 64px） */
  min-height: 100vh;
  /* これが無いと“覆う”見た目になりません */
  z-index: 10;
  /* 前セクションの装飾より前面に */
  isolation: isolate;
  /* セクション内のレイヤーを独立 */
}

/* 前セクションのレイヤーが前面に出てスクロールを奪わないように */
#philosophy-add .ph-section__bg,
#philosophy-add .ph-wave {
  z-index: 0;
  pointer-events: none;
}


/* ===== Patch 2025-10-23e: Typewriter styles ===== */
#philosophy .typewriter {
  position: relative;
  display: inline-block;
}

#philosophy .typewriter__caret {
  display: inline-block;
  width: 0.08em;
  height: 1em;
  background: currentColor;
  vertical-align: -.1em;
  margin-left: .06em;
  animation: caretBlink 1s steps(1) infinite;
}

#philosophy .typewriter__caret.is-off {
  animation: none;
  opacity: 0;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #philosophy .typewriter__caret {
    animation: none;
  }
}



/* ===== Patch 2025-10-23f: Section title background white ===== */
#philosophy .section__title,
#philosophy .section_title {
  background: rgba(0, 0, 0, 0);
  color: var(--fg);
  display: inline-block;
  padding: .25em .7em;
  border-radius: 8px;
  text-shadow: none;
  position: relative;
  z-index: 2;
}

/* Optional: disable decorative pseudo elements over white label */
#philosophy .section__title::before,
#philosophy .section__title::after {
  display: none !important;
}

/* Fallback for any usage of single-underscore class across other sections */
.section_title {
  background: #fff;
  color: var(--fg);
  display: inline-block;
  padding: .25em .7em;
  border-radius: 8px;
}

#philosophy { position: relative; }
#philosophy .card.card--split { position: relative; }
#philosophy .ph-bg { position:absolute; inset:0; pointer-events:none; z-index:1; } /* 背景層 */
#philosophy .card.card--split .card__media { position:relative; z-index:3; }      /* 画像が最前面 */
#philosophy .card.card--split .card__title,
#philosophy .card.card--split .card__body  { position:relative; z-index:2; }      /* テキストが次 */
@media (prefers-reduced-motion: reduce){ #philosophy .ph-bg { animation:none !important; } }


#philosophy .ph-bg--corners{ isolation:isolate; }
#philosophy .ph-bg--corners i{
  position:absolute; width:36vmin; height:36vmin;
  border-radius: 36% 64% 58% 42% / 38% 41% 59% 62%;
  background: var(--fill,#f7f9f8);
  mix-blend-mode: multiply; opacity:.18; filter: blur(.3px);
}
#philosophy .ph-bg--corners i.--tl{ left:-8%; top:-8%;  --fill: color-mix(in srgb, var(--brand) 12%, rgb(55, 6, 233)); }
#philosophy .ph-bg--corners i.--tr{ right:-10%; top:-6%; --fill: color-mix(in srgb, #E9450A 10%, rgb(238, 6, 141)); }
#philosophy .ph-bg--corners i.--bl{ left:-12%; bottom:-10%; --fill: color-mix(in srgb, var(--brand) 8%, rgb(233, 4, 4)); }
#philosophy .ph-bg--corners i.--br{ right:-8%; bottom:-12%; --fill: color-mix(in srgb, #E9450A 8%, rgb(2, 250, 105)); }
/* 静止でOK。動きを足すなら下記を有効化
@keyframes phBlobDrift{from{transform:translateY(-1%)}to{transform:translateY(1%)}}
#philosophy .ph-bg--corners i{ animation: phBlobDrift 26s ease-in-out infinite alternate; }
*/



/* === WORLD SHIFT: Page-wide mode when #philosophy is active ==================
   Goal: 「経営理念」に入ると“別世界”へ。抜けると元の世界に戻る。
   Implementation: body.is-world を ON/OFF（JSが制御）。非破壊・付加的。
============================================================================= */
:root{
  --ws-bg:#0b0f13;          /* world 背景 */
  --ws-ink:#e8f1f6;         /* world 文字色 */
  --ws-brand: var(--brand, #00ffbf);
  --ws-accent:#ff9100;
  --ws-grid:#0f2a3a;
  --ws-vignette: rgba(0,0,0,.55);
  --ws-speed: 26s;
  --ws-blur: 1.6px;
  --ws-dim: .14;
  --ws-scale: 1.012;
}
/* ステージ（全画面オーバーレイ） */
.ws-stage{ position:fixed; inset:0; pointer-events:none; z-index:60; opacity:0; transform:translateZ(0); }
.ws-stage__bg{ position:absolute; inset:-5%; background: var(--ws-bg); }
.ws-stage__grid, .ws-stage__stars, .ws-stage__flare, .ws-stage__bars{
  position:absolute; inset:-5%;
}
/* 星屑（粗いノイズ＋パーティクル風） */
.ws-stage__stars{
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.65) 0 2px, transparent 3px) repeat,
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.5) 0 1px, transparent 2px) repeat,
    radial-gradient(1.2px 1.2px at 30% 60%, rgba(255,255,255,.4) 0 1px, transparent 2px) repeat;
  background-size: 220px 220px, 260px 260px, 200px 200px;
  animation: ws-drift var(--ws-speed) linear infinite;
  opacity:.35; mix-blend-mode:screen; filter: blur(.2px);
}
/* グリッド（世界の構造） */
.ws-stage__grid{
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, var(--ws-grid) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--ws-grid) 29px 30px);
  transform: perspective(900px) rotateX(52deg) translateY(22vh) scale(1.2);
  transform-origin: 50% 100%;
  opacity:.35; filter: blur(.4px) saturate(1.2);
}
/* フレア/ビネット（中央を明るく、外周を暗く） */
.ws-stage__flare{
  background:
    radial-gradient(ellipse 40% 32% at 50% 42%, color-mix(in srgb, var(--ws-brand) 22%, rgba(255,255,255,.0)) 0%,
      rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 58% 46% at 50% 50%, rgba(0,0,0,0) 0 60%, var(--ws-vignette) 85%, rgba(0,0,0,.75) 100%);
  mix-blend-mode: screen;
  opacity:.85;
}
/* シネマレターボックス（上下バー） */
.ws-stage__bars::before, .ws-stage__bars::after{
  content:""; position:absolute; left:0; right:0; height:6vmin; background:rgba(0,0,0,.8);
}
.ws-stage__bars::before{ top:0 } .ws-stage__bars::after{ bottom:0 }

@keyframes ws-drift{
  0%{ transform: translate3d(0,0,0) }
  100%{ transform: translate3d(-8%, -6%, 0) }
}

/* ===== World ON: body.is-world で全体をスキンチェンジ ======================= */
body.is-world{
  color: var(--ws-ink);
  background: #000;
}
body.is-world .section:not(#philosophy){
  opacity: var(--ws-dim);
  filter: blur(var(--ws-blur)) saturate(.7) contrast(.92) grayscale(.08);
  transition: opacity .35s ease, filter .35s ease;
  pointer-events:none;
}
body.is-world #philosophy{
  position:relative; isolation:isolate; z-index:65;
  transform: translateZ(0) scale(var(--ws-scale));
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
}

/* ヘッダーやフッターは視界の邪魔にならないように半透明化 */
/* body.is-world header, body.is-world .site-header, body.is-world nav,
body.is-world footer, body.is-world .site-footer{
  opacity:.25; filter: blur(.5px);
  transition: opacity .35s ease, filter .35s ease;
} */

/* ワールド化したらフォントを少し変える（変え過ぎない） */
:root{ --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Ubuntu, Arial, "Noto Sans JP", sans-serif; }
:root{ --font-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif; }
body.is-world #philosophy{ font-family: var(--font-serif); }
body.is-world .section:not(#philosophy){ font-family: var(--font-sans); }

/* ステージの出し入れ */
body.is-world .ws-stage{ opacity:1; transition: opacity .45s ease; }
body:not(.is-world) .ws-stage{ opacity:0; transition: opacity .45s ease; }

/* Reduced Motion: 動きを抑制してコントラストだけで世界観を表現 */
@media (prefers-reduced-motion: reduce){
  .ws-stage__stars{ animation:none }
  .ws-stage__grid{ transform: translateY(18vh) scale(1.15); }
  body.is-world .section:not(#philosophy){ filter: none; opacity:.3 }
}
/* ========================================================================= */



/* === WORLD SHIFT: Section Background Variants for #philosophy ===============
   Usage:
     - Default: 'nebula'  … data-ws-theme omitted or 'nebula'
     - Other presets: 'waves' | 'grid' | 'paper'
     - Optional custom image: set CSS var --ws-ph-bg-url: url(...)
   Notes:
     - Active only while body.is-world
============================================================================= */
body.is-world #philosophy{
  position: relative;
  isolation: isolate;
  z-index: 65;
  /* parallax offsets set by JS */
  --ws-ph-px: 0px;
  --ws-ph-py: 0px;
  --ws-ph-scale: 1.03;
}
body.is-world #philosophy::before{
  content:"";
  position:absolute; inset:-8px; border-radius: inherit;
  z-index: -1;
  transform: translate3d(var(--ws-ph-px), var(--ws-ph-py), 0) scale(var(--ws-ph-scale));
  transition: transform .12s ease-out;
  will-change: transform;
  /* default mix */
  background-blend-mode: screen, overlay, normal;
  opacity: 1;
  pointer-events: none;
  /* optional vignette fade to edges */
  -webkit-mask-image: radial-gradient(140% 100% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(140% 100% at 50% 50%, #000 60%, transparent 100%);
}

/* ===== Default / Nebula ==================================================== */
body.is-world #philosophy:not([data-ws-theme]),
body.is-world #philosophy[data-ws-theme="nebula"]{ --ws-ph-scale: 1.035; }
body.is-world #philosophy:not([data-ws-theme])::before,
body.is-world #philosophy[data-ws-theme="nebula"]::before{
  background:
    radial-gradient(60% 45% at 20% 30%, color-mix(in srgb, var(--ws-accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(55% 42% at 82% 70%, color-mix(in srgb, var(--ws-brand) 30%, transparent) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 60%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  filter: saturate(1.12) contrast(1.03);
  animation: ws-bg-pan var(--ws-speed, 24s) linear infinite;
}

/* ===== Waves =============================================================== */
body.is-world #philosophy[data-ws-theme="waves"]{ --ws-ph-scale: 1.028; }
body.is-world #philosophy[data-ws-theme="waves"]::before{
  background:
    repeating-linear-gradient( to right,
      color-mix(in srgb, var(--ws-accent) 10%, transparent) 0 12px,
      transparent 12px 24px ),
    conic-gradient(from -90deg at 50% 50%,
      rgba(255,255,255,.08), rgba(255,255,255,0) 30%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 90%, rgba(255,255,255,.08));
  filter: blur(.2px) saturate(1.05);
  animation: ws-waves 14s ease-in-out infinite alternate;
}
@keyframes ws-waves{
  0%{ background-position: 0 0, 0 0 }
  100%{ background-position: 160px 0, 0 0 }
}

/* ===== Grid (in-section) =================================================== */
body.is-world #philosophy[data-ws-theme="grid"]{ --ws-ph-scale: 1.02; }
body.is-world #philosophy[data-ws-theme="grid"]::before{
  background:
    repeating-linear-gradient(0deg,  transparent 0 29px, color-mix(in srgb, var(--ws-grid,#0f2a3a) 100%, transparent) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, color-mix(in srgb, var(--ws-grid,#0f2a3a) 100%, transparent) 29px 30px),
    radial-gradient(120% 90% at 50% 60%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  opacity:.45;
  transform: perspective(900px) rotateX(32deg) translate3d(var(--ws-ph-px), calc(var(--ws-ph-py) + 14px), 0) scale(1.18);
  filter: blur(.4px) saturate(1.15);
}

/* ===== Paper (warm & tactile) ============================================= */
body.is-world #philosophy[data-ws-theme="paper"]{ --ws-ph-scale: 1.02; }
body.is-world #philosophy[data-ws-theme="paper"]::before{
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,255,255,.7), rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 100%),
    repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,.02) 0 2px, rgba(0,0,0,.0) 2px 4px),
    repeating-linear-gradient( 135deg, rgba(0,0,0,.02) 0 3px, rgba(0,0,0,0) 3px 8px ),
    color-mix(in srgb, var(--ws-bg) 60%, #ffffff 40%);
  filter: contrast(1.02) saturate(1.02);
  animation: ws-paper 22s ease-in-out infinite alternate;
}
@keyframes ws-paper{
  0%{ background-position: 0 0, 0 0, 0 0 }
  100%{ background-position: -40px -30px, 10px 20px, -20px 15px }
}

/* ===== Custom Image (optional) ============================================ */
body.is-world #philosophy[data-ws-image="true"]::before{
  background:
    radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.15), rgba(0,0,0,0) 60%),
    var(--ws-ph-bg-url);
  background-size: cover, cover;
  background-position: center, center;
  filter: saturate(1.05) contrast(1.02);
  animation: ws-bg-pan 30s linear infinite;
}

/* subtle pan for default/nebula/custom */
@keyframes ws-bg-pan{
  from{ background-position: 0 0, 0 0, 0 0 }
  to{   background-position: -60px -40px, 20px 0, 0 0 }
}
/* ========================================================================= */




/* === WORLD SHIFT: Guard — hide #philosophy outside of world mode ============
   要件: ワールド外（body:not(.is-world)）では経営理念セクションを見えなくする。
   実装: visibility + opacity + pointer-events。レイアウト高さは維持（scroll trigger維持）。
============================================================================= */
body:not(.is-world) #philosophy{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.is-world #philosophy{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .35s ease;
}
/* ========================================================================= */


/* === FIX: 経営理念(.ph-section)の横ズレ対策 ============================= */
/* デフォルトは本文をフル幅（1列）。タイトルがある時だけ2列にする。 */

#philosophy .ph-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: clamp(32px, 4vw, 56px);
  padding-block: clamp(72px, 12vw, 160px);
  display: grid;
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  /* 2列レイアウトの定義は残すが、本文のデフォルトは1列化で吸収する */
  grid-template-columns: minmax(280px, clamp(28vw, 36vw, 520px)) 1fr;
}

/* 本文は基本 1 / -1（＝全列）にして中央へ */
#philosophy .ph-section__body{
  grid-column: 1 / -1;
  width: min(72ch, 92vw);
  margin-inline: auto;
  max-width: 72ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  position: relative;
  z-index: 2;
  color: inherit;
}

/* タイトルが存在する場合のみ本文を右カラムへ（:has は主要ブラウザ対応） */
#philosophy .ph-section:has(.ph-section__title) .ph-section__body{
  grid-column: 2;
}

/* タイトルの見た目は従来どおり */
#philosophy .ph-section__title{
  grid-column: 1;
  margin: 0;
  line-height: .95;
  letter-spacing: .005em;
  font-size: clamp(48px, 11vw, 120px);
  position: relative;
  z-index: 30;
}

/* ≤900px は1カラムに集約（既存ルールを簡素化） */
@media (max-width: 900px){
  #philosophy .ph-section{
    grid-template-columns: 1fr;
    padding-block: clamp(64px, 12vw, 120px);
  }
  #philosophy .ph-section__body,
  #philosophy .ph-section__title{ grid-column: 1; max-width: none; }
}

/* 1) 見切れの元を止める（clip → visible に統一） */
#philosophy .ph-curtain { overflow: visible; }

/* 2) カードラッパを中央に固定。横に広がらないようにする */
#philosophy .cards{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;              /* モバイル〜タブレットは1列確定 */
  box-sizing: border-box;
  max-width: min(var(--content-w, 1280px), 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 24px);
  justify-content: center;                  /* トラック自体を中央に */
}

/* 3) “World Shift”中はスケール補正をかけて、視覚幅が必ず画面内に収まる */
body.is-world #philosophy .section__head,
body.is-world #philosophy .cards{
  max-width: min(var(--content-w, 1280px), calc(100vw / var(--ws-scale)));
}

/* 4) カード本体は全幅扱い＋中身が横に張らないようにする */
#philosophy .card{
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;                  /* 余計な左右マージン無効化 */
  min-width: 0;               /* コンテンツで横に膨らむのを抑止 */
}
#philosophy .card * { min-width: 0; }       /* 画像・見出しも同様に安全側 */

#philosophy .card__body{
  width: 100%;
  max-width: 72ch;
  margin-inline: auto;
  box-sizing: border-box; /* ベースで入ってても明示でOK */
}


/* 5) ≤900px は強制的に1列＋中央寄せ */
@media (max-width: 900px){
  #philosophy .cards{ grid-template-columns: 1fr !important; }
  #philosophy .card { grid-column: 1 / -1 !important; }
}