/*
 * EQ DESIGN — HEURISTIC Landing Page
 * WordPress テンプレート用スタイルシート
 * テーマの functions.php で以下のようにエンキューしてください:
 *
 *   wp_enqueue_style(
 *     'eq-top02',
 *     get_template_directory_uri() . '/css/eq-top02.css',
 *     [],
 *     '1.0.0'
 *   );
 *
 * Googleフォント（functions.php または wp_head でエンキュー推奨）:
 *   https://fonts.googleapis.com/css2?family=Rubik:wght@900&family=Archivo:ital,wght@0,600;1,800&family=Noto+Sans+JP:wght@400;700;900&family=Space+Mono:wght@400&display=swap
 * ============================================================ */

/* ============================================================
   カスタムプロパティ（デザイントークン）
   ============================================================ */
:root {
 --bg: #08080b;
 --bg-2: #0e0e13;
 --bg-3: #141420;
 --paper: #ffffff;
 --ink: #08080b;

 --blue: #1a52ec;
 --blue-bright: #3d7bff;
 --blue-deep: #0a2a9e;
 --blue-glow: rgba(61, 123, 255, 0.55);

 --w-1: rgba(255, 255, 255, 0.92);
 --w-2: rgba(255, 255, 255, 0.62);
 --w-3: rgba(255, 255, 255, 0.38);
 --line: rgba(255, 255, 255, 0.12);
 --line-strong: rgba(255, 255, 255, 0.28);

 /* ファネルパレット */
 --f-attention: #1f3a63;
 --f-interest: #2a5fa6;
 --f-desire: #1f9e93;
 --f-memory: #e0b53e;
 --f-action: #c0392b;
 --f-repeat: #c8553a;
 --f-loyalty: #e0b53e;
 --f-share: #1f9e93;
 --f-ambassador: #2f6bb0;

 --maxw: 1280px;
 --ease: cubic-bezier(0.22, 1, 0.36, 1);

 --font-disp: "Rubik", system-ui, sans-serif;
 --font-eng: "Archivo", system-ui, sans-serif;
 --font-jp: "Noto Sans JP", system-ui, sans-serif;
 --font-mono: "Space Mono", ui-monospace, monospace;
}

/* ============================================================
   リセット・ベース
   ============================================================ */
.eq-lp * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
.eq-lp {
 scroll-behavior: smooth;
}
body.eq-lp {
 background: var(--bg);
 color: var(--w-1);
 font-family: var(--font-jp);
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 line-height: 1.6;
}
.eq-lp a {
 color: inherit;
 text-decoration: none;
}
.eq-lp img {
 display: block;
 max-width: 100%;
}
.eq-lp ::selection {
 background: var(--blue);
 color: #fff;
}

/* スクロールバー */
.eq-lp ::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
.eq-lp ::-webkit-scrollbar-track {
 background: #000;
}
.eq-lp ::-webkit-scrollbar-thumb {
 background: #222;
 border: 2px solid #000;
}
.eq-lp ::-webkit-scrollbar-thumb:hover {
 background: var(--blue);
}
.palmtop {
 display: block !important;
}
@media screen and (min-width: 768px) {
 .palmtop {
  display: none !important;
 }
}

.laptop {
 display: none !important;
}
@media screen and (min-width: 768px) {
 .laptop {
  display: block !important;
 }
}
/* ============================================================
   タイポグラフィ
   ============================================================ */
.eq-lp .eyebrow {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 letter-spacing: 0.34em;
 text-transform: uppercase;
 color: var(--blue-bright);
 display: inline-flex;
 align-items: center;
 gap: 0.7em;
}
.eq-lp .eyebrow::before {
 content: "";
 width: 26px;
 height: 1px;
 background: var(--blue-bright);
 display: inline-block;
}
.eq-lp .eyebrow.center::before {
 display: none;
}

.eq-lp .label-mono {
 font-family: var(--font-mono);
 font-size: 0.68rem;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--w-3);
}

.eq-lp h2.sec-title {
 font-family: var(--font-jp);
 font-weight: 900;
 font-size: clamp(2rem, 4.6vw, 3.6rem);
 line-height: 1.12;
 letter-spacing: -0.01em;
 text-wrap: balance;
}
.eq-lp .eng-head {
 font-family: var(--font-eng);
 font-weight: 900;
 font-style: italic;
 letter-spacing: -0.01em;
}

/* ============================================================
   Qロゴ（CSS再現）
   ============================================================ */
.eq-lp .qmark {
 position: relative;
 display: inline-block;
 border-radius: 50%;
 background: currentColor;
 aspect-ratio: 1;
}
.eq-lp .qmark::after {
 content: "";
 position: absolute;
 right: -6%;
 bottom: -2%;
 width: 42%;
 height: 42%;
 background: currentColor;
 border-radius: 0 0 60% 0;
 transform: rotate(8deg);
}
.eq-lp .qmark .pupil {
 position: absolute;
 inset: 18%;
 border-radius: 50%;
 background: var(--bg);
}
.eq-lp .qmark .glint {
 position: absolute;
 top: 24%;
 right: 26%;
 width: 26%;
 height: 26%;
 border-radius: 50%;
 background: currentColor;
}

.eq-lp .brandmark {
 display: inline-flex;
 align-items: center;
 gap: 0.55em;
}
.eq-lp .brandmark .qmark {
 width: 1.5em;
 height: 1.5em;
 color: #fff;
}
.eq-lp .brandmark .wm {
 font-family: var(--font-eng);
 font-weight: 900;
 font-style: italic;
 font-size: 1.15em;
 letter-spacing: -0.02em;
}
.eq-lp .brandmark .wm span {
 font-weight: 800;
}
.nav a img,
.footer a img {
 height: 1.3em;
 width: auto;
 display: block;
 filter: brightness(0) invert(1);
}
@media screen and (min-width: 768px) {
 .nav a img,
 .footer a img {
  height: 2em;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
 }
}
/* ============================================================
   HEURISTICワードマーク
   ============================================================ */
.eq-lp .heuristic {
 font-family: var(--font-disp);
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.01em;
 line-height: 0.86;
 position: relative;
 color: transparent;
 -webkit-text-stroke: clamp(2px, 0.45vw, 5px) #fff;
 display: inline-block;
}
.eq-lp .heuristic.solid {
 color: #fff;
 -webkit-text-stroke: 0;
}

/* グリッチエフェクト */
.eq-lp .heuristic.glitch::before,
.eq-lp .heuristic.glitch::after {
 content: attr(data-text);
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 color: transparent;
}
.eq-lp .heuristic.glitch::before {
 -webkit-text-stroke: inherit;
 -webkit-text-stroke-color: var(--blue-bright);
 animation: glitch-x 3.6s infinite steps(1);
 mix-blend-mode: screen;
}
.eq-lp .heuristic.glitch::after {
 -webkit-text-stroke: inherit;
 -webkit-text-stroke-color: #ff2e63;
 animation: glitch-y 4.2s infinite steps(1);
 mix-blend-mode: screen;
}

@keyframes glitch-x {
 0%,
 92%,
 100% {
  transform: translate(0);
  clip-path: inset(0);
 }
 93% {
  transform: translate(-4px, 0);
  clip-path: inset(10% 0 60% 0);
 }
 95% {
  transform: translate(5px, 0);
  clip-path: inset(70% 0 8% 0);
 }
 97% {
  transform: translate(-3px, 0);
  clip-path: inset(40% 0 40% 0);
 }
}
@keyframes glitch-y {
 0%,
 90%,
 100% {
  transform: translate(0);
  clip-path: inset(0);
 }
 91% {
  transform: translate(4px, 2px);
  clip-path: inset(50% 0 30% 0);
 }
 94% {
  transform: translate(-5px, -2px);
  clip-path: inset(20% 0 55% 0);
 }
 98% {
  transform: translate(3px, 1px);
  clip-path: inset(80% 0 5% 0);
 }
}
@media (prefers-reduced-motion: reduce) {
 .eq-lp .heuristic.glitch::before,
 .eq-lp .heuristic.glitch::after {
  animation: none;
 }
}

/* ============================================================
   レイアウトヘルパー
   ============================================================ */
.eq-lp .wrap {
 max-width: var(--maxw);
 margin: 0 auto;
 padding: 0 clamp(20px, 5vw, 64px);
}
.eq-lp section {
 position: relative;
}
.eq-lp .section-pad {
 padding: clamp(90px, 12vh, 160px) 0;
}

/* クロップマーク装飾 */
.eq-lp .cropmark {
 position: absolute;
 width: 18px;
 height: 18px;
 pointer-events: none;
 opacity: 0.5;
}
.eq-lp .cropmark::before,
.eq-lp .cropmark::after {
 content: "";
 position: absolute;
 background: var(--w-3);
}
.eq-lp .cropmark::before {
 width: 1px;
 height: 100%;
 left: 50%;
}
.eq-lp .cropmark::after {
 height: 1px;
 width: 100%;
 top: 50%;
}
.eq-lp .cropmark.tl {
 top: 24px;
 left: 24px;
}
.eq-lp .cropmark.tr {
 top: 24px;
 right: 24px;
}
.eq-lp .cropmark.bl {
 bottom: 24px;
 left: 24px;
}
.eq-lp .cropmark.br {
 bottom: 24px;
 right: 24px;
}

/* ============================================================
   リビールアニメーション（JS駆動）
   ============================================================ */
.eq-lp .reveal,
.eq-lp .reveal-x {
 opacity: 0;
 will-change: opacity, transform;
}
.eq-lp .clip-up {
 opacity: 0;
 will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
 .eq-lp .reveal,
 .eq-lp .reveal-x,
 .eq-lp .clip-up {
  opacity: 1 !important;
  transform: none !important;
 }
}

/* ============================================================
   NAV
   ============================================================ */
.eq-lp .nav {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 60;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px clamp(20px, 5vw, 64px);
 transition:
  background 0.4s,
  backdrop-filter 0.4s,
  padding 0.4s,
  border-color 0.4s;
 border-bottom: 1px solid transparent;
}
.eq-lp .nav.scrolled {
 background: rgba(8, 8, 11, 0.72);
 backdrop-filter: blur(14px);
 padding: 12px clamp(20px, 5vw, 64px);
 border-bottom: 1px solid var(--line);
}
.eq-lp .nav .links {
 display: flex;
 gap: 30px;
 align-items: center;
}
.eq-lp .nav .links a {
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--w-2);
 transition: color 0.25s;
 position: relative;
}
.eq-lp .nav .links a:hover {
 color: #fff;
}
.eq-lp .nav .links a::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -6px;
 height: 1px;
 width: 0;
 background: var(--blue-bright);
 transition: width 0.3s var(--ease);
}
.eq-lp .nav .links a:hover::after {
 width: 100%;
}
.eq-lp .nav .cta-mini {
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 border: 1px solid var(--line-strong);
 padding: 9px 18px;
 border-radius: 2px;
 color: #fff;
 transition: all 0.25s;
}
.eq-lp .nav .cta-mini:hover {
 background: var(--blue);
 border-color: var(--blue);
}
@media (max-width: 860px) {
 .eq-lp .nav .links {
  display: none;
 }
}

/* ============================================================
   HERO
   ============================================================ */
.eq-lp .hero {
 position: relative;
 min-height: 100svh;
 display: flex;
 align-items: center;
 overflow: hidden;
 background: var(--bg);
 padding: clamp(96px, 13vh, 150px) 0 clamp(70px, 9vh, 110px);
}
.eq-lp .hero .grid-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 opacity: 0.5;
 background-image:
  linear-gradient(var(--line) 1px, transparent 1px),
  linear-gradient(90deg, var(--line) 1px, transparent 1px);
 background-size: 64px 64px;
 mask-image: radial-gradient(
  ellipse 80% 70% at 50% 40%,
  #000 30%,
  transparent 78%
 );
}
.eq-lp .hero .glow {
 position: absolute;
 z-index: 0;
 border-radius: 50%;
 filter: blur(120px);
 opacity: 0.5;
 pointer-events: none;
}
.eq-lp .hero .glow.b1 {
 width: 46vw;
 height: 46vw;
 background: var(--blue);
 left: -12vw;
 top: -10vw;
}
.eq-lp .hero .glow.b2 {
 width: 34vw;
 height: 34vw;
 background: var(--blue-deep);
 right: -8vw;
 bottom: -12vw;
 opacity: 0.6;
}

.eq-lp .hero .wrap {
 position: relative;
 z-index: 5;
 width: 100%;
}
.eq-lp .hero-inner {
 display: grid;
 align-items: center;
 gap: clamp(20px, 4vw, 60px);
}

/* バリアントA（デフォルト）：テキスト左、キャラ右 */
.eq-lp .hero[data-variant="A"] .hero-inner {
 grid-template-columns: 1.15fr 0.85fr;
}
.eq-lp .hero[data-variant="A"] .hero-char {
 justify-self: end;
}
/* バリアントB：センター */
.eq-lp .hero[data-variant="B"] .hero-inner {
 grid-template-columns: 1fr;
 justify-items: center;
 text-align: center;
}
.eq-lp .hero[data-variant="B"] .hero-copy {
 order: 2;
 max-width: 760px;
}
.eq-lp .hero[data-variant="B"] .hero-char {
 order: 1;
}
.eq-lp .hero[data-variant="B"] .eyebrow {
 justify-content: center;
}
.eq-lp .hero[data-variant="B"] .heuristic-wrap,
.eq-lp .hero[data-variant="B"] .hero-cta {
 justify-content: center;
}
.eq-lp .hero[data-variant="B"] .hero-sub {
 margin-left: auto;
 margin-right: auto;
}
/* バリアントC：キャラ左、テキスト右 */
.eq-lp .hero[data-variant="C"] .hero-inner {
 grid-template-columns: 0.9fr 1.1fr;
}
.eq-lp .hero[data-variant="C"] .hero-char {
 order: 1;
 justify-self: start;
}
.eq-lp .hero[data-variant="C"] .hero-copy {
 order: 2;
}

@media (max-width: 900px) {
 .eq-lp .hero[data-variant] .hero-inner {
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
 }
 .eq-lp .hero[data-variant] .hero-char {
  order: 2 !important;
  justify-self: center !important;
 }
 .eq-lp .hero[data-variant] .hero-copy {
  order: 1 !important;
 }
 .eq-lp .hero .eyebrow,
 .eq-lp .hero .heuristic-wrap,
 .eq-lp .hero .hero-cta {
  justify-content: center;
 }
}

.eq-lp .hero-copy {
 max-width: 680px;
}
.eq-lp .heuristic-wrap {
 display: flex;
 align-items: flex-start;
 margin: 0.3em 0 0.15em;
 line-height: 1;
}
.eq-lp .hero .heuristic {
 font-size: clamp(3.4rem, 11vw, 9.5rem);
}
.eq-lp .hero-reading {
 font-family: var(--font-jp);
 font-size: 0.95rem;
 letter-spacing: 0.5em;
 color: var(--w-3);
 margin-bottom: 1.4rem;
 padding-left: 0.2em;
}
.eq-lp .hero-jp {
 font-weight: 900;
 font-size: clamp(1.5rem, 3.4vw, 2.7rem);
 line-height: 1.5;
 letter-spacing: 0.01em;
 margin-bottom: 1.3rem;
}
.eq-lp .hero-jp .hl {
 color: var(--blue-bright);
}
.eq-lp .hero-sub {
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 600;
 color: var(--w-2);
 font-size: clamp(0.95rem, 1.4vw, 1.25rem);
 line-height: 1.6;
 max-width: 50ch;
}
.eq-lp .hero-cta {
 display: flex;
 gap: 16px;
 margin-top: 2.2rem;
 flex-wrap: wrap;
}

/* ボタン */
.eq-lp .btn {
 display: inline-flex;
 align-items: center;
 gap: 0.7em;
 cursor: pointer;
 border: none;
 font-family: var(--font-mono);
 font-size: 0.8rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 16px 28px;
 border-radius: 2px;
 transition: all 0.3s var(--ease);
}
.eq-lp .btn .arr {
 transition: transform 0.3s var(--ease);
}
.eq-lp .btn:hover .arr {
 transform: translateX(5px);
}
.eq-lp .btn-primary {
 background: var(--blue);
 color: #fff;
}
.eq-lp .btn-primary:hover {
 background: var(--blue-bright);
 box-shadow:
  0 0 0 1px var(--blue-bright),
  0 14px 40px -10px var(--blue-glow);
}
.eq-lp .btn-ghost {
 background: transparent;
 color: #fff;
 border: 1px solid var(--line-strong);
}
.eq-lp .btn-ghost:hover {
 border-color: #fff;
 background: rgba(255, 255, 255, 0.05);
}

/* ヒーローキャラクター */
.eq-lp .hero-char {
 position: relative;
}
.eq-lp .hero-char .char-frame {
 position: relative;
 width: clamp(280px, 38vw, 560px);
}
.eq-lp .hero-char img.char-img,
.eq-lp .hero-char .char-placeholder {
 width: 100%;
 height: clamp(330px, 48vw, 660px);
 object-fit: contain;
 background: transparent;
}
@media screen and (min-width: 768px) {
 .eq-lp .hero-char img.char-img,
 .eq-lp .hero-char .char-placeholder {
  width: 100%;
  height: clamp(440px, 48vw, 660px);
  object-fit: contain;
  background: transparent;
 }
}
.eq-lp .char-placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(61, 123, 255, 0.05);
 border: 1.5px dashed rgba(255, 255, 255, 0.2);
 border-radius: 4px;
 color: rgba(255, 255, 255, 0.5);
 font-family: var(--font-mono);
 font-size: 0.8rem;
 letter-spacing: 0.1em;
 text-align: center;
}
.eq-lp .char-placeholder span {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.eq-lp .char-placeholder small {
 font-size: 0.65rem;
 letter-spacing: 0.2em;
 color: var(--blue-bright);
 display: block;
}
.eq-lp .hero-char .char-ring {
 position: absolute;
 inset: 5% -6% -6% -6%;
 z-index: -1;
 border: 1px solid var(--line);
 border-radius: 50% 50% 0 0;
}
@media screen and (min-width: 768px) {
 .eq-lp .hero-char .char-ring {
  position: absolute;
  inset: -6% -6% -6% -6%;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: 50% 50% 0 0;
 }
}
.eq-lp .hero-char .char-glow {
 position: absolute;
 left: 50%;
 top: 55%;
 transform: translate(-50%, -50%);
 width: 90%;
 height: 90%;
 background: radial-gradient(circle, var(--blue) 0%, transparent 65%);
 filter: blur(40px);
 opacity: 0.55;
 z-index: -2;
}
.eq-lp .hero-char .vlabel {
 position: absolute;
 right: -8px;
 bottom: 8%;
 writing-mode: vertical-rl;
 font-family: var(--font-mono);
 font-size: 0.66rem;
 letter-spacing: 0.3em;
 color: var(--w-3);
 text-transform: uppercase;
}
.eq-lp .hero-char .char-name {
 position: absolute;
 left: 0;
 bottom: -2%;
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 900;
 font-size: 1rem;
 letter-spacing: 0.04em;
 color: #fff;
}
.eq-lp .hero-char .char-name small {
 display: block;
 font-family: var(--font-mono);
 font-style: normal;
 font-weight: 400;
 font-size: 0.6rem;
 letter-spacing: 0.24em;
 color: var(--blue-bright);
 margin-top: 2px;
}

/* スクロールキュー */
.eq-lp .scroll-cue {
 position: absolute;
 left: 50%;
 bottom: 26px;
 transform: translateX(-50%);
 z-index: 6;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 font-family: var(--font-mono);
 font-size: 0.6rem;
 letter-spacing: 0.3em;
 color: var(--w-3);
 text-transform: uppercase;
}
.eq-lp .scroll-cue .bar {
 width: 1px;
 height: 46px;
 background: linear-gradient(var(--w-3), transparent);
 position: relative;
 overflow: hidden;
}
.eq-lp .scroll-cue .bar::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 40%;
 background: var(--blue-bright);
 animation: cueRun 1.8s var(--ease) infinite;
}
@keyframes cueRun {
 0% {
  top: -40%;
 }
 100% {
  top: 100%;
 }
}

/* ティッカー */
.eq-lp .ticker {
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 background: var(--bg);
 overflow: hidden;
 white-space: nowrap;
 padding: 14px 0;
 position: relative;
 z-index: 5;
}
.eq-lp .ticker-track {
 display: inline-flex;
 gap: 48px;
 will-change: transform;
}
.eq-lp .ticker span {
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 800;
 font-size: 1.05rem;
 letter-spacing: 0.02em;
 color: var(--w-2);
 display: inline-flex;
 align-items: center;
 gap: 48px;
}
.eq-lp .ticker span > span::after {
 content: "◆";
 color: var(--blue-bright);
 font-style: normal;
 font-size: 0.7rem;
 margin-left: 48px;
}

/* ============================================================
   CONCEPT
   ============================================================ */
.eq-lp .concept {
 background: var(--bg);
}
.eq-lp .concept .big-quote {
 font-weight: 900;
 font-size: clamp(1.8rem, 4.4vw, 3.8rem);
 line-height: 1.4;
 letter-spacing: -0.01em;
 max-width: 18ch;
 text-wrap: balance;
}
.eq-lp .concept .big-quote .hl {
 color: var(--blue-bright);
}
.eq-lp .concept .grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(30px, 6vw, 90px);
 align-items: center;
}
.eq-lp .concept .side p {
 color: var(--w-2);
 font-size: 1.02rem;
 margin-bottom: 1.1rem;
 max-width: 50ch;
}
.eq-lp .concept .side .eng {
 font-family: var(--font-eng);
 font-style: italic;
 color: var(--w-3);
 font-size: 0.95rem;
 line-height: 1.7;
 margin-top: 1.6rem;
 border-left: 2px solid var(--blue);
 padding-left: 18px;
}
.eq-lp .concept .watermark {
 position: absolute;
 right: 0%;
 top: 50%;
 transform: translateY(-50%);
 font-family: var(--font-eng);
 font-weight: 900;
 font-style: italic;
 font-size: 24vw;
 color: rgba(255, 255, 255, 0.025);
 pointer-events: none;
 z-index: 0;
 line-height: 1;
}
@media screen and (min-width: 768px) {
 .eq-lp .concept .watermark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-eng);
  font-weight: 900;
  font-style: italic;
  font-size: 24vw;
  color: rgba(255, 255, 255, 0.025);
  pointer-events: none;
  z-index: 0;
  line-height: 1;
 }
}
@media (max-width: 860px) {
 .eq-lp .concept .grid {
  grid-template-columns: 1fr;
  gap: 40px;
 }
}
.concept-eyebrow-wrap {
 margin-bottom: clamp(34px, 5vw, 60px);
}
/* ============================================================
   SERVICES
   ============================================================ */
.eq-lp .services {
 background: var(--paper);
 color: var(--ink);
}
.eq-lp .services .sec-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 24px;
 flex-wrap: wrap;
 margin-bottom: clamp(40px, 6vw, 72px);
}
.eq-lp .services .eyebrow {
 color: var(--blue);
}
.eq-lp .services .eyebrow::before {
 background: var(--blue);
}
.eq-lp .services h2.sec-title {
 color: var(--ink);
}
.eq-lp .services .sec-head .count {
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 900;
 font-size: clamp(2.4rem, 6vw, 4.4rem);
 color: rgba(0, 0, 0, 0.08);
 line-height: 0.8;
}
.eq-lp .svc-list {
 display: flex;
 flex-direction: column;
}
.eq-lp .svc {
 display: grid;
 grid-template-columns: 60px 1.1fr 1.4fr auto;
 gap: clamp(18px, 3vw, 28px);
 align-items: start;
 padding: clamp(34px, 5vw, 56px) 0;
 border-top: 1px solid rgba(0, 0, 0, 0.12);
 position: relative;
 transition: background 0.4s;
}
.eq-lp .svc:last-child {
 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.eq-lp .svc:hover {
 background: #f5f7fb;
}
.eq-lp .svc .num {
 font-family: var(--font-mono);
 font-size: 0.9rem;
 letter-spacing: 0.1em;
 color: var(--blue);
 padding-top: 0.4em;
}
.eq-lp .svc .svc-titles h3 {
 font-family: var(--font-jp);
 font-weight: 900;
 font-size: clamp(1.25rem, 2.3vw, 1.85rem);
 line-height: 1.3;
 letter-spacing: -0.01em;
}
.eq-lp .svc .svc-titles .en {
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 800;
 color: var(--blue);
 font-size: 0.86rem;
 letter-spacing: 0.02em;
 margin-top: 0.5em;
 text-transform: uppercase;
}
.eq-lp .svc .svc-body {
 color: #37373f;
 font-size: 0.96rem;
 line-height: 1.85;
}
.eq-lp .svc .svc-media {
 width: clamp(140px, 18vw, 340px);
}
.eq-lp .svc .svc-media img,
.eq-lp .svc .svc-media .img-placeholder {
 width: 100%;
 height: clamp(200px, 13vw, 170px);
 object-fit: cover;
 border-radius: 4px;
}
.eq-lp .svc .img-placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(61, 123, 255, 0.05);
 border: 1.5px dashed rgba(0, 0, 0, 0.2);
 color: rgba(0, 0, 0, 0.4);
 font-family: var(--font-mono);
 font-size: 0.7rem;
}
.eq-lp .svc .tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 16px;
}
.eq-lp .svc .tags span {
 font-family: var(--font-mono);
 font-size: 0.66rem;
 letter-spacing: 0.08em;
 color: #555;
 border: 1px solid rgba(0, 0, 0, 0.16);
 padding: 4px 10px;
 border-radius: 2px;
 text-transform: uppercase;
}
.eq-lp .svc .go {
 position: absolute;
 right: 0;
 top: clamp(34px, 5vw, 56px);
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 1px solid rgba(0, 0, 0, 0.18);
 display: grid;
 place-items: center;
 transition: all 0.3s var(--ease);
 opacity: 0;
 transform: translateX(-8px);
}
.eq-lp .svc:hover .go {
 opacity: 1;
 transform: none;
 background: var(--blue);
 border-color: var(--blue);
 color: #fff;
}
@media (max-width: 980px) {
 .eq-lp .svc {
  grid-template-columns: 30px 1fr;
  gap: 16px 18px;
 }
 .eq-lp .svc .svc-media {
  grid-column: 1 / -1;
  width: min(100%, 360px);
 }
 .eq-lp .svc .svc-body {
  grid-column: 1 / -1;
 }
 .eq-lp .svc .go {
  display: none;
 }
}
.sec-title--mt {
 margin-top: 0.4em;
}
.svc--d1 {
 transition-delay: 0.06s;
}
.svc--d2 {
 transition-delay: 0.12s;
}
.svc--d3 {
 transition-delay: 0.18s;
}

/* ============================================================
   FUNNEL
   ============================================================ */
.eq-lp .funnel {
 background: var(--bg);
 overflow: hidden;
}
.eq-lp .funnel .market-head {
 margin-bottom: clamp(40px, 6vw, 64px);
}
.eq-lp .funnel .market-head .eng-head {
 font-size: clamp(1.1rem, 2.4vw, 1.7rem);
 color: var(--blue-bright);
 font-style: italic;
}
.eq-lp .funnel .market-head h2 {
 font-weight: 900;
 font-size: clamp(1.8rem, 5vw, 4rem);
 line-height: 1.15;
 letter-spacing: -0.01em;
 margin-top: 0.3em;
 text-wrap: balance;
}
.eq-lp .funnel .market-head h2 .em {
 color: var(--blue-bright);
}

.eq-lp .funnel-layout {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: clamp(36px, 6vw, 80px);
 align-items: start;
}
@media (max-width: 920px) {
 .eq-lp .funnel-layout {
  grid-template-columns: 1fr;
  gap: 48px;
 }
}

.eq-lp .funnel-cap {
 display: flex;
 justify-content: space-between;
 font-family: var(--font-mono);
 font-size: 0.7rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--w-3);
 margin-bottom: 14px;
}
.eq-lp .funnel-row {
 position: relative;
 color: #fff;
 text-align: center;
 padding: 14px 0;
 margin: 0 auto 4px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 transition: filter 0.3s;
 clip-path: polygon(
  var(--clipL, 8%) 0,
  calc(100% - var(--clipL, 8%)) 0,
  calc(100% - var(--clipR, 12%)) 100%,
  var(--clipR, 12%) 100%
 );
}
.eq-lp .funnel-row:hover {
 filter: brightness(1.18);
}
.eq-lp .funnel-row .jp {
 font-weight: 900;
 font-size: clamp(1rem, 1.8vw, 1.35rem);
 letter-spacing: 0.04em;
}
.eq-lp .funnel-row .en {
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 800;
 font-size: 0.7rem;
 letter-spacing: 0.1em;
 opacity: 0.85;
 text-transform: uppercase;
}
.eq-lp .funnel-divider {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 16px 0;
 color: var(--w-3);
 font-family: var(--font-mono);
 font-size: 0.66rem;
 letter-spacing: 0.2em;
 text-transform: uppercase;
}
.eq-lp .funnel-divider::before,
.eq-lp .funnel-divider::after {
 content: "";
 height: 1px;
 flex: 1;
 background: var(--line);
}

.eq-lp .funnel-side h3 {
 font-weight: 900;
 font-size: clamp(1.3rem, 2.4vw, 1.9rem);
 margin-bottom: 1rem;
 letter-spacing: -0.01em;
}
.eq-lp .funnel-side p {
 color: var(--w-2);
 font-size: 0.98rem;
 margin-bottom: 1rem;
 max-width: 46ch;
}
.eq-lp .funnel-side .tools {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 1.4rem;
}
.eq-lp .funnel-side .tools span {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 border: 1px solid var(--line-strong);
 padding: 7px 14px;
 border-radius: 2px;
 color: var(--w-1);
}
.eq-lp .funnel-char {
 position: relative;
 margin-top: 30px;
}
@media (max-width: 767px) {
 .funnel-side {
  display: flex;
  flex-direction: column;
 }
 .funnel-char {
  order: -1;
  padding-bottom: 20px;
 }
}
.eq-lp .funnel-char img.eko-img,
.eq-lp .funnel-char .funnel-ph {
 width: min(72%, 300px);
 height: clamp(360px, 42vw, 500px);
 margin: 0 auto;
 object-fit: contain;
}
.eq-lp .funnel-char .funnel-ph {
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(61, 123, 255, 0.05);
 border: 1.5px dashed rgba(255, 255, 255, 0.2);
 border-radius: 4px;
 color: rgba(255, 255, 255, 0.5);
 font-family: var(--font-mono);
 font-size: 0.8rem;
}
.eq-lp .funnel-char .char-name {
 text-align: center;
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 900;
 margin-top: 10px;
}
.eq-lp .funnel-char .char-name small {
 display: block;
 font-family: var(--font-mono);
 font-style: normal;
 font-weight: 400;
 font-size: 0.6rem;
 letter-spacing: 0.24em;
 color: var(--blue-bright);
}
.funnel-row--attention {
 width: 100%;
 background: var(--f-attention);
 --clipL: 6%;
 --clipR: 11%;
}
.funnel-row--interest {
 width: 91%;
 background: var(--f-interest);
 --clipL: 6%;
 --clipR: 11%;
 transition-delay: 0.07s;
}
.funnel-row--desire {
 width: 82%;
 background: var(--f-desire);
 --clipL: 6%;
 --clipR: 11%;
 transition-delay: 0.14s;
}
.funnel-row--memory {
 width: 73%;
 background: var(--f-memory);
 --clipL: 6%;
 --clipR: 11%;
 transition-delay: 0.21s;
}
.funnel-row--action {
 width: 64%;
 background: var(--f-action);
 --clipL: 6%;
 --clipR: 11%;
 transition-delay: 0.28s;
}
.funnel-row--repeat {
 width: 64%;
 background: var(--f-repeat);
 --clipL: 6%;
 --clipR: 6%;
 transition-delay: 0.07s;
}
.funnel-row--loyalty {
 width: 73%;
 background: var(--f-loyalty);
 --clipL: 6%;
 --clipR: 6%;
 transition-delay: 0.14s;
}
.funnel-row--share {
 width: 82%;
 background: var(--f-share);
 --clipL: 6%;
 --clipR: 6%;
 transition-delay: 0.21s;
}
.funnel-row--ambassador {
 width: 91%;
 background: var(--f-ambassador);
 --clipL: 6%;
 --clipR: 6%;
 transition-delay: 0.28s;
}
.funnel-cap--bottom {
 margin-top: 14px;
}
/* ============================================================
   COMPANY
   ============================================================ */
.eq-lp .company {
 background: var(--paper);
 color: var(--ink);
}
.eq-lp .company .grid {
 display: grid;
 grid-template-columns: 0.8fr 1.2fr;
 gap: clamp(36px, 6vw, 90px);
 align-items: start;
}
@media (max-width: 860px) {
 .eq-lp .company .grid {
  grid-template-columns: 1fr;
  gap: 40px;
 }
}
.eq-lp .company .eyebrow {
 color: var(--blue);
}
.eq-lp .company .eyebrow::before {
 background: var(--blue);
}
.eq-lp .company h2.sec-title {
 color: var(--ink);
 margin-top: 0.3em;
}
.eq-lp .company .lead {
 color: #444;
 font-size: 1.02rem;
 margin-top: 1.4rem;
 max-width: 45ch;
}
.eq-lp .prof {
 border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.eq-lp .prof .row {
 display: grid;
 grid-template-columns: 160px 1fr;
 gap: 20px;
 padding: 20px 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.eq-lp .prof .row dt {
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--blue);
 padding-top: 0.2em;
}
.eq-lp .prof .row dd {
 font-size: 1rem;
 color: var(--ink);
 font-weight: 500;
}
.eq-lp .prof .row dd .en {
 display: block;
 font-family: var(--font-eng);
 font-style: italic;
 font-weight: 600;
 color: #888;
 font-size: 0.85rem;
 margin-top: 2px;
}
@media (max-width: 520px) {
 .eq-lp .prof .row {
  grid-template-columns: 1fr;
  gap: 4px;
 }
}
.link-blue {
 color: var(--blue);
}

/* ============================================================
   CONTACT
   ============================================================ */
.eq-lp .contact {
 background: var(--bg);
 overflow: hidden;
}
.eq-lp .contact .glow {
 position: absolute;
 width: 50vw;
 height: 50vw;
 border-radius: 50%;
 background: var(--blue);
 filter: blur(140px);
 opacity: 0.28;
 left: 50%;
 top: -10%;
 transform: translateX(-50%);
}
.eq-lp .contact-head {
 text-align: center;
 margin-bottom: clamp(40px, 6vw, 70px);
 position: relative;
 z-index: 2;
}
.eq-lp .contact-head p {
 color: var(--w-2);
 max-width: 60ch;
 margin: 1rem auto 0;
}
.eq-lp .contact-grid {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: clamp(30px, 5vw, 64px);
 position: relative;
 z-index: 2;
 align-items: start;
}
@media (max-width: 860px) {
 .eq-lp .contact-grid {
  grid-template-columns: 1fr;
  gap: 40px;
 }
}

.eq-lp .form-card {
 background: var(--bg-2);
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: clamp(26px, 4vw, 44px);
}

/* -------------------------------------------------------------
   CF7 が挿入する <p> タグのリセット
   ------------------------------------------------------------- */
.eq-lp .form-card .wpcf7 p {
 margin: 0;
 padding: 0;
}
.eq-lp .form-card .wpcf7 br {
 display: none;
}

.eq-lp .field {
 margin-bottom: 22px;
}
.eq-lp .field label {
 display: block;
 font-family: var(--font-mono);
 font-size: 0.7rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--w-2);
 margin-bottom: 9px;
}
.eq-lp .field label .req {
 color: var(--blue-bright);
}

/* wpcf7-form-control-wrap をブロック化して隙間をなくす */
.eq-lp .field .wpcf7-form-control-wrap {
 display: block;
}

.eq-lp .field input,
.eq-lp .field textarea,
.eq-lp .field select {
 width: 100%;
 background: #000;
 border: 1px solid var(--line);
 border-radius: 2px;
 color: #fff;
 font-family: var(--font-jp);
 font-size: 0.96rem;
 padding: 13px 15px;
 box-sizing: border-box;
 transition:
  border-color 0.25s,
  box-shadow 0.25s;
}
.eq-lp .field textarea {
 resize: vertical;
 min-height: 120px;
}
.eq-lp .field input:focus,
.eq-lp .field textarea:focus,
.eq-lp .field select:focus {
 outline: none;
 border-color: var(--blue-bright);
 box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.18);
}
.eq-lp .field.err input,
.eq-lp .field.err textarea {
 border-color: #ff2e63;
}

/* CF7 バリデーションエラー時のボーダー */
.eq-lp .field .wpcf7-not-valid {
 border-color: #ff2e63 !important;
}

.eq-lp .field .msg,
.eq-lp .field .wpcf7-not-valid-tip {
 font-family: var(--font-mono);
 font-size: 0.66rem;
 color: #ff5e82;
 margin-top: 6px;
 letter-spacing: 0.06em;
 display: block;
}

/* CF7 のフォーム全体レスポンス（送信結果メッセージ）を非表示 */
.eq-lp .wpcf7-response-output {
 display: none !important;
}

.eq-lp .form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
}
@media (max-width: 520px) {
 .eq-lp .form-row {
  grid-template-columns: 1fr;
 }
}

/* submit ボタン */
.eq-lp .wpcf7-submit,
.eq-lp .form-submit {
 width: 100%;
 justify-content: center;
 margin-top: 6px;
 cursor: pointer;
 appearance: none;
 -webkit-appearance: none;
}

/* CF7 スピナー */
.eq-lp .wpcf7-spinner {
 display: none;
}

/* -------------------------------------------------------------
   送信完了（CF7 .sent 状態）
   ------------------------------------------------------------- */
.eq-lp .wpcf7-form.sent .eq-contact-form,
.eq-lp .wpcf7-form.sent form {
 display: none;
}
.eq-lp .form-success {
 display: none;
 text-align: center;
 padding: 30px 10px;
}
.eq-lp .wpcf7-form.sent + .form-success,
.eq-lp .form-success.show {
 display: block;
 animation: popin 0.5s var(--ease);
}
@keyframes popin {
 from {
  opacity: 0;
  transform: scale(0.94);
 }
 to {
  opacity: 1;
  transform: none;
 }
}
.eq-lp .form-success .ok {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 border: 2px solid var(--blue-bright);
 display: grid;
 place-items: center;
 margin: 0 auto 18px;
 color: var(--blue-bright);
 font-size: 1.6rem;
}
.eq-lp .form-success h4 {
 font-weight: 900;
 font-size: 1.3rem;
 margin-bottom: 0.5rem;
}
.eq-lp .form-success p {
 color: var(--w-2);
 font-size: 0.92rem;
}

/* -------------------------------------------------------------
   CONTACT INFO / MAP
   ------------------------------------------------------------- */
.eq-lp .contact-info {
 display: flex;
 flex-direction: column;
 gap: 22px;
}
.eq-lp .info-block {
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: 22px;
 background: var(--bg-2);
}
.eq-lp .info-block .label-mono {
 margin-bottom: 10px;
}
.eq-lp .info-block .big {
 font-weight: 700;
 font-size: 1.05rem;
}
.eq-lp .info-block a.big:hover {
 color: var(--blue-bright);
}
.eq-lp .map-card {
 border: 1px solid var(--line);
 border-radius: 4px;
 overflow: hidden;
 background: var(--bg-2);
}
.eq-lp .map-card iframe {
 width: 100%;
 height: 230px;
 border: 0;
 filter: grayscale(1) invert(0.9) contrast(0.9);
 display: block;
}
.eq-lp .map-card .map-cap {
 padding: 14px 18px;
 font-family: var(--font-mono);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 color: var(--w-2);
 display: flex;
 justify-content: space-between;
 align-items: center;
}
fieldset {
 display: none;
}
/* -------------------------------------------------------------
   ユーティリティ（page-top02-extracted.css から移動）
   ------------------------------------------------------------- */
.eyebrow--center {
 justify-content: center;
}
.heuristic-center-wrap {
 display: flex;
 justify-content: center;
}
.heuristic--hero-contact {
 font-size: clamp(2rem, 7vw, 5rem);
 margin: 0.3em 0;
}
.address-text {
 color: var(--w-2);
 margin-top: 4px;
}
.link-blue-bright {
 color: var(--blue-bright);
}
/* ============================================================
   FOOTER
   ============================================================ */
.eq-lp .footer {
 background: #000;
 color: var(--w-2);
 padding: 60px 0 40px;
 border-top: 1px solid var(--line);
}
.eq-lp .footer .top {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 30px;
 flex-wrap: wrap;
}
.eq-lp .footer .brandmark .qmark {
 color: #fff;
}
.eq-lp .footer .f-links {
 display: flex;
 gap: 28px;
 flex-wrap: wrap;
}
.eq-lp .footer .f-links a {
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--w-2);
 transition: color 0.25s;
}
.eq-lp .footer .f-links a:hover {
 color: #fff;
}
.eq-lp .footer .bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
 margin-top: 46px;
 padding-top: 24px;
 border-top: 1px solid var(--line);
 font-family: var(--font-mono);
 font-size: 0.68rem;
 letter-spacing: 0.1em;
 color: var(--w-3);
}
.footer-tagline {
 color: var(--w-3);
 font-size: 0.85rem;
 margin-top: 14px;
 max-width: 30ch;
}
/* ============================================================
   SERVICES 詳細リンク
   PC：従来の丸い矢印ボタン
   SP：「さらに見る」の横長ボタン
   ============================================================ */
.eq-lp .svc {
 isolation: isolate;
}

/* 画像や装飾がリンクのタップを妨げないようにする */
.eq-lp .svc .svc-media,
.eq-lp .svc .svc-media img,
.eq-lp .svc::before,
.eq-lp .svc::after,
.eq-lp .svc .svc-media::before,
.eq-lp .svc .svc-media::after {
 pointer-events: none;
}

/* PC：元の丸い矢印ボタン */
.eq-lp .svc-action {
 position: absolute;
 right: 0;
 top: clamp(34px, 5vw, 56px);
 z-index: 20;
}

.eq-lp .svc-button {
 display: grid;
 place-items: center;
 width: 48px;
 height: 48px;
 min-width: 48px;
 min-height: 48px;
 padding: 0;
 border: 1px solid rgba(0, 0, 0, 0.18);
 border-radius: 50%;
 background: transparent;
 color: var(--ink);
 opacity: 0;
 transform: translateX(-8px);
 pointer-events: auto;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: all 0.3s var(--ease);
}

.eq-lp .svc-button > span {
 display: none;
}

.eq-lp .svc-button svg {
 display: block;
 width: 20px;
 height: 12px;
 flex: 0 0 auto;
 pointer-events: none;
}

.eq-lp .svc:hover .svc-button,
.eq-lp .svc-button:focus-visible {
 opacity: 1;
 transform: none;
 background: var(--blue);
 border-color: var(--blue);
 color: #fff;
}

.eq-lp .svc-button:focus-visible {
 outline: 2px solid var(--blue);
 outline-offset: 4px;
}

/* タブレットではホバーなしでも矢印を表示 */
@media screen and (min-width: 768px) and (max-width: 980px) {
 .eq-lp .svc .svc-titles {
  padding-right: 64px;
 }

 .eq-lp .svc-action {
  top: 34px;
 }

 .eq-lp .svc-button {
  opacity: 1;
  transform: none;
 }
}

/* スマホのみ「さらに見る」の横長ボタン */
@media screen and (max-width: 767px) {
 .eq-lp .svc-action {
  position: static;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  margin-top: 6px;
 }

 .eq-lp .svc-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 56px;
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  opacity: 1;
  transform: none;
  white-space: nowrap;
 }

 .eq-lp .svc-button > span {
  display: inline-block;
  width: auto;
  height: auto;
  font-family: var(--font-jp);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
 }

 .eq-lp .svc-button:active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
 }
}