/* =============================================================================
   culture.css — Culture（#culture）と People（#people）
   カルチャーステートメント、ポートレートを背にした引用文、展開するフォトギャラリー、
   そしてシーンを締めくくる People のメッセージ。スクロール進行度（--culture-next,
   --quote-rise, --culture-dock, --panel-entry …）は js/motion.js が供給する。
   ============================================================================= */

.growth-culture {
  padding: 114px 0 80px;
}

.culture-lead {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 7%;
  align-items: start;
  margin-bottom: 75px;
}

.culture-lead h2 {
  line-height: 1.7;
  letter-spacing: -.03em;
  color: var(--accent);
}

.culture-quote {
  line-height: 2.1;
}

.culture-quote > span {
  display: block;
}

.culture-quote > span + span {
  margin-top: 18px;
}

.culture-quote-conclusion {
  display: block;
  color: var(--accent);
  margin-top: 10px;
}

.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 9%;
  padding-inline: 3%;
}

.culture-card-media {
  position: relative;
  aspect-ratio: 1.55;
  overflow: hidden;
  border-radius: 12px 12px 70px 12px;
  background: #e4edf4;
  margin-bottom: 28px;
  translate: none;
}

.culture-card:nth-child(even) .culture-card-media {
  border-radius: 70px 12px 12px 12px;
}

.culture-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.culture-card h3 {
  line-height: 1.7;
  color: var(--accent);
  letter-spacing: -.03em;
  margin-bottom: 14px;
}

.culture-card h4 {
  margin-bottom: 14px;
}

.culture-card p {
  color: var(--text-muted);
  line-height: 2;
}

.people {
  padding: 40px 0 100px;
  background: linear-gradient(#fff,#f0f8ff);
  overflow: hidden;
}

.people-caption {
  text-align: center;
  line-height: 1.95;
  color: var(--accent);
  margin: 0 var(--gutter) 44px;
}

.people-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px 0;
}

@media (max-width:1100px) {
  .culture-lead {
    gap: 5%;
  }

  .culture-grid {
    column-gap: 6%;
  }
}

@media (max-width:900px) {
  .culture-lead {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .culture-quote {
    max-width: 600px;
  }
}

@media (max-width:760px) {
  .growth-culture {
    padding: 64px 0 40px;
  }

  .culture-lead {
    gap: 24px;
  }

  .culture-lead h2 {
    line-height: 1.7;
  }

  .culture-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0;
  }

  .culture-card:nth-child(even),
  .culture-card:nth-child(3) {
    margin-top: 0;
  }

  .culture-card-media {
    margin-bottom: 20px;
  }

  .culture-card h3 {
    line-height: 1.6;
  }

  .culture-card p {
    line-height: 2;
  }

  .people {
    padding: 28px 0 64px;
  }

  .people-caption {
    letter-spacing: -.025em;
  }

  .people-actions {
    flex-direction: column;
    align-items: center;
    padding-top: 34px;
    gap: 12px;
  }

  .people-actions > .btn {
    width: 280px;
  }
}

.culture-card-media,
.culture-card:nth-child(2n) .culture-card-media,
.people-set figure,
.people-set figure:nth-child(2n) {
  border-radius: var(--photo-radius);
  overflow: hidden;
}

.culture-highlight {
  color: var(--c-orange);
  position: relative;
  background-position: 0 100%;
}

#culture .culture-lead h2 {
  width: 100vw;
  max-width: none;
  margin: 0 0 56px calc(50% - 50vw);
  padding: 68px var(--gutter) 76px;
  background: #0d246f;
  color: #bfe9ff;
  text-align: center;
  line-height: 1.55;
  letter-spacing: .04em;
}

#culture .culture-lead-intro {
  display: block;
  margin-bottom: .08em;
  color: inherit;
}

#culture .culture-lead h2 > br {
  display: none;
}

@media (max-width:760px) {
  #culture .culture-lead h2 {
    padding: 46px 6vw 52px;
    letter-spacing: .02em;
  }

  #culture .culture-lead-intro {
    margin-bottom: 14px;
  }

  #culture .culture-stage > div {
    padding-inline: 7vw;
  }
}

@media (min-height:641px) {
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div.is-current {
    pointer-events: auto;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage [data-motion] {
    --enter: 1 !important;
  }

  #culture .culture-statement-line {
    display: block;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: transparent;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > h2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 90px 5vw 60px;
    opacity: calc(1 - var(--culture-exit,0));
    transform: translateY(calc(var(--culture-exit,0) * -28px));
    clip-path: none;
    background: linear-gradient(180deg,#0a1030,#13295e 15%,var(--c-blue) 34%,var(--c-blue-mid) 64%,var(--c-cyan));
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-grid {
    opacity: var(--culture-photo-enter,0);
    transform: translateY(calc((1 - var(--culture-photo-enter,0)) * 60px));
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
    position: absolute;
    max-width: none;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
    pointer-events: none;
    inset: auto;
    top: calc(38% - var(--culture-dock,0) * 26%);
    left: 5vw;
    width: 90vw;
    height: auto;
    padding: 0 !important;
    display: block;
    transform: scale(calc(1 - var(--culture-dock,0) * .6));
    transform-origin: top left;
    opacity: var(--culture-next,0);
    z-index: 6;
    text-align: center;
  }

  #culture .culture-stage > div.is-docked {
    text-align: left !important;
  }

  #culture .culture-gallery-scene {
    position: absolute;
    inset: 32% 3.6vw 3%;
    height: auto;
    margin: 0;
    z-index: 4;
  }

  #culture .culture-gallery-pin {
    position: relative;
    top: auto;
    height: 100%;
    padding: 0;
  }
}

#culture .culture-stage {
  isolation: isolate;
  background: linear-gradient(180deg,#0a1030,#13295e 15%,var(--c-blue) 34%,var(--c-blue-mid) 64%,var(--c-cyan));
}

#culture .culture-stage > div {
  max-width: 980px;
  margin: 0 auto 64px;
  background: transparent !important;
  color: #fff;
}

#culture .culture-stage .culture-quote-conclusion,
#culture .culture-stage .culture-cta {
  color: #fff;
  border-color: #ffffff90;
}

@media (min-width:761px) {
  .culture-grid {
    padding-inline: 0;
  }

  /* デスクトップではカルチャーの各メッセージを 1 行に収める。 */
  #culture .culture-stage > div {
    padding-inline: 5vw;
  }

  #culture .culture-quote {
    width: 100%;
    line-height: 1.9;
  }

  #culture .culture-quote > span {
    white-space: nowrap;
  }

  #culture .culture-quote-conclusion {
    white-space: nowrap;
  }
}

/* カルチャーステートメント：ページフィールドいっぱいの全幅で見せる。 */
#culture .culture-lead {
  display: block;
  margin-bottom: 0;
}

#culture .culture-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 2.5vw;
  padding: 24px 0 0;
  position: relative;
  z-index: 3;
}

#culture .culture-card:nth-child(n) {
  margin-top: 0;
}

#culture .culture-card-media {
  aspect-ratio: 4/5;
  border-radius: 16px;
  background: #1a4ead;
}

#culture .culture-card-media:after {
  content: '';
  position: absolute;
  inset: 0;
  background: #245cc0;
  pointer-events: none;
  opacity: .7;
  transition: opacity .6s;
}

#culture .culture-card-media img {
  filter: grayscale(1);
  transition: filter .6s,transform .8s, scale .6s var(--motion-ease);
  animation: none;
  opacity: 0;
}

#culture .culture-card-media img:first-child {
  opacity: 1;
}

#culture .culture-card h3 {
  color: #fff;
  line-height: 1.65;
}

#culture .culture-card p {
  color: #e0efff;
  line-height: 2;
}

@media (max-width:900px) {
  #culture .culture-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px 22px;
  }
}

@media (max-width:600px) {
  #culture .culture-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* フォトストーリーは青いセクションを新たに開かず、暖色のシーンの中に留める。 */
#culture {
  width: 100%;
  padding-inline: var(--gutter);
  padding-bottom: 6vw;
  position: relative;
  isolation: isolate;
  background: linear-gradient(115deg,#ee741e 0%,#ed8945 42%,#258bd0 78%,var(--c-cyan) 100%);
}

#culture .culture-card h4 {
  color: #fff;
}

/* ギャラリー：4 枚のパネルのうち常に 1 枚だけが展開する（ホバー・フォーカス・スクロール位置の
   いずれかで。js/motion.js 参照）。ページが先へ進む前に、スクロールで 4 枚すべてを巡る。 */
.culture-gallery-scene {
  position: relative;
  height: 340svh;
  margin-top: -65svh;
  z-index: 4;
}

.culture-gallery-pin {
  position: sticky;
  top: 78px;
  padding-top: 12px;
  height: calc(100svh - 90px);
}

#culture .culture-gallery-scene .culture-grid {
  display: flex;
  gap: 16px;
  height: calc(100% - 100px);
  padding: 0;
  opacity: 1 !important;
  transform: none !important;
}

#culture .culture-gallery-scene .culture-card {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  transition: flex .65s cubic-bezier(.22,1,.36,1);
  padding: 0;
  opacity: 1;
  transform: none;
}

#culture .culture-gallery-scene .culture-card.is-expanded {
  flex: 6;
}

#culture .culture-gallery-scene .culture-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  clip-path: none;
}

#culture .culture-gallery-scene .culture-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#culture .culture-gallery-scene .culture-card:after {
  content: '';
  position: absolute;
  inset: 25% 0 0;
  background: linear-gradient(transparent,#09244ccc);
  pointer-events: none;
}

#culture .culture-gallery-scene .culture-card h3 {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 170px;
  white-space: nowrap;
  margin: 0;
  opacity: 0;
  clip-path: none;
  transform: translateY(12px);
  transition: opacity .35s,transform .5s;
}

#culture .culture-gallery-scene .culture-card h4,
#culture .culture-gallery-scene .culture-card p {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  margin: 0;
  opacity: 0;
  clip-path: none;
  transform: none;
  transition: opacity .35s;
  color: #fff;
}

#culture .culture-gallery-scene .culture-card h4 {
  bottom: 135px;
}

#culture .culture-gallery-scene .culture-card p {
  bottom: 28px;
  line-height: 1.8;
}

#culture .culture-gallery-scene .culture-card.is-expanded :is(h3,h4,p) {
  opacity: 1;
  transform: none;
}

#culture .culture-gallery-scene .culture-card:focus-visible {
  outline: 3px solid white;
  outline-offset: -4px;
}

@media (max-width:760px) {
  .culture-gallery-pin {
    top: 68px;
    height: calc(100svh - 80px);
  }

  #culture .culture-gallery-scene .culture-grid {
    gap: 7px;
  }

  #culture .culture-gallery-scene .culture-card.is-expanded {
    flex: 12;
  }

  #culture .culture-gallery-scene .culture-card :is(h3,h4,p) {
    left: 15px;
    right: 15px;
  }

  #culture .culture-gallery-scene .culture-card h3 {
    bottom: 220px;
  }

  #culture .culture-gallery-scene .culture-card h4 {
    bottom: 180px;
  }

  #culture .culture-gallery-scene .culture-card p {
    bottom: 20px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .culture-gallery-scene {
    height: auto;
    margin-top: 0;
  }

  .culture-gallery-pin {
    position: relative;
    top: auto;
    height: auto;
  }

  #culture .culture-gallery-scene .culture-grid {
    display: grid;
    height: auto;
  }

  #culture .culture-gallery-scene .culture-card {
    min-height: 540px;
  }
}

.culture-panel-label {
  position: absolute;
  z-index: 3;
  bottom: 26px;
  left: 50%;
  writing-mode: vertical-rl;
  color: white;
  letter-spacing: .1em;
  transform: translateX(-50%);
  transition: opacity .25s;
}

.is-expanded .culture-panel-label {
  opacity: 0;
}

@media (min-height:641px) {
  #culture .culture-gallery-scene .culture-grid {
    height: 100%;
  }

  #culture .culture-gallery-scene .culture-card {
    opacity: var(--panel-entry,0);
    transform: translateX(calc((1 - var(--panel-entry,0)) * -90px)) rotate(calc((1 - var(--panel-entry,0)) * -5deg));
    transform-origin: bottom left;
    transition: flex .65s cubic-bezier(.22,1,.36,1);
    clip-path: none;
  }

      /* ひと続きのステージ：ステートメントが中央に留まり、引用文に置き換わり、その引用文が
   左上にドッキングしてギャラリーのタイトルになる。3 行がやわらかく順に現れ、そのあと
   読むための静止時間を置く。 */
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-lead {
    position: relative;
    margin-bottom: 48px;
    height: 700svh;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-quote > * {
    display: block;
    opacity: var(--quote-line,0);
    transform: translateY(calc((1 - var(--quote-line,0)) * 18px));
    filter: blur(calc((1 - var(--quote-line,0)) * 5px));
  }
}

@media (min-height:641px) and (min-width:761px) {
  /* ドッキング後：メッセージは大きめに、ギャラリーは右下に固定する。 */
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
    transform: scale(calc(1 - var(--culture-dock,0) * .2));
  }

  #culture .culture-gallery-scene {
    inset: 39% 3.6vw 3% 17vw;
  }
}

.page-content > .growth > #culture {
  background: transparent;
  animation: none;
}

@media (min-height:641px) {
  /* ギャラリーの下に帯を残し、通常のページスクロールに使う。 */
  #culture .culture-gallery-scene {
    bottom: 12%;
  }

  #culture .culture-stage .culture-quote {
    width: 100%;
    margin: 0;
    line-height: 1.55;
  }

  #culture .culture-stage .culture-quote > span {
    text-wrap: balance;
  }

  #culture .culture-stage .culture-quote-conclusion {
    white-space: normal;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
    top: calc(29% - var(--culture-dock,0) * 17%);
  }
}

/* People のメッセージがカルチャーシーンを締めくくる。シーンの色味にやわらかく馴染ませる。 */
.people-caption {
  color: #fff;
  margin-top: 48px;
  margin-bottom: 0;
}

@media (max-width:760px) {
  .people-caption {
    margin-top: 32px;
  }
}

#culture .culture-highlight {
  margin-right: .1em;
  background: none;
  color: inherit;
  border-bottom: 0;
  position: relative;
  isolation: isolate;
  padding: .04em .22em;
}

#culture .culture-highlight:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,var(--c-orange),#ff9a32);
  transform: scaleX(var(--culture-highlight,0));
  transform-origin: left;
  box-shadow: 0 0 24px #ff8b3040;
}

#culture,
#culture .culture-stage,
#culture .culture-stage > h2 {
  background: transparent !important;
}

/* 展開中のカードは写真を素のまま見せる：ダブルトーンのシートをフェードアウトさせるだけ。 */
#culture .culture-gallery-scene .culture-card.is-expanded .culture-card-media::after {
  opacity: 0;
}

#culture .culture-gallery-scene .culture-card p {
  line-height: 1.8;
}

/* テキストが折り返しても、ギャラリーはドッキングしたコピーの下に留まる。 */
#culture .culture-gallery-scene {
  top: max(39%,calc(12% + var(--culture-copy-height,360px) * .8 + 28px));
  bottom: 5%;
}

@media (max-width:760px) {
  #culture .culture-gallery-scene {
    top: max(43%,calc(12% + var(--culture-copy-height,300px) * .92 + 22px));
    bottom: 3%;
  }
}

/* ドッキング後のレイアウトでは、補足のコピーは控えめなリードになり… */
#culture .culture-stage > div.is-docked .culture-quote > span:nth-child(2),
#culture .culture-stage > div.is-docked .culture-quote-conclusion {
  line-height: 1.8;
}

/* …その 2 文がひとつの段落として読める。 */
#culture .culture-stage > div.is-docked .culture-quote > span:nth-child(2) {
  line-height: 1.7;
}

#culture .culture-stage > div.is-docked .culture-quote-conclusion {
  line-height: 1.7;
}

#culture .culture-gallery-scene .culture-card .culture-card-media {
  isolation: isolate;
  background: var(--c-deep);
  overflow: hidden;
  border-radius: 16px;
}

/* 閉じたカードはオレンジのダブルトーンをまとう（クライアント要望、2026-10-18）。単なる色かぶせ
   ではなく本物のダブルトーン：::after のシートが同じ写真を #culture-duotone（index.html で定義）
   を通して表示する。これは最も暗い階調をブランドオレンジに、最も明るい階調を明るいオレンジに
   対応づける SVG のランプで、両端ともランプの内側に固定してあるため、白飛びも黒つぶれも起きない。
   写真そのものは下層で手を加えずに残し、ホバー／展開はシートをフェードさせるだけなので、
   変化はひとつの滑らかなクロスフェードになる。
   シートの画像は下でカードごとに指定する（カードの <img> と同じファイル。変更時は両方を揃えて
   更新すること）。要素のカスタムプロパティではなくここに書くのは、カスタムプロパティ内の相対
   url() が Chromium では参照元のスタイルシート基準で解決され、パスが壊れたため。ここに書けば
   どのブラウザでもこのファイル基準で解決される。 */
#culture .culture-gallery-scene .culture-card .culture-card-media img {
  /* 写真そのものは常に元の色のまま——上にある広い #culture のルールはカード画像に
     grayscale をかけるが、ここでのダブルトーンは代わりに ::after のシートが担う。 */
  filter: none;
  transition: transform .8s, scale .6s var(--motion-ease);
}

#culture .culture-gallery-scene .culture-card .culture-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: center / cover no-repeat;
  filter: url(#culture-duotone);
  opacity: 1;
  transition: opacity .9s cubic-bezier(.16,1,.3,1);
}

#culture .culture-gallery-scene .culture-card:nth-child(1) .culture-card-media::after { background-image: url(../assets/culture-official/sales-hr-01.webp); }
#culture .culture-gallery-scene .culture-card:nth-child(2) .culture-card-media::after { background-image: url(../assets/culture-official/party-01.webp); }
#culture .culture-gallery-scene .culture-card:nth-child(3) .culture-card-media::after { background-image: url(../assets/culture-official/trip-02.jpeg); }
#culture .culture-gallery-scene .culture-card:nth-child(4) .culture-card-media::after { background-image: url(../assets/culture-official/club-04.webp); }

/* 展開した写真の上に、Recruit のギャラリー写真と同じ色の光を重ねる
   （#recruit .company-gallery figure::before）——左下から暖色の光、右上から青紫の光が、
   共通の duo-light のタイミング（motion.css）で漂う。変更するときは両者を揃えること。 */
#culture .culture-gallery-scene .culture-card .culture-card-media::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(46% 52% at 18% 82%,rgba(255,150,40,1),rgba(230,81,0,.7) 42%,transparent 74%),radial-gradient(44% 50% at 84% 16%,rgba(120,85,240,1),rgba(14,47,142,.6) 44%,transparent 74%),radial-gradient(32% 38% at 60% 58%,rgba(255,179,0,.55),transparent 70%);
  animation: duo-light 7s ease-in-out infinite alternate;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1);
}

#culture .culture-gallery-scene .culture-card:is(.is-expanded, :hover) .culture-card-media::before {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  #culture .culture-gallery-scene .culture-card .culture-card-media::before {
    animation: none;
  }
}

#culture .culture-gallery-scene .culture-card.is-expanded .culture-card-media::before {
  opacity: .9;
}

/* カードをホバーすると（同時に展開もする。js/motion.js 参照）写真が元の色に戻り、光が
   その上を走る。展開状態のルールより後に置いているのは意図的。 */
@media (hover: hover) {
  #culture .culture-gallery-scene .culture-card:hover .culture-card-media::after {
    opacity: 0;
  }

  #culture .culture-gallery-scene .culture-card:hover .culture-card-media::before {
    opacity: .9;
  }
}

/* 見出し自体は中央に置き、補足のコピーはその下に座る。 */
.scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
  top: calc(50% + 15px - var(--culture-dock,0) * (38% + 15px));
  translate: 0 calc((1 - var(--culture-dock,0)) * var(--culture-headline-height,180px) * -.5);
}

#culture .culture-stage .culture-quote > span:nth-child(2),
#culture .culture-stage .culture-quote-conclusion {
  line-height: 1.7;
}

#culture .culture-stage .culture-quote > span:nth-child(2) {
  margin-top: 24px;
  margin-bottom: 0;
}

#culture .culture-stage .culture-quote-conclusion {
  margin-top: 0;
}

/* カルチャーステートメントを横切るオレンジの光。 */
#culture .culture-statement-sweep {
  background: linear-gradient(105deg,#fff 0%,#fff 40%,#ffb26c 45%,var(--c-orange) 49%,#ffe0b7 52%,#ff8738 55%,#fff 61%,#fff 100%);
  background-size: 300% 100%;
  background-position: var(--culture-flash-position,140%) 50%;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion:reduce) {
  #culture .culture-statement-sweep {
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}

/* 結びの行が強調を担う。 */
#culture .culture-stage .culture-quote .culture-quote-conclusion,
#culture .culture-stage > div.is-docked .culture-quote .culture-quote-conclusion {
  line-height: 1.7;
}

.page-content > .growth:has( > #culture) > .people > .people-caption {
  flex: none;
}

.page-content > .growth:has( > #culture) > .people > .people-actions {
  flex: none;
}

/* 引用文の行。 */
#culture .culture-stage .culture-quote > span:first-child {
  text-wrap: initial;
}

/* シーンの引き継ぎ：青がシームレスに近づき、ピン位置で暖色のシーンへ切り替わる。 */
#culture.growth-culture {
  padding-top: 0;
  padding-bottom: 0;
}

.page-content > .growth:has( > #culture) > .people {
  background: transparent;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(100px,12svh,160px) 0 clamp(64px,9svh,120px);
  margin-bottom: 0;
  justify-content: flex-start;
  padding-top: 48px;
}

@media (max-width:760px) {
  .page-content > .growth:has( > #culture) > .people {
    padding: 100px 0 64px;
    min-height: 100svh;
    padding-top: 32px;
  }
}

/* 展開したカードは見出し・ラベル・キャプションを写真の上に載せる。スクリムはそれらを
   支えられる濃さにし、フェードの途中に暖色の帯を通す（ネイビーからゴールドへ）。 */
#culture .culture-gallery-scene .culture-card.is-expanded:after {
  background: linear-gradient(180deg,transparent 42%,rgba(255,122,24,.20) 68%,rgba(255,146,54,.12) 86%,rgba(255,160,70,.04) 100%),
  linear-gradient(180deg,transparent 30%,rgba(6,16,44,.34) 54%,rgba(8,22,60,.74) 76%,rgba(9,20,52,.93) 100%);
}

/* People のメッセージがカルチャーシーンを締めくくる：上のコンテンツの直下に座る。 */
.page-content > .growth:has( > #culture) > .people,
#people {
  min-height: 0;
  justify-content: flex-start;
  padding-top: clamp(24px, 3svh, 48px);
  /* Services へ向かう余白。 */
  padding-bottom: clamp(150px, 21svh, 260px);
}

#people .people-caption {
  margin-top: 0;
}

@media (max-width: 760px) {

  .page-content > .growth:has( > #culture) > .people,
  #people {
    padding-top: 24px;
    padding-bottom: 120px;
  }
}

/* 引用文「人数が増えても、メンバー同士の顔が見える組織でありたい。」の背後に置くポートレート群。
   シートはビューポートに固定して動かさない（2026-10-18）：引用文とともに現れ（--culture-next）、
   その後はギャラリーと結びの「人とつながり…」CTA の背後で静かな背景として留まり、暖色のシーン
   自体が Services に引き継ぐときにだけ退場する（--warm-scene, js/motion.js）。 */
#culture .culture-faces {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(var(--culture-next, 0) * var(--warm-scene, 0));
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
}

#culture .culture-faces img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* --size counts in a unit that follows the width but stops at the height, so a wide, short
     screen (a laptop with the browser bars showing) shrinks the faces instead of cutting them. */
  --face-u: min(1vw, 1.6vh);
  width: clamp(110px, calc(var(--size) * var(--face-u) * 2), 500px);
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  object-position: center 24%;
  opacity: calc(var(--alpha) * 1.1);
  filter: url(#culture-faces-ink) blur(var(--blur));
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
  /* その場に固定：背景はスクロールに合わせて動かない。 */
  transform: translate3d(-50%, -50%, 0);
}

/* Eight portraits, every face whole on the screen: a slot's centre sits at least half its
   width in from the sides (the large two at 20% / 80% also clear a phone, where they grow to
   ~39vw). The large slots go to people seen only here; those shown large elsewhere on the
   site (the window team photo, Recruit) are left out, and two more at the client's choice
   (2026-10-29). */
#culture .culture-faces img:nth-child(1) {
  --x: 80%;
  --y: 38%;
  --size: 15;
  --alpha: .46;
  --blur: 0px;
  --depth: 0.9;
}

#culture .culture-faces img:nth-child(2) {
  --x: 15%;
  --y: 70%;
  --size: 11;
  --alpha: .46;
  --blur: 0px;
  --depth: -0.85;
}

#culture .culture-faces img:nth-child(3) {
  --x: 18%;
  --y: 24%;
  --size: 10;
  --alpha: .42;
  --blur: 0px;
  --depth: -0.4;
}

#culture .culture-faces img:nth-child(4) {
  --x: 50%;
  --y: 25%;
  --size: 11;
  --alpha: .52;
  --blur: 0px;
  --depth: -0.5;
}

#culture .culture-faces img:nth-child(5) {
  --x: 64%;
  --y: 77%;
  --size: 11.5;
  --alpha: .46;
  --blur: 0px;
  --depth: -0.3;
}

#culture .culture-faces img:nth-child(6) {
  --x: 38%;
  --y: 82%;
  --size: 7;
  --alpha: .42;
  --blur: 0px;
  --depth: 0.25;
}

#culture .culture-faces img:nth-child(7) {
  --x: 84%;
  --y: 80%;
  --size: 7;
  --alpha: .34;
  --blur: 0px;
  --depth: .4;
}

/* the centre, behind the quote (the client's call: overlapping the copy is fine) */
#culture .culture-faces img:nth-child(8) {
  --x: 50%;
  --y: 56%;
  --size: 7;
  --alpha: .40;
  --blur: 0px;
  --depth: 0;
}


@media (max-width: 760px) {
  #culture .culture-faces img {
    width: clamp(90px, calc(var(--size) * var(--face-u) * 2.6), 240px);
    opacity: calc(var(--alpha) * .9);
  }
}

/* Phone: the quote fills the middle of a tall screen, so the portraits leave it and sit in two
   bands — two rows above the quote, one row below it — and the centre slot rests (the client's
   call, 2026-10-29: showing only some of them is fine). */
@media (max-width: 760px) {
  #culture .culture-faces img { --sp-w: 27vw; width: var(--sp-w); }
  #culture .culture-faces img:nth-child(3) { --x: 32%; --y: 18%; }
  #culture .culture-faces img:nth-child(4) { --x: 68%; --y: 18%; }
  #culture .culture-faces img:nth-child(1) { --x: 21%; --y: 33%; --sp-w: 30vw; }
  #culture .culture-faces img:nth-child(5) { --x: 79%; --y: 33%; --sp-w: 30vw; }
  #culture .culture-faces img:nth-child(2) { --x: 18%; --y: 87%; --sp-w: 25vw; }
  #culture .culture-faces img:nth-child(6) { --x: 50%; --y: 88%; --sp-w: 25vw; }
  #culture .culture-faces img:nth-child(7) { --x: 82%; --y: 87%; --sp-w: 25vw; }
  #culture .culture-faces img:nth-child(8) { display: none; }
}

/* A short phone (iPhone SE and the like) has room above the quote for one row only. */
@media (max-width: 760px) and (max-height: 720px) {
  #culture .culture-faces img:nth-child(1),
  #culture .culture-faces img:nth-child(5) { display: none; }
}

.motion-paused #culture .culture-faces,
.motion-reduced #culture .culture-faces {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #culture .culture-faces {
    display: none;
  }
}

/* Projects の結びと同じ構成（その h3 が基準）：ステートメントは line-height 1.6 で下に 22px、
   補足の行は 1.95、そのあとにボタン。 */
#people .people-caption-lead {
  display: inline-block;
  line-height: 1.6;
  margin-bottom: 22px;
}

@media (max-width: 760px) {
  /* inline のままだと下の余白が効かず、補足の行と詰まって見えた（2026-10-29 実機レビュー）。
     行幅いっぱいのインラインブロックにして、余白を少し広めに取る。 */
  #people .people-caption-lead {
    display: inline-block;
    width: 100%;
    margin-bottom: 26px;
  }
}

#culture .culture-stage > h2 {
  color: #fff;
  background: none;
  opacity: calc((1 - var(--culture-exit, 0)) * .9) !important;
}

/* カルチャーシーンの下にある People ブロック。 */
#people {
  --pb-gap: 20px;
  --pb-w: 200px;
  --pb-h: 252px;
}

@media (max-width:760px) {
  #people {
    --pb-gap: 12px;
    --pb-w: 136px;
    --pb-h: 172px;
  }
}

/* カルチャーの 2 フレーム：見出しフレーム（「この急成長を支えてきたのは…」）はページフィールド
   の上に留まり（この時点では青→水色、--flow-light）、引用文フレームは暖色のシーンをフェードイン
   させる（--warm-scene）。どちらも文字は白のまま。以下のルールは 2 フレームに必要な重ね順を定める。 */
#culture#culture .culture-stage > div {
  z-index: 2;
}

#culture .culture-stage > h2 {
  z-index: 2;
}

/* ポートレート群はフィールドの上、引用文の背景として置く——ビューポートに固定し、ページが
   スクロールしても背景が動かないようにする（2026-10-18）。決定権を持つのはこのセレクタ：
   このファイル冒頭近くのブロックより後にあり、詳細度も高い。 */
#culture .culture-stage > .culture-faces {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ポートレートは元の色のまま、グラデーションに馴染むまでやわらげ、彩度を落とす。 */
#culture .culture-faces img {
  /* 切り抜きのポートレートを、背景のオレンジに溶け込む一色に染める（#culture-faces-tone：
     輝度を、鮮やかなオレンジ〜明るいオレンジの2色に置き換える。暗部も茶色に沈めない。2026-10-29、採用サイトの写真の
     当て方を参考に）。透明な背景はそのまま透けるので、人物だけが浮かぶ。マスクは縁をぼかすだけ。 */
  filter: url(#culture-faces-tone) blur(var(--blur));
  -webkit-mask-image: radial-gradient(closest-side, #000 85%, transparent);
  mask-image: radial-gradient(closest-side, #000 85%, transparent);
  opacity: calc(var(--alpha) * 1.3);
  /* 固定：背景はスクロールに合わせて動かないので、ここでも流さない。 */
  transform: translate3d(-50%, -50%, 0);
}

/* いったん現れたポートレートは、ギャラリーと結びの CTA の間ずっと留まり、暖色のシーン自体が
   Services に引き継ぐときにだけ退場する（--warm-scene, js/motion.js）。 */
#culture .culture-faces {
  opacity: calc(var(--culture-next, 0) * var(--warm-scene, 0));
}

/* 引用文は見出しの位置を引き継ぎ、見出しとまったく同じ組み方にする。 */
#culture .culture-stage .culture-quote > span:first-child {
  letter-spacing: .04em;
}

/* その場で透明から浮かび上がる：移動もブラーもなし。 */
.scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage .culture-quote > span:first-child {
  transform: none;
  filter: none;
}

/* その下の 2 行は、1 画面分下からスクロールに運ばれてひとつのブロックとして上がってくる
   （--quote-rise）。ページのさらに下のコンテンツが到着するのと同じ動きで。 */
.scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage .culture-quote > span:nth-child(2),
.scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage .culture-quote > .culture-quote-conclusion {
  transform: translateY(calc((1 - var(--quote-rise, 0)) * 52svh));
  filter: none;
  opacity: 1;
}

/* 読み終えると（ギャラリーはそれまで待つ）、引用文とその行は左上にドッキングし
   （--culture-dock）、写真の上のタイトルとして不透明度 75% で留まる。 */
.scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
  opacity: calc(var(--culture-next, 0) * (1 - var(--culture-dock, 0) * .25));
}

#culture .culture-gallery-scene .culture-card::after,
#culture .culture-gallery-scene .culture-card.is-expanded::after {
 inset:0;
 background:linear-gradient(to bottom,rgba(7,25,62,0) 25%,rgba(7,25,62,.12) 42%,rgba(7,25,62,.62) 64%,rgba(7,25,62,.9) 85%,rgba(7,25,62,.97) 100%);
 pointer-events:none;
}

/* スマホのギャラリー（2026-10-29 実機レビュー「見にくい」）：ギャラリーは画面の下 4 割ほどしか
   ないので、開いたカードの文が下で切れ、閉じたカードは縦のラベルが入らない幅になっていた。
   開いたカードを少し細くして閉じたカードに幅を回し、文は写真全体に敷いた暗いシートの上に
   上から流す（見出しの 1 行と本文だけ。キャッチの h3 はこの高さでは入らないので出さない）。
   ドッキングした引用文の背後では、ポートレートを控えめにして文字を読みやすくする。 */
@media (max-width: 760px) {
  #culture .culture-gallery-scene .culture-card.is-expanded {
    flex: 5;
  }

  #culture .culture-gallery-scene .culture-card:after {
    inset: 0;
    background: linear-gradient(#09244c99, #09244cd9 55%);
  }

  #culture .culture-gallery-scene .culture-card h3 {
    display: none;
  }

  #culture .culture-gallery-scene .culture-card h4 {
    top: 16px;
    bottom: auto;
  }

  #culture .culture-gallery-scene .culture-card p {
    top: 50px;
    bottom: auto;
    font-size: 13px;
    line-height: 1.75;
  }

  #culture .culture-faces {
    opacity: calc(var(--culture-next, 0) * var(--warm-scene, 0) * (1 - var(--culture-dock, 0) * .65));
  }

  /* 閉じたカードの縦のラベルは 1 列に収める（長い「業界でも珍しい「営業人事制度」」が 2 列に
     折り返して上が切れていた）。入りきらない高さでは末尾を … で切る。 */
  .culture-panel-label {
    bottom: 14px;
    max-height: calc(100% - 28px);
    font-size: 12px;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* スマホのギャラリーは縦のアコーディオン（2026-10-29 実機レビュー：横に並べると閉じたカードの
   縦ラベルが太い帯になり、開いたカードの写真と文が小さく見える）。閉じたカードは横書きの
   ラベルの細い帯にして縦に積み、開いた 1 枚が画面幅いっぱいを使う。開くカードの選び方
   （スクロール位置／タップ）は PC と同じ。 */
@media (max-width: 760px) {
  #culture .culture-gallery-scene {
    left: 5vw;
    right: 5vw;
  }

  #culture .culture-gallery-scene .culture-grid {
    flex-direction: column;
    gap: 6px;
  }

  #culture .culture-gallery-scene .culture-card {
    flex: 0 0 42px;
    border-radius: 12px;
    transition: flex-basis .65s cubic-bezier(.22,1,.36,1), flex-grow .65s cubic-bezier(.22,1,.36,1);
  }

  #culture .culture-gallery-scene .culture-card.is-expanded {
    flex: 1 0 42px;
  }

  #culture .culture-gallery-scene .culture-card .culture-card-media {
    border-radius: 12px;
  }

  .culture-panel-label {
    top: 50%;
    bottom: auto;
    left: 16px;
    right: 16px;
    max-height: none;
    padding-right: 24px;
    writing-mode: horizontal-tb;
    font-size: 13px;
    line-height: 1;
    transform: translateY(-50%);
  }

  .culture-panel-label::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 18px;
    font-weight: 400;
    transform: translateY(-50%);
  }
}

/* 結びの「それが、人と人とのつながりです。」（16 字）はスマホでも 1 行に収める
   （375px 幅で「す。」だけが次の行に落ちていた）。 */
@media (max-width: 760px) {
  #culture .culture-stage .culture-quote-conclusion {
    font-size: min(var(--t-subhead), 5.3vw);
  }
}

/* スマホのポートレートを、行に揃えた並びから、大小をつけて散らした配置にする（2026-10-29
   実機レビュー：秩序だった並びが PC の雰囲気と合わない。続けて「もっと全体的に大きく」）。
   大きい 2 人（上右・下左、画面幅の約半分）を軸に、端の人は画面からはみ出してもよい。
   小さい人は奥に退くよう少しぼかして薄くし、引用文の帯（画面の中ほど）は空けておく。
   中央の 1 人（8）は引き続き出さない。 */
@media (max-width: 760px) {
  #culture .culture-faces img:nth-child(4) { --x: 72%; --y: 21%; --sp-w: 52vw; --alpha: .5;  --blur: 0px; }
  #culture .culture-faces img:nth-child(3) { --x: 15%; --y: 14%; --sp-w: 32vw; --alpha: .4;  --blur: .5px; }
  #culture .culture-faces img:nth-child(1) { --x: 9%;  --y: 41%; --sp-w: 27vw; --alpha: .28; --blur: 1.5px; display: block; }
  #culture .culture-faces img:nth-child(2) { --x: 93%; --y: 50%; --sp-w: 25vw; --alpha: .26; --blur: 2px; }
  #culture .culture-faces img:nth-child(5) { --x: 25%; --y: 81%; --sp-w: 50vw; --alpha: .5;  --blur: 0px; display: block; }
  #culture .culture-faces img:nth-child(6) { --x: 72%; --y: 70%; --sp-w: 30vw; --alpha: .5;  --blur: 0px; }   /* ぼかさずはっきり（2026-10-29） */
  #culture .culture-faces img:nth-child(7) { --x: 87%; --y: 93%; --sp-w: 36vw; --alpha: .42; --blur: .5px; }
}

/* 背の低いスマホでは、引用文の帯に近い小さい 2 人（1・2）を休ませる。 */
@media (max-width: 760px) and (max-height: 720px) {
  #culture .culture-faces img:nth-child(1),
  #culture .culture-faces img:nth-child(2) { display: none; }
}

/* ===== スマホのカルチャー：引用文は控えめにし、4 枚のカードを主役として縦に並べる =====
   （2026-10-29 実機レビュー：明朝のタイトルが大きくバランスが悪い、縦積みのアコーディオンを
   やめて普通のカードに）。js/motion.js がスマホでギャラリーを固定ステージの外（.culture-lead
   の末尾）へ移す。ここではそれを普通の流れの縦並びにする。上の 2 つのスマホ用ギャラリー
   ブロック（横並びの調整・縦のアコーディオン）は、この後ろのルールで上書きされる。 */
@media (max-width: 760px) {
  #culture .culture-quote {
    font-size: min(var(--t-statement), 7.4vw);
  }

  #culture .culture-gallery-scene {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    height: auto;
    margin: 0;
    padding-top: 28px;
    z-index: 4;
    pointer-events: none;
  }

  #culture .culture-gallery-pin {
    position: static;
    top: auto;
    height: auto;
    padding: 0;
  }

  #culture .culture-gallery-scene .culture-grid,
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-gallery-scene .culture-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    height: auto;
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
  }

  #culture .culture-gallery-scene .culture-card,
  #culture .culture-gallery-scene .culture-card.is-expanded {
    flex: none;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgb(90 30 0 / .45);
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }

  #culture .culture-gallery-scene .culture-card::after,
  #culture .culture-gallery-scene .culture-card.is-expanded::after,
  #culture .culture-gallery-scene .culture-card .culture-card-media::before,
  #culture .culture-gallery-scene .culture-card .culture-card-media::after,
  #culture .culture-gallery-scene .culture-card h3,
  #culture .culture-gallery-scene .culture-panel-label {
    display: none;
  }

  /* 写真の高さは幅から直接決める（aspect-ratio だけに任せると iPhone で潰れることがあるため）。 */
  #culture .culture-gallery-scene .culture-card .culture-card-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: calc((100vw - 2 * var(--gutter)) * .58);
    border-radius: 0;
  }

  #culture .culture-gallery-scene .culture-card-media img:not(:first-child) {
    display: none;
  }

  #culture .culture-gallery-scene .culture-card h4,
  #culture .culture-gallery-scene .culture-card p {
    position: static;
    opacity: 1;
    transform: none;
    margin: 0;
    padding-inline: 20px;
  }

  #culture .culture-gallery-scene .culture-card h4 {
    padding-top: 18px;
    color: var(--c-orange);
    font-size: var(--t-title);
  }

  #culture .culture-gallery-scene .culture-card p {
    padding-top: 8px;
    padding-bottom: 22px;
    color: var(--c-ink);
    font-size: var(--t-body);
    line-height: 1.85;
  }
}

/* スマホのカルチャー（2026-10-29 実機レビュー）。青いステートメントがオレンジの引用文に
   切り替わるところまではステージを固定し、その後は左上へ小さく寄せて留めず、引用文ごと
   カードと一緒に上へ流す。引用文は中央揃えで、固定のポートレートより手前に置き、明るい部分に
   かかっても読めるよう文字の背後に暖色の淡い影を敷く。 */
@media (max-width: 760px) {
  #culture .culture-stage > div,
  #culture .culture-stage > div.is-docked {
    text-align: center !important;
    z-index: 6;
    padding-inline: 0 !important;   /* ページの余白の内側にさらに 7vw 取ると、結びの 1 行が折り返す */
  }

  #culture .culture-stage .culture-quote > span:first-child {
    line-height: 1.6;
  }

  #culture .culture-stage .culture-quote-conclusion {
    font-size: min(var(--t-subhead), 5vw);
  }

  #culture .culture-stage .culture-quote {
    text-shadow: 0 1px 14px rgb(170 60 0 / .45), 0 0 2px rgb(170 60 0 / .25);
  }

  #culture .culture-faces {
    opacity: calc(var(--culture-next, 0) * var(--warm-scene, 0));
  }

  #culture .culture-gallery-scene {
    transform: none;
  }
}

/* 背の高いスマホ：ステージの固定は、引用文の 3 行が出そろうまで（進行度 .86 ≒ 2.2 画面分。引用文だけを
   見せる間を js/motion.js で取ったぶん、2026-10-30 に .74 から延ばした）。
   引用文は画面の中ほどに置いたまま動かさず（ドッキングしない）、固定が外れると上へ流れる。
   カードはステージの直後にあり、引用文のすぐ下から始まるよう少し重ねる。 */
@media (max-width: 760px) and (min-height: 641px) {
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-lead {
    height: 324svh;
    margin-bottom: 0;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
    top: 50%;
    left: var(--gutter);
    width: calc(100vw - 2 * var(--gutter));
    transform: none;
    translate: 0 -50%;
    opacity: var(--culture-next, 0);
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-gallery-scene {
    margin-top: calc(-50svh + 230px);
  }
}

/* 背の低いスマホ（ステージは固定されない）：引用文はスクロール量で現れる作りなので、最初から
   見せて普通に流す。 */
@media (max-width: 760px) and (max-height: 640px) {
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage > div {
    position: relative;   /* z-index を効かせて、固定のポートレートより手前に */
    opacity: 1;
    margin-bottom: 0;
    transform: none;
    translate: none;
  }

  #culture .culture-stage > h2 {
    position: relative;
    z-index: 6;
  }

  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage .culture-quote > span:nth-child(2),
  .scroll-choreography:not(.motion-paused):not(.motion-reduced) #culture .culture-stage .culture-quote > .culture-quote-conclusion {
    transform: none;
  }
}

/* スマホのステートメント：「この急成長を／支えてきたのは、／かなり／意識的に続けてきた／
   組織づくりです。」と区切る（2026-10-29 実機レビュー）。最後の区切りは、2 つある
   culture-mobile-break のうち「続けてきた」の後ろだけを使う。 */
@media (max-width: 760px) {
  #culture .culture-statement-sweep > br.culture-mobile-break:last-of-type {
    display: inline;
  }
}

/* スマホのカルチャーのカード：スクロールすると次のカードが前のカードの上に重なっていく
   （2026-10-29 実機レビュー。採用ページのカルチャーのカードと同じ動き）。各カードはヘッダーの
   下に少しずつずらして留まる。 */
@media (max-width: 760px) {
  #culture .culture-gallery-scene .culture-card,
  #culture .culture-gallery-scene .culture-card.is-expanded {
    position: sticky;
    top: calc(84px + var(--stack, 0) * 14px);
    box-shadow: 0 -12px 32px -14px rgb(90 30 0 / .4);
  }

  #culture .culture-gallery-scene .culture-card:nth-child(2) { --stack: 1; }
  #culture .culture-gallery-scene .culture-card:nth-child(3) { --stack: 2; }
  #culture .culture-gallery-scene .culture-card:nth-child(4) { --stack: 3; }
}