/* ============================================================
   home supplement — TOPページ固有モジュール（アメーバ/パズル/重力数字）。
   読み込み順: _astro CSS の「後」に読む。
   方針: 共有クラス(.reveal/.s-h2/.eyebrow/.btn 等)は再定義しない。
         .s001 namespace で固有クラスを定義し、色は本番トークンにエイリアス。
   ============================================================ */

/* --- 変数エイリアス（.s001配下のみ有効） --- */
.s001 {
  --accent: var(--color-accent);
  --accent-deep: var(--color-accent-deep);
  --accent-soft: var(--color-accent-soft, oklch(92% 0.06 35));
  --ink: var(--color-ink);
  --ink-2: var(--color-ink-2);
  --ink-3: var(--color-ink-3);
  --paper: var(--color-paper);
  --paper-2: var(--color-paper-2);
  --paper-3: var(--color-paper-3, #e8e8ed);
  --paper-dark: #0a0a0c;
  --rule: var(--color-rule);
  --font-jp: "Space Grotesk", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-display: var(--font-jp);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 14px;
  --radius-pill: 980px;
  --ease: cubic-bezier(.4, .1, .3, 1);
  --ease-overshoot: cubic-bezier(.51, -.04, .13, 1.05);
  --dur-fast: 200ms;
  --dur-base: 400ms;
}

/* ============================================================
   S-02 GOALS — 背景アメーバ（メタボール）
   ============================================================ */
#goals.s001 { position: relative; overflow: hidden; }
#goals.s001 > .inner { position: relative; z-index: 1; }
.s001-amoeba {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  touch-action: pan-y;
  opacity: .15;
  -webkit-mask-image: radial-gradient(150% 150% at 50% 38%, #000 62%, transparent 100%);
          mask-image: radial-gradient(150% 150% at 50% 38%, #000 62%, transparent 100%);
}
.s001-amoeba__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s001-amoeba .blob { fill: var(--color-accent); transform-box: fill-box; transform-origin: center; will-change: transform; }
.s001-amoeba .bcursor { fill: var(--color-accent); transition: r .4s var(--ease); }
.s001-amoeba .b1 { animation: s001ab1 11s ease-in-out infinite; }
.s001-amoeba .b2 { animation: s001ab2 13s ease-in-out infinite; }
.s001-amoeba .b3 { animation: s001ab3 9.5s ease-in-out infinite; }
.s001-amoeba .b4 { animation: s001ab4 15s ease-in-out infinite; }
.s001-amoeba .b5 { animation: s001ab5 12s ease-in-out infinite; }
.s001-amoeba .b6 { animation: s001ab6 10s ease-in-out infinite; }
@keyframes s001ab1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(90px,46px) scale(1.18)} }
@keyframes s001ab2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-78px,-54px) scale(.82)} }
@keyframes s001ab3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(64px,-74px) scale(1.32)} }
@keyframes s001ab4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-96px,62px) scale(1.1)} }
@keyframes s001ab5 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(112px,-34px) scale(.76)} }
@keyframes s001ab6 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-54px,-44px) scale(1.24)} }

/* ============================================================
   S-05 APPROACH — 3x3スライドパズル＋6ステップ
   ============================================================ */
.s001 .approach-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: start; margin-top: clamp(32px, 5vh, 56px);
}
@media (max-width: 860px) { .s001 .approach-grid { grid-template-columns: 1fr; } }

.s001 .puzzle { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.s001 .ptile { position: absolute; top: 0; left: 0; width: 33.333%; height: 33.333%; padding: 5px; transition: transform .42s var(--ease-overshoot); }
.s001 .puzzle.is-manual .ptile { cursor: pointer; }
.s001 .ptile__in { position: relative; width: 100%; height: 100%; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 16px -12px rgba(0,0,0,.5); }
.s001 .ptile--content .ptile__in { flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(6px,1.6vw,12px) clamp(7px,1.8vw,14px); gap: clamp(2px,.5vw,5px); }
.s001 .ptile__no { font-family: var(--font-mono); font-size: clamp(.52rem,1.2vw,.68rem); color: var(--ink-3); letter-spacing: .08em; line-height: 1; }
.s001 .ptile__verb { font-family: var(--font-jp); font-weight: 700; font-size: clamp(.78rem,2.1vw,1.08rem); color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.s001 .ptile__desc { font-family: var(--font-jp); font-size: clamp(.5rem,1.25vw,.66rem); color: var(--ink-2); line-height: 1.35; }
.s001 .ptile__l { font-family: "Dancing Script", var(--font-display); font-weight: 700; font-size: clamp(3rem, 9.5vw, 5.4rem); color: var(--ink); z-index: 2; line-height: 1; }
.s001 .ptile--logo .ptile__in { background: var(--ink); }
.s001 .ptile--logo img { width: 64%; height: auto; filter: brightness(0) invert(1); }
.s001 .ptile--accent .ptile__in { background: var(--accent); }
.s001 .ptile--accent .ptile__l { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.9rem); letter-spacing: -.01em; }
.s001 .puzzle-win { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--accent) 90%, #000), var(--accent-deep)); color: #fff; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease); }
.s001 .puzzle.is-solved .puzzle-win { opacity: 1; visibility: visible; }
.s001 .puzzle-win__word { font-family: "Dancing Script", cursive; font-weight: 700; font-size: clamp(3.6rem, 13vw, 6.2rem); line-height: 1; transform: scale(.6); opacity: 0; transition: transform .7s var(--ease-overshoot) .12s, opacity .5s var(--ease) .12s; }
.s001 .puzzle.is-solved .puzzle-win__word { transform: scale(1); opacity: 1; }
.s001 .puzzle-win p { margin-top: .5rem; font-family: var(--font-jp); font-weight: 700; font-size: 1.05rem; }
.s001 .puzzle-win p span { display: block; font-weight: 500; font-size: .8rem; opacity: .85; margin-top: .3rem; }
.s001 .puzzle-win__btn { margin-top: 1.3rem; background: #fff; color: var(--accent-deep); border: none; border-radius: var(--radius-pill); padding: .65rem 1.4rem; font-weight: 600; font-size: .84rem; cursor: pointer; }
.s001 .puzzle-ctrl { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; flex-wrap: wrap; }
.s001 .puzzle-btn { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-pill); padding: .55rem 1.2rem; font-weight: 600; font-size: .82rem; color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.s001 .puzzle-btn:hover { background: var(--ink); color: #fff; }
.s001 .puzzle-hint { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; }

.s001 .flow { display: flex; flex-direction: column; gap: 0; margin-top: 0; }
.s001 .fstep { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.s001 .fstep:last-child { border-bottom: 1px solid var(--rule); }
.s001 .fstep__no { font-family: var(--font-mono); font-size: .78rem; color: var(--accent-deep); }
.s001 .fstep b { font-family: var(--font-jp); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.s001 .fstep span { color: var(--ink-2); font-size: .92rem; margin-left: .5rem; }

/* ============================================================
   S-06 WORKS — 実績カード（2x2グリッド）
   ============================================================ */
.s001 .works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4vh, 48px); }
@media (max-width: 820px) { .s001 .works { grid-template-columns: 1fr; } }
.s001 .work { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2rem 1.9rem; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.s001 .work:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.3); }
.s001 .work__tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; }
.s001 .work h3 { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; margin-top: .9rem; line-height: 1.4; }
.s001 .work p { color: var(--ink-2); font-size: .95rem; margin-top: 1rem; line-height: 1.8; }
.s001 .works-more { margin-top: 40px; }

/* ============================================================
   S-07 NUMBERS — 「数字は、重さだ。」重力thud＋ダーク
   ============================================================ */
.s001.s-numbers, .s001#numbers { position: relative; background: var(--paper-dark); color: #fff; overflow: hidden; }
.s001 .numbers__bg { position: absolute; inset: 0; opacity: .42; z-index: 0; }
.s001 .numbers__bg img { width: 100%; height: 100%; object-fit: cover; animation: s001kenburns 26s ease-in-out infinite alternate; }
.s001 .numbers__bg.is-hit { animation: s001bgjolt 1.6s var(--ease); }
@keyframes s001kenburns { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes s001bgjolt { 0%,100%{filter:brightness(1)} 16%{filter:brightness(1.55)} 38%{filter:brightness(1)} 60%{filter:brightness(1.45)} 82%{filter:brightness(1)} }
.s001 .numbers__inner { position: relative; z-index: 1; }
.s001 .ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(40px, 6vh, 72px); }
@media (max-width: 820px) { .s001 .ngrid { grid-template-columns: 1fr; gap: 48px; } }
.s001 .nstat__fig { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .9; letter-spacing: -.04em; color: #fff; display: inline-block; transform-origin: bottom center; opacity: 0; }
.s001 .nstat__fig .s { color: var(--color-accent); }
.s001 .reveal.is-in .nstat__fig { animation: s001thud .9s var(--ease) both; }
.s001 .ngrid > div:nth-child(2) .nstat__fig { animation-delay: .22s; }
.s001 .ngrid > div:nth-child(3) .nstat__fig { animation-delay: .44s; }
@keyframes s001thud { 0%{transform:translateY(-46px) scaleY(1.18) scaleX(.86);opacity:0} 55%{transform:translateY(0) scaleY(1) scaleX(1);opacity:1} 70%{transform:scaleY(.8) scaleX(1.14)} 84%{transform:scaleY(1.06) scaleX(.97)} 100%{transform:scaleY(1) scaleX(1);opacity:1} }
.s001 .nstat__lab { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-top: 1rem; }
.s001 .nstat__cap { color: rgba(255,255,255,.92); font-size: .92rem; margin-top: .7rem; line-height: 1.75; max-width: 34ch; }
.s001 .numbers__head .s-h2 { color: #fff; }
.s001 .numbers__head .eyebrow { color: rgba(255,255,255,.6); }

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .s001-amoeba .blob,
  .s001 .numbers__bg img,
  .s001 .numbers__bg.is-hit { animation: none; }
  .s001 .nstat__fig { opacity: 1; animation: none; }
}

@media (pointer: coarse) {
  .s001-amoeba .blob { animation: none; will-change: auto; }
  .s001-amoeba .bcursor { display: none; }
}

/* ============================================================
   SERVICE hero — 回転テキスト幅固定
   ============================================================ */
.rot-wrap { display: inline-grid; vertical-align: baseline; line-height: 1.5em; }
.rot-wrap > * { grid-area: 1 / 1; line-height: inherit; align-self: center; }
.rot-wrap .rot-ghost { visibility: hidden; pointer-events: none; user-select: none; white-space: nowrap; }
.rot-wrap .rot { text-align: left; white-space: nowrap; }
.rot-wrap .rot .fig,
.rot-wrap .rot-ghost .fig { line-height: inherit; }

/* ============================================================
   HERO — 見えないコト/魅せるモノ 演出
   ============================================================ */
.hero-invisible { animation: s001-invisible 6.8s ease-in-out infinite; }
@keyframes s001-invisible {
  0%, 100% { color: var(--color-ink); }
  50%      { color: #f0f0f2; }
}
.hero-shimmer {
  background-image: linear-gradient(100deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #0a84ff, #bf5af2, #ff3b30);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: s001-rainbow 11s linear infinite;
}
@keyframes s001-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.hero-sub.hero-sub--accent {
  color: var(--color-accent) !important;
  font-weight: 800 !important;
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .hero-invisible, .hero-shimmer { animation: none; }
  .hero-shimmer { background-position: 30% 50%; }
}
@media (pointer: coarse) {
  .hero-shimmer { animation: none; background-position: 0% 50%; }
  .hero-invisible { animation: none; }
}

/* ============================================================
   DESIGN IS — 各要素ラベル＋AI×IT土台バンド
   ============================================================ */
.el-jp {
  display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: 1.7rem; color: var(--color-accent); margin-top: .2rem; letter-spacing: .01em;
}
@media(min-width:1280px) {
  .elements-grid[data-astro-cid-j7pv25f6] { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; }
  .el-card[data-astro-cid-j7pv25f6] { padding: 1.75rem 1.25rem !important; }
}
.foundation-band {
  margin-top: 24px; border-radius: 14px; background: var(--color-ink); color: #fff;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem);
  display: flex; align-items: center; gap: 1rem 2.4rem; flex-wrap: wrap; justify-content: space-between;
}
.foundation-band__l {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
.foundation-band__l .x { color: var(--color-accent); }
.foundation-band__r { color: rgba(255,255,255,.74); font-size: .96rem; line-height: 1.85; max-width: 52ch; }
.foundation-band__r b { color: #fff; font-weight: 700; }

/* ============================================================
   FOOTER — Mission/Vision/Passion帯
   ============================================================ */
.foot-mvp {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
  border-top: 3px solid var(--color-accent);
  padding-block: 50px;
}
.foot-mvp__big {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1.05; letter-spacing: -.03em; color: var(--color-ink);
}
.foot-mvp__big .accent { color: var(--color-accent); }
.foot-mvp__grid {
  margin-top: clamp(40px, 7vh, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--color-rule);
}
@media (max-width: 760px) { .foot-mvp__grid { grid-template-columns: 1fr; } }
.foot-mvp__k { font-family: "Space Grotesk", sans-serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-deep); }
.foot-mvp__grid p { margin-top: .6rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.5; color: var(--color-ink); }
.foot-mvp__grid small { display: block; margin-top: .4rem; color: var(--color-ink-3); font-size: .78rem; line-height: 1.55; }
a.easter { color: var(--color-ink-4); font-family: var(--font-mono); letter-spacing: .04em; text-decoration: none; transition: color .2s; }
a.easter:hover { color: var(--color-accent); }

/* ============================================================
   DESIGN IS — el-num と el-en を1行で
   ============================================================ */
#design-is .el-head { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }

/* ============================================================
   APPROACH — パズルヒント文字サイズ
   ============================================================ */
#approach .puzzle-hint { font-size: .82rem; }
.s001 .fstep--mult { border-top: 2px solid var(--color-accent); margin-top: .15rem; }
.s001 .fstep--mult .fstep__no { color: var(--color-accent); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.s001 .fstep--mult b { color: var(--color-accent); }

/* ============================================================
   AI×IT 土台ビジュアル
   ============================================================ */
.foundation-band { flex-direction: column; align-items: stretch; gap: 1.4rem; }
.aiit-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; }
.aiit-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.aiit-chip { font-family: "Space Grotesk", sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: #fff; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: .38rem .9rem; background: rgba(255,255,255,.05); }
.aiit-chip.is-core { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 30%, transparent); }
.aiit-base { position: relative; width: 100%; border-radius: 14px; padding: 1.15rem 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem 1rem; background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 90%, #000), var(--color-accent-deep)); box-shadow: 0 -12px 34px -20px var(--color-accent); }
.aiit-base::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 9px solid transparent; border-bottom-color: color-mix(in oklch, var(--color-accent) 90%, #000); }
.aiit-base__l { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: #fff; letter-spacing: -.01em; line-height: 1; }
.aiit-base__l .x { color: rgba(255,255,255,.78); }
.aiit-base__t { font-family: "Space Grotesk", sans-serif; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.foundation-note { color: rgba(255,255,255,.74); font-size: .92rem; line-height: 1.9; max-width: 62ch; margin: 0 auto; text-align: center; }
.foundation-note b { color: #fff; font-weight: 700; }

/* ============================================================
   AI page — クロスカード
   ============================================================ */
.aicross-card { background: rgba(255,255,255,.10); transition: background .25s var(--ease); }
.aicross-card:hover { background: rgba(255,255,255,.18); }
.aicross-btn { display: inline-flex; align-items: center; margin-top: 1.4rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .02em; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: .45rem 1.05rem; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.aicross-btn:hover { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); }

/* ============================================================
   SERVICE hero — スプリットフラップ board
   ============================================================ */
.flap-mount { display: inline-block; }
.flap-board {
  display: inline-flex; gap: .07em; font-size: .82em;
  background: #000; padding: .12em; border-radius: .16em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.4);
}
.flap-cell {
  position: relative;
  width: .92em; height: 1.18em;
  background: #000;
  border-radius: .05em;
  font-family: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700; line-height: 1; color: #fff;
  perspective: 260px;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.7);
}
.flap-t {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #323232 0%, #1e1e1e 100%);
  border-radius: .05em .05em 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
.flap-t .ch { display: block; line-height: 1; transform: translateY(50%); }
.flap-b {
  position: absolute;
  top: 50%; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #191919 0%, #0e0e0e 100%);
  border-radius: 0 0 .05em .05em;
  display: flex; align-items: flex-start; justify-content: center;
}
.flap-b .ch { display: block; line-height: 1; transform: translateY(-50%); }
.flap-cell::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: calc(50% - 1px); height: 2px;
  background: #000;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.09);
  z-index: 10; pointer-events: none;
}
.flap-f {
  position: absolute;
  top: 50%; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #191919 0%, #0e0e0e 100%);
  border-radius: 0 0 .05em .05em;
  display: flex; align-items: flex-start; justify-content: center;
  transform-origin: 50% 0%;
  z-index: 5;
}
.flap-f .ch { display: block; line-height: 1; transform: translateY(-50%); }
.flap-f.is-falling {
  animation: flapFall .32s cubic-bezier(.55, .0, .75, .9) forwards;
}
@keyframes flapFall {
  0%   { transform: rotateX(0deg);  box-shadow: 0 5px 10px rgba(0,0,0,.45); }
  100% { transform: rotateX(90deg); box-shadow: 0 1px  2px rgba(0,0,0,.1); }
}
@media (prefers-reduced-motion: reduce) {
  .flap-f.is-falling { animation: none; transform: rotateX(90deg); }
}

/* ============================================================
   DESIGN IS — 「6つ ＝ デザイン」等式ビジュアル
   ============================================================ */
.deq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.deq-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 540px; }
.deq-chip { font-family: "Space Grotesk", sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .36rem .85rem; background: rgba(255,255,255,.05); }
.deq-eq { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--color-accent); line-height: 1; }
.deq-result { display: flex; flex-direction: column; align-items: center; gap: .35rem; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: .6rem 1.6rem; }
.deq-result__l { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3rem); color: #fff; letter-spacing: -.01em; line-height: 1; }
.deq-result__t { font-family: "Space Grotesk", sans-serif; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* --- TOP hero上下余白 --- */
/* 先頭 eyebrow「SHARL — Design Strategy Firm」の高さを、他ページの先頭帯(py-20 md:py-28)に合わせる。
   → header(57)+top-pad で eyebrow が 137px(モバイル py-20)/169px(デスクトップ py-28) に揃う。下は hero の余韻で広め。 */
.s-hero[data-astro-cid-j7pv25f6] {
  min-height: unset;
  padding-block: 5rem clamp(100px,12vw,160px);
}
@media (min-width: 768px) {
  .s-hero[data-astro-cid-j7pv25f6] { padding-top: 7rem; }
}

/* ── グローバルナビ テキストフリップ ── */
.nav-flip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
}
.nav-front {
  display: block;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.nav-back {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  letter-spacing: .03em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
/* 非アクティブ: 英語表示、ホバーで日本語 */
.nav-flip:hover .nav-front { transform: translateY(-120%); opacity: 0; }
.nav-flip:hover .nav-back  { transform: translateX(-50%) translateY(0); opacity: 1; }
/* アクティブ: 日本語表示、ホバーで英語 */
.nav-flip.nav-active .nav-front { transform: translateY(-120%); opacity: 0; }
.nav-flip.nav-active .nav-back  { transform: translateX(-50%) translateY(0); opacity: 1; }
.nav-flip.nav-active:hover .nav-front { transform: translateY(0); opacity: 1; }
.nav-flip.nav-active:hover .nav-back  { transform: translateX(-50%) translateY(120%); opacity: 0; }

/* ── 代表写真：モバイルでセンタリング ── */
@media (max-width: 767px) {
  .kosaka-photo-col { display: flex; justify-content: center; }
}

/* ── フォーム入力エラースタイル ── */
input.ferr,.f-input.ferr,textarea.ferr{border-color:var(--color-accent)!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important;transition:border-color .15s,box-shadow .15s}
input[type=checkbox].ferr{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}
.ferr-msg{color:var(--color-accent);font-size:.78rem;margin-top:.35rem;display:block}