*,*::before,*::after{box-sizing:border-box}

/* display を持つクラスが hidden 属性に勝ってしまうため、明示的に伏せる。
   これがないと送信後だけ出すはずの完了パネルが最初から見えてしまう */
[hidden]{display:none !important}

/* ---------------------------------------------------------------------
   Corporate site, not a deck. 構成:
   hero → 対応領域 → 01 会社 → 02 課題 → 03 事例 → 04 比較 →
   05 約束 → 06 サービス → 07 進め方 → 08 流れ → 代表から →
   09 FAQ → まずはご相談 → 10 問い合わせ
   （数値を並べる metrics 帯は不採用）
   白基調の単一テーマ。ダークモードは持たない。グレーは青寄りに振って
   選ばれた色に見せ、暖色は Anormo のオレンジ 1色だけに絞る。
   --------------------------------------------------------------------- */

:root{
  /* 地は白と淡いグレーの2段。カードは白のまま影で浮かせる */
  --bg:#FFFFFF;
  --bg-2:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;

  --line:#E2E8F0;
  --line-2:#CBD5E1;
  --grid:rgba(15,23,42,.045);

  /* ベタ黒は使わない。いちばん濃い文字でもネイビー寄りのスレート。
     暗地の階調をそのまま反転すると白地では薄くなりすぎるので、
     4段すべて一段濃い側へ寄せてある（最小でも 4.5:1 を満たす） */
  --text:#0F172A;    /* 17.9:1 */
  --text-2:#334155;  /* 10.4:1 */
  --text-3:#475569;  /*  7.5:1 */
  --text-4:#64748B;  /*  4.6:1 */

  /* 面に置く鮮やかなオレンジと、文字に置く濃いオレンジを分ける。
     白地では #FF5E1E は 11px の文字にはコントラストが足りないため */
  --accent:#FF5E1E;
  --accent-2:#E14A0C;
  --accent-ink:#C43D06;
  --accent-glow:rgba(255,94,30,.30);
  --accent-film:rgba(255,94,30,.07);

  --grad:linear-gradient(135deg,#FF5E1E 0%,#E14A0C 100%);
  --grad-ink:linear-gradient(135deg,#FF5E1E 0%,#C43D06 100%);
  --grad-cool:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%);

  --blue:#3B82F6;
  --purple:#8B5CF6;
  --green:#10B981;

  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow-md:0 16px 40px rgba(15,23,42,.10);
  --shadow-lg:0 28px 70px rgba(15,23,42,.14);

  --max:1180px;
  --r:14px;
  --r-lg:20px;

  --f:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",
     "Yu Gothic",YuGothic,system-ui,sans-serif;
  --f-mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace;

  --bar:64px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  position:relative;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f);
  font-size:16px;
  line-height:1.92;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 110% 62% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 110% 62% at 50% 0%,#000 0%,transparent 78%);
}

a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(18px,4vw,30px);
}

/* ====================================================================== */
/* nav                                                                     */
/* ====================================================================== */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  height:var(--bar);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s,background .35s;
}

.nav.is-scrolled{
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 34px -18px rgba(15,23,42,.18);
}

/* reading progress, drawn along the header's bottom edge */
.nav__progress{
  position:absolute;
  left:0;bottom:-1px;
  width:0;
  height:1px;
  background:var(--grad);
  box-shadow:0 0 10px var(--accent-glow);
}

.nav__in{
  max-width:var(--max);
  height:100%;
  margin:0 auto;
  padding:0 clamp(18px,4vw,30px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.nav__mark{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:.2em}

/* 右端の2ボタン。space-between の相手を1つに保つためまとめて包む */
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}

/* 狭いと3要素が押し合うので、左の資料請求から畳む */
@media (max-width:620px){.nav__cta .btn:first-child{display:none}}

.nav__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
}

/* Japanese labels: the mono face has no real kana, so the nav takes the
   body face at a size and tracking that suit it. */
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(15px,1.8vw,23px);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--text-3);
}

.nav__links a{position:relative;padding-bottom:3px;transition:color .22s}
.nav__links a:hover{color:var(--text)}

.nav__links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.25,1);
}

.nav__links a.is-active{color:var(--accent-ink)}
.nav__links a.is-active::after,
.nav__links a:hover::after{transform:scaleX(1)}

@media (max-width:1140px){.nav__links{display:none}}

/* ---- buttons ---------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 26px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;
}

.btn i{font-style:normal;transition:transform .25s}
.btn:hover i{transform:translateX(3px)}

.btn--primary{
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 26px -8px var(--accent-glow);
}

.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -8px var(--accent-glow);
}

.btn--ghost{background:#fff;color:var(--text);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--accent-ink);color:var(--accent-ink);transform:translateY(-2px)}

.btn--lg{padding:18px 34px;font-size:15.5px;border-radius:12px}
.btn--sm{padding:11px 20px;font-size:13px;border-radius:9px}

/* ====================================================================== */
/* section scaffolding                                                     */
/* ====================================================================== */

.band{position:relative;padding:clamp(76px,10vw,140px) 0}
.band--alt{background:var(--bg-2);border-block:1px solid var(--line)}

/* 見せ場（事例・お問い合わせ）だけ、ごく淡い色を三方向から差した地にする */
.band--glow{
  background:
    radial-gradient(58% 48% at 10% 0%,rgba(255,94,30,.11) 0%,transparent 62%),
    radial-gradient(52% 44% at 90% 10%,rgba(59,130,246,.11) 0%,transparent 62%),
    radial-gradient(48% 42% at 62% 100%,rgba(139,92,246,.10) 0%,transparent 64%),
    #FCFDFF;
  border-block:1px solid var(--line);
}

/* 地のある帯が続くと境目が 1px + 1px の 2px 線になるので、後ろ側の上辺を消す */
.band--alt + .band--alt,
.band--alt + .band--glow,
.band--glow + .band--alt,
.band--glow + .band--glow{border-top:0}

/* ---- 代表から ---------------------------------------------------------- */

.rep{
  display:grid;
  grid-template-columns:minmax(0,238px) minmax(0,1fr);
  gap:clamp(28px,4vw,54px);
  align-items:start;
  margin-top:clamp(30px,4vw,42px);
}

@media (max-width:760px){
  .rep{grid-template-columns:1fr;gap:clamp(24px,5vw,32px)}
  .rep__photo{max-width:220px}
}

.rep__photo{
  aspect-ratio:3/4;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--surface-2),var(--bg));
  box-shadow:var(--shadow-md);
}

.rep__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 写真が入るまでの仮置き。入ったら img に差し替える */
.rep__photo span{
  font-size:clamp(1.9rem,4vw,2.5rem);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-4);
}

.rep__lead{
  margin:0 0 22px;
  font-size:clamp(1.2rem,2.6vw,1.62rem);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.02em;
  color:var(--accent-ink);
}

.rep__p{margin:0 0 18px;font-size:15px;line-height:2;color:var(--text-2)}
.rep__p:last-of-type{margin-bottom:0}

.rep__p a{
  padding-bottom:1px;
  border-bottom:1px solid rgba(255,94,30,.45);
  color:var(--accent-ink);
}

.rep__sign{
  display:grid;
  gap:6px;
  margin:clamp(26px,3vw,34px) 0 0;
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);
}

.rep__role{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--text-3);
}

.rep__name{font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--text)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:22px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-ink);
}

.tag::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}

.tag::after{
  content:"";
  width:clamp(20px,5vw,54px);
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* display headings — the site's own English voice, set large and tight */
.h2{
  margin:0 0 20px;
  font-size:clamp(2.1rem,6.4vw,4.4rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.038em;
  text-transform:uppercase;
  text-wrap:balance;
}

.h2 span{display:block;color:var(--text-4)}

.h2--jp{
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.4;
  letter-spacing:-.02em;
  text-transform:none;
}

.note{
  max-width:42em;
  margin:0 0 clamp(38px,5vw,62px);
  color:var(--text-2);
  font-size:15.5px;
  /* 和文を文節で折り返す（Chrome/Edge）。非対応ブラウザは従来どおり */
  word-break:auto-phrase;
  text-wrap:pretty;
}

/* ---- card base -------------------------------------------------------- */

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .32s,border-color .32s,box-shadow .32s;
}

.card::before{
  content:"";
  position:absolute;
  top:0;left:18%;right:18%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity .38s;
}

/* a soft light that tracks the pointer inside the card */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(255,94,30,.07),transparent 60%);
  opacity:0;
  transition:opacity .4s;
}

.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.card:hover::before{opacity:.9}
.card:hover::after{opacity:1}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:clamp(14px,2.2vw,22px)}

/* ====================================================================== */
/* 00 — preface                                                            */
/* ====================================================================== */

.hero{
  position:relative;
  /* 画面いっぱいまで伸ばすと、直下の「対応領域」の帯が必ず折り返しの下に
     隠れる。帯の高さぶん(約118px)を引いて、最初の画面に覗かせる。
     svh はスマホでツールバーが出入りしても値が変わらない単位 */
  min-height:calc(100vh - var(--bar) - 190px);
  min-height:calc(100svh - var(--bar) - 190px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--bar) + clamp(38px,6vh,74px)) 0 clamp(34px,4vw,50px);
  overflow:hidden;
}

/* as a flex item .wrap would shrink to its content and drift right —
   hold it to full width so the hero lines up with every other section */
.hero > .wrap{width:100%}

/* `translate` and `scale` are set as separate properties so the scroll
   parallax (--py) and the ambient pulse can coexist without fighting
   over a single `transform`. */
.hero__glow{
  position:absolute;
  top:-34%;left:50%;
  width:min(1180px,140vw);
  aspect-ratio:1.5;
  translate:-50% var(--py,0px);
  pointer-events:none;
  background:
    radial-gradient(ellipse 44% 40% at 34% 46%,rgba(255,94,30,.14) 0%,transparent 64%),
    radial-gradient(ellipse 50% 44% at 68% 40%,rgba(59,130,246,.12) 0%,transparent 66%),
    radial-gradient(ellipse 62% 50% at 52% 62%,rgba(139,92,246,.10) 0%,transparent 70%);
  filter:blur(22px);
  animation:pulse 11s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:.72;scale:1}
  50%{opacity:1;scale:1.07}
}

/* type that rises from behind its own edge */
.reveal{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}

.reveal > span{
  display:block;
  transform:translateY(115%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}

.reveal.in > span{transform:none}

/* the brand statement — biggest type on the page.
   Japanese display type wants looser tracking and taller leading than the
   Latin setting it replaces, so it gets its own scale. */
.hero__h1{
  /* 上のラベルを外したので、見出しが列の先頭。上マージンは不要 */
  margin:0;
  /* 「人間×AI」の4文字用の巨大サイズから、16文字が2行で収まる寸法へ */
  font-size:clamp(1.62rem,4.1vw,2.62rem);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
}

.hero__h1 .line{display:block}

/* 1行目はお客様の言葉、2行目がこちらの答え。明度で主従をつける */
.hero__h1 .quote{color:var(--text-3)}

.hero__p{
  max-width:34em;
  margin:clamp(24px,3vw,34px) 0 0;
  font-size:clamp(15px,1.8vw,17.5px);
  line-height:1.95;
  color:var(--text-2);
}

.hero__p b{color:var(--text);font-weight:600}

/* mission / vision / concept, stated once up top like the real site */

/* ---- hero: two columns, copy left and the figure right ----------------- */

.hero__col{min-width:0;max-width:46em}

/* 図が入る幅があるときだけ2カラムにする。狭いと本文側が痩せて
   proof の3項目が折り返すので、1180px 未満では figure を落として1カラムに戻す
   （ナビのリンクが出る 1140px とほぼ揃う） */
.hero > .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,4vw,56px);
}

.hero__fig{display:none}

@media (min-width:1180px){
  .hero > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,32vw,440px))}
  .hero__fig{display:block;min-width:0}
}

/* 図は動かさない。常時の上下動も、要素ごとの順次表示もやめて静止させる */
.figv{
  display:block;
  width:100%;
  height:auto;
  /* 白地では沈めない。線の細い図なので、薄くすると読めなくなる */
  opacity:1;
}

/* the case study pairs the story with the actual screen */
.own__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(38px,5vw,68px);
  align-items:center;
  padding-bottom:clamp(30px,4vw,44px);
}

@media (max-width:900px){
  .own__grid{grid-template-columns:1fr;gap:clamp(46px,7vw,62px)}
}

.own__col{min-width:0}

.own__feats{
  margin:clamp(22px,2.8vw,30px) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.own__feats li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-2);
}

.own__feats li::before{
  content:"";
  flex:none;
  width:5px;height:5px;
  margin-top:.72em;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}

/* the claim, checked off */
.proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px clamp(18px,2.4vw,28px);
  margin:clamp(22px,2.6vw,30px) 0 0;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--line);
  list-style:none;
}

.proof li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--text-2);
}

.proof li::before{
  content:"\2713";
  flex:none;
  display:grid;
  place-items:center;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--accent-film);
  color:var(--accent-ink);
  font-size:10px;
  font-weight:700;
}

/* ---- the product panel, drawn in CSS rather than shipped as an image --- */

.shot{position:relative;min-width:0}

.app{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:perspective(1500px) rotateY(-5deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.7,.25,1);
}

.shot:hover .app{transform:perspective(1500px) rotateY(-2deg) rotateX(1deg)}

.app__bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(15,23,42,.022);
}

.app__dots{display:flex;gap:5px}
.app__dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.app__name{font-size:11.5px;font-weight:600;color:var(--text-2)}

.app__badge{
  margin-left:auto;
  padding:3px 10px;
  border:1px solid rgba(255,94,30,.3);
  border-radius:999px;
  background:var(--accent-film);
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--accent-ink);
}

.sheet{padding:clamp(14px,1.8vw,18px)}

.sheet__head,
.sheet__row{
  display:grid;
  grid-template-columns:minmax(34px,.62fr) repeat(7,1fr);
  gap:5px;
  align-items:center;
}

.sheet__head span{
  font-family:var(--f-mono);
  font-size:9.5px;
  color:var(--text-4);
  text-align:center;
}

.sheet__row{margin-top:6px}
.sheet__who{font-size:11px;color:var(--text-2);white-space:nowrap}

.cell{
  display:grid;
  place-items:center;
  height:clamp(22px,2.4vw,27px);
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg);
  font-size:10.5px;
  line-height:1;
}

.cell--o{border-color:rgba(255,94,30,.34);background:var(--accent-film);color:var(--accent-ink)}
.cell--t{color:var(--text-2)}
.cell--x{color:var(--text-4)}

.sheet__legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:14px 0 0;
  font-size:10px;
  color:var(--text-4);
}

.app__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
}

.app__btn{
  padding:9px 16px;
  border-radius:8px;
  background:var(--grad);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  box-shadow:0 10px 26px -10px var(--accent-glow);
}

.app__time{font-family:var(--f-mono);font-size:11px;color:var(--text-3)}

/* floating figures, the way a product shot annotates itself */
.chip{
  position:absolute;
  padding:14px 18px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-md);
}

.chip b{
  display:block;
  font-family:var(--f-mono);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.04em;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.chip span{display:block;margin-top:4px;font-size:10.5px;color:var(--text-3)}

.chip--a{top:-20px;right:-8px}

@media (max-width:520px){
  .chip--a{top:-14px;right:-4px;padding:11px 14px}
}

/* ---- what we cover, sitting where a client logo row would ------------- */

/* この帯だけ色地にして、ヒーローと本編の間の仕切りにする。
   ごく淡いオレンジのグラデーション。白より一段だけ濃いので、
   前後の白いセクションに対して仕切りとして効く */
.fields{
  position:relative;
  padding:clamp(24px,2.8vw,34px) 0;
  border-block:1px solid rgba(255,94,30,.36);
  background:
    linear-gradient(180deg,#FFE0CC 0%,#FFF1E6 100%);
}

.fields__h{
  margin:0 0 clamp(16px,2vw,22px);
  font-size:clamp(14.5px,1.7vw,17px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--text);
  text-align:center;
}

.fields__h b{color:var(--accent-ink);font-weight:inherit}

/* 対応領域は端から端へ流し続ける。同じ並びを偶数個繋げ、半分ぶん動いた
   時点で先頭に戻すので継ぎ目が出ない。
   transform ではなく「本物の横スクロール」で動かしているため、
   指でのスワイプ・トラックパッドの横スクロール・ドラッグがそのまま効く。
   自動送りは fieldsMarquee() が scrollLeft を進めている（JS 側）。 */
.fields__marquee{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;          /* 自動送りと喧嘩するので smooth にしない */
  overscroll-behavior-x:contain; /* 端まで送っても「戻る」ジェスチャを誘発しない */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  /* 両端を溶かす。切れているのではなく流れていると見せるため */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

.fields__marquee::-webkit-scrollbar{display:none}

/* マウスで掴んでいる間 */
.fields__marquee.is-grabbing{cursor:grabbing}
.fields__marquee.is-grabbing .fields__row li{
  /* ドラッグ中に語が選択されてしまうのを防ぐ */
  user-select:none;
  -webkit-user-select:none;
}

.fields__track{
  display:flex;
  width:max-content;
}

.fields__row{
  display:flex;
  flex:none;
  gap:9px;
  margin:0;
  /* 末尾にも同じ幅の隙間を持たせないと、2周目の頭で詰まって見える */
  padding:0 9px 0 0;
  list-style:none;
}

.fields__row li{
  flex:none;
  padding:8px 16px;
  /* 色地の上なので、枠は色に寄せ、地は少し沈めて文字を読みやすく保つ */
  border:1px solid rgba(255,94,30,.4);
  border-radius:999px;
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  white-space:nowrap;
  transition:border-color .3s,color .3s;
}

.fields__row li:hover{border-color:var(--accent-ink);color:var(--accent-ink)}

.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(26px,3.4vw,36px)}

.scroll{
  display:flex;
  align-items:center;
  gap:12px;
  margin:clamp(22px,2.8vw,32px) auto 0;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--text-3);
}

.scroll::after{
  content:"";
  width:52px;height:1px;
  background:linear-gradient(90deg,var(--text-4),transparent);
  animation:slide 2.6s ease-in-out infinite;
}

@keyframes slide{
  0%,100%{transform:translateX(0);opacity:.45}
  50%{transform:translateX(10px);opacity:1}
}

/* ====================================================================== */
/* philosophy                                                              */
/* ====================================================================== */

.mv{padding:clamp(28px,3.4vw,40px)}

.mv__k{
  display:inline-block;
  padding:5px 13px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--accent-film);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--accent-ink);
}

.mv__h{margin:20px 0 14px;font-size:clamp(1.08rem,2.2vw,1.32rem);font-weight:700;line-height:1.55;letter-spacing:-.018em}
.mv__p{margin:0;color:var(--text-2);font-size:14px}

/* ====================================================================== */
/* service — the menu, stated with what each one actually includes         */
/* ====================================================================== */

.svcs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,2.2vw,22px);
}

.svc{display:flex;flex-direction:column;padding:0}

.svc__art{
  background:linear-gradient(158deg,#FAFCFE 0%,#EEF2F7 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.svc__art svg{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.svc:hover .svc__art svg{transform:scale(1.035)}

.svc__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(24px,3vw,34px);
}

.svc__n{
  display:inline-block;
  align-self:flex-start;
  padding:5px 12px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--accent-film);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent-ink);
}

.svc__h{
  margin:16px 0 12px;
  font-size:clamp(1.35rem,2.8vw,1.7rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.026em;
}

/* 3つのサービスは相手が違う。見出しのすぐ下で誰に向けたものかを言い切る */
.svc__who{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.7;
  color:var(--text);
}

.svc__who b{
  flex:none;
  padding:3px 9px;
  border:1px solid rgba(255,94,30,.32);
  border-radius:5px;
  background:var(--accent-film);
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--accent-ink);
}

.svc__p{margin:0 0 26px;color:var(--text-2);font-size:14.5px;line-height:1.85}

.svc__k{
  margin:0 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-2);
}

.svc__list{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:9px}

.svc__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.75;
  color:var(--text-2);
}

.svc__list li::before{
  content:"";
  flex:none;
  width:5px;height:5px;
  margin-top:.7em;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}

.svc__for{
  margin:auto 0 0;
  padding:16px 18px;
  border-radius:var(--r);
  background:var(--bg);
  border:1px solid var(--line);
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-2);
}

.svc__for b{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent-ink);
}

.quiet{
  max-width:46em;
  margin:clamp(40px,4.8vw,58px) auto 0;
  font-size:clamp(14.5px,1.7vw,16px);
  line-height:2;
  color:var(--text-2);
  text-align:center;
  text-wrap:balance;
}

.quiet b{color:var(--text);font-weight:600}

/* ====================================================================== */
/* issues — each complaint answered on the same line                       */
/* ====================================================================== */

/* 4件ちょうどなので 2×2。3列だと4枚目が1枚だけ残ってバランスが崩れる */
/* one full-width row per issue: the complaint on the left, what we actually
   do about it on the right — a slogan alone doesn't tell the reader anything */

.pairs__head{
  display:grid;
  grid-template-columns:.82fr 52px 1.18fr;
  gap:clamp(18px,3vw,40px);
  padding:0 clamp(26px,3.4vw,40px) 12px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-4);
}

.pairs__head span:last-child{color:var(--accent-ink)}

@media (max-width:720px){.pairs__head{display:none}}

.pairs{display:grid;gap:12px}

/* 左はアイコン＋2行、右は打ち手ひとつ。説明文は落としたので行数で持たせない */
.pair__l{display:flex;align-items:center;gap:clamp(13px,1.6vw,17px);min-width:0}
.pair__txt{display:grid;gap:4px;min-width:0}
.pair__r{min-width:0}

.pair{
  display:grid;
  grid-template-columns:.82fr 52px 1.18fr;
  gap:clamp(18px,3vw,40px);
  align-items:center;
  padding:clamp(26px,3.2vw,34px) clamp(26px,3.4vw,40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .3s,background .3s;
}

.pair:hover{border-color:var(--line-2);background:var(--surface-2)}

.pair__k{
  display:block;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--text-3);
}

.pair__issue{
  display:block;
  margin-top:10px;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.7;
  color:var(--text-2);
  text-wrap:pretty;
}

.pair__arrow{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  margin:0 auto;
  border:1px solid rgba(255,94,30,.3);
  border-radius:50%;
  background:var(--accent-film);
  color:var(--accent-ink);
  font-size:15px;
}

.pair__sol{
  margin:0 0 12px;
  font-size:clamp(17px,2vw,21px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.018em;
  text-wrap:balance;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@media (max-width:720px){
  .pair{grid-template-columns:1fr;gap:16px}
  .pair__arrow{margin:0;transform:rotate(90deg)}
}

.sub-h{
  margin:clamp(38px,4.6vw,54px) 0 16px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}

.conseq{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}

/* ---- 初回相談のやりとり ------------------------------------------------- */
/* 左＝お客様、右＝Anormo。角のひとつだけ落として、話し手の側を向かせる */

.talk{
  display:grid;
  gap:clamp(12px,1.6vw,18px);
  max-width:860px;
  margin:0 auto;
}

.talk__row{
  display:grid;
  gap:9px;
  justify-items:start;
  max-width:76%;
}

.talk__row--us{
  justify-self:end;
  justify-items:end;
  text-align:right;
}

.talk__who{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-4);
}

.talk__row--us .talk__who{color:var(--accent-ink)}

.talk__b{
  margin:0;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;
  background:var(--surface);
  box-shadow:var(--shadow);
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
  text-align:left;
}

.talk__row--us .talk__b{
  border-color:rgba(255,94,30,.26);
  border-radius:16px 16px 5px 16px;
  background:linear-gradient(135deg,rgba(255,94,30,.09),rgba(255,94,30,.02)),var(--surface);
  color:var(--text);
}

@media (max-width:640px){
  .talk__row{max-width:88%}
}

/* 一言のタグではなく「その結果どうなるか」まで書くので、見出し＋説明の2段にする */
.conseq li{
  display:grid;
  gap:9px;
  align-content:start;
  padding:20px 20px 22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}

.conseq li:hover{transform:translateY(-4px);border-color:rgba(255,94,30,.3);box-shadow:var(--shadow-md)}

.conseq__h{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--text);
}

.conseq__h::before{
  content:"!";
  flex:none;
  display:grid;
  place-items:center;
  width:20px;height:20px;
  margin-top:.15em;
  border-radius:6px;
  background:rgba(255,94,30,.14);
  color:var(--accent-ink);
  font-family:var(--f-mono);
  font-size:11px;
}

.conseq__d{
  padding-left:31px;
  font-size:13px;
  line-height:1.85;
  color:var(--text-2);
}

@media (max-width:520px){.conseq__d{padding-left:0}}

/* ====================================================================== */
/* comparison — then / now, and the cost of each                           */
/* ====================================================================== */

.vs{
  margin-top:clamp(16px,2.2vw,22px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.vs__top{
  margin:0;
  padding:clamp(22px,2.8vw,30px) clamp(18px,2.8vw,32px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,94,30,.08),transparent);
  font-size:clamp(1rem,2.2vw,1.32rem);
  font-weight:700;
  letter-spacing:-.015em;
  text-align:center;
}

.vs__top b{
  font-weight:inherit;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.vs__head,
.vs__row{
  display:grid;
  grid-template-columns:minmax(70px,.46fr) 1fr 1fr;
  gap:clamp(10px,2vw,22px);
  padding:clamp(18px,2.4vw,25px) clamp(18px,2.8vw,32px);
  align-items:start;
}

.vs__head{
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--text-3);
}

.vs__head span:last-child{color:var(--accent-ink)}
.vs__row + .vs__row{border-top:1px solid var(--line)}

.vs__k{font-size:clamp(14px,1.4vw,16px);font-weight:700;color:var(--text)}
.vs__human{margin:0;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.8;color:var(--text-3)}
.vs__ai{margin:0;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.8;font-weight:600;color:var(--text)}

@media (max-width:620px){
  .vs__head{display:none}
  .vs__row{grid-template-columns:1fr;gap:8px}
  .vs__human::before{content:"人を採用　";font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--text-4)}
  .vs__ai::before{content:"システム　";font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--accent-ink)}
}

/* ====================================================================== */
/* case study                                                              */
/* ====================================================================== */

/* ---- own product ------------------------------------------------------ */

.own{
  margin-top:clamp(16px,2.2vw,22px);
  padding:clamp(28px,3.6vw,44px);
  background:linear-gradient(135deg,rgba(255,94,30,.07),rgba(255,94,30,.01)),var(--surface);
  border:1px solid rgba(255,94,30,.2);
  border-radius:var(--r-lg);
}

.own__label{
  display:inline-block;
  padding:5px 13px;
  border:1px solid rgba(255,94,30,.3);
  border-radius:999px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--accent-ink);
}

.own__h{margin:20px 0 12px;font-size:clamp(1.3rem,2.8vw,1.75rem);font-weight:700;line-height:1.4;letter-spacing:-.026em}
.own__lead{margin:0;font-size:clamp(15px,1.7vw,16.5px);font-weight:600;line-height:1.85;letter-spacing:-.008em}

.pts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(20px,3vw,34px);
  padding-top:clamp(28px,3.6vw,38px);
  border-top:1px solid var(--line-2);
}

.pt__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent-ink)}
.pt__h{margin:12px 0 9px;font-size:15px;font-weight:600;line-height:1.6;letter-spacing:-.008em}
.pt__p{margin:0;color:var(--text-2);font-size:13.5px}

.own__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 22px;
  margin-top:clamp(28px,3.4vw,38px);
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line-2);
}

.own__note{margin:0;font-size:12.5px;line-height:1.75;color:var(--text-3)}

/* ---- 事例一覧（今後増やしていく枠）------------------------------------- */
/* 1件1行にしてある。カードを3列に並べると4件・5件で最終行に1枚だけ残って
   バランスが崩れる（同じ問題が課題・つまずく理由で実際に起きた）。
   行なら何件でも崩れないので、増やすときに数を気にしなくてよい。      */

.works{margin-top:clamp(52px,6vw,80px)}

.works__h{
  margin:0 0 clamp(16px,2vw,22px);
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* 番号は CSS の counter で振る。事例を差し込んでも振り直し不要 */
.works__list{display:grid;gap:12px;counter-reset:w}

.work{
  counter-increment:w;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:clamp(14px,2.2vw,28px);
  align-items:center;
  padding:clamp(22px,2.6vw,28px) clamp(22px,2.8vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  color:inherit;
  box-shadow:var(--shadow);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}

.work:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}

.work__n{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--accent-ink);
}

.work__n::before{content:counter(w,decimal-leading-zero)}

.work__h{margin:0;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.012em}

.work__p{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-2);
  text-wrap:pretty;
}

.work__tags{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0}

.work__tags span{
  padding:4px 11px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:11.5px;
  color:var(--text-3);
}

.work__go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  font-size:13px;
  font-weight:600;
  color:var(--accent-ink);
  white-space:nowrap;
}

.work__go i{font-style:normal;transition:transform .25s}
.work:hover .work__go i{transform:translateX(3px)}

@media (max-width:720px){
  .work{grid-template-columns:1fr;gap:12px}
}

/* 一覧を見せ切ったところで資料請求へ渡す受け皿 */
.works__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
  margin-top:14px;
  padding:clamp(26px,3vw,34px) clamp(24px,3vw,34px);
  border:1px solid rgba(255,94,30,.30);
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(255,94,30,.10) 0%,rgba(225,74,12,.03) 100%),
    var(--surface);
}

.works__cta p{
  margin:0;
  max-width:30em;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-2);
  text-wrap:pretty;
}

.works__cta b{color:var(--text);font-weight:700}

@media (max-width:720px){
  .works__cta{flex-direction:column;align-items:flex-start}
}

/* ====================================================================== */
/* strengths                                                               */
/* ====================================================================== */

.str{padding:clamp(28px,3.4vw,40px)}

.str__h{margin:20px 0 12px;font-size:17px;font-weight:600;line-height:1.62;letter-spacing:-.012em}
.str__p{margin:0;color:var(--text-2);font-size:14px}

/* 本文中のリンク。a は color:inherit なので、ここで見えるようにする */
.str__p a{
  color:var(--accent-ink);
  border-bottom:1px solid rgba(255,94,30,.4);
  transition:border-color .25s;
}

.str__p a:hover{border-bottom-color:var(--accent-ink)}

/* ====================================================================== */
/* flow — a connected rail, not ten separate boxes                         */
/* ====================================================================== */

.flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  row-gap:clamp(36px,4.4vw,52px);
}

.fstep{position:relative;padding:0 6px;text-align:center}

/* the rail, drawn behind each node except the first of a row.
   It draws itself left-to-right as the section arrives, node by node. */
.fstep::before{
  content:"";
  position:absolute;
  top:21px;
  right:50%;
  width:100%;
  height:1px;
  background:var(--line-2);
  z-index:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s ease-out;
  transition-delay:calc(var(--i,0) * 95ms);
}

.fstep:nth-child(5n+1)::before{display:none}

.flow.in .fstep::before{transform:scaleX(1)}

.fstep__n{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  margin:0 auto;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--bg);
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--text-2);
  opacity:0;
  scale:.62;
  transition:border-color .3s,color .3s,background .3s,
             opacity .45s ease-out,scale .5s cubic-bezier(.2,1.5,.4,1);
  transition-delay:0s,0s,0s,
             calc(var(--i,0) * 95ms),calc(var(--i,0) * 95ms);
}

.flow.in .fstep__n{opacity:1;scale:1}

.fstep:hover .fstep__n{border-color:var(--accent-ink);color:var(--accent-ink);background:var(--accent-film)}

.fstep__t{
  display:block;
  margin-top:15px;
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:-.01em;
  opacity:0;
  translate:0 8px;
  transition:opacity .45s,translate .45s ease-out;
  transition-delay:calc(var(--i,0) * 95ms + 130ms);
}

.flow.in .fstep__t{opacity:1;translate:0}

.fstep--last .fstep__n{
  border-color:transparent;
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 22px -6px var(--accent-glow);
}

.fstep--last .fstep__t{
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@media (max-width:900px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .fstep:nth-child(5n+1)::before{display:block}
  .fstep:nth-child(3n+1)::before{display:none}
}

@media (max-width:540px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .fstep:nth-child(5n+1)::before,
  .fstep:nth-child(3n+1)::before{display:block}
  .fstep:nth-child(2n+1)::before{display:none}
}

/* ====================================================================== */
/* contact                                                                 */
/* ====================================================================== */

.contact{position:relative;text-align:center}
.contact__head .tag{justify-content:center}

.contact__glow{
  position:absolute;
  top:-40%;left:50%;
  width:min(940px,124vw);
  aspect-ratio:1.7;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(255,94,30,.18) 0%,transparent 66%);
  filter:blur(20px);
}

.contact__h{
  margin:0 0 24px;
  font-size:clamp(2.1rem,6.4vw,4.4rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-wrap:balance;
}

.contact__h span{display:block}

.contact__h b{
  font-weight:inherit;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.contact__p{margin:0 auto clamp(36px,4.4vw,50px);color:var(--text-2);font-size:15.5px}

.ask{
  margin:clamp(40px,5vw,58px) 0 0;
  padding:clamp(26px,3.4vw,38px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-align:left;
}

.ask__h{
  margin:0 0 20px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  text-align:center;
}

.ask ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}

.ask li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.75;
  color:var(--text-2);
}

.ask li::before{
  content:"";
  flex:none;
  width:5px;height:5px;
  margin-top:.78em;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}

.ask__foot{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--text-4);
  text-align:center;
}

/* ====================================================================== */
/* アイコン — 1つのスプライトを <use> で呼ぶ。色は箱側で決める            */
/* ====================================================================== */

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.icobox{
  display:grid;
  place-items:center;
  flex:none;
  width:clamp(42px,4.2vw,50px);
  aspect-ratio:1;
  /* 淡い面だけだと駄菓子のように見えるので、同系色の細い輪郭を足して締める */
  border:1px solid var(--edge);
  border-radius:13px;
  background:var(--tint);
  color:var(--ink);
}

.ico{width:55%;height:55%;display:block}

.ico--blue{--ink:#2563EB;--tint:rgba(37,99,235,.07);--edge:rgba(37,99,235,.22)}
.ico--orange{--ink:#DB4A0C;--tint:rgba(255,94,30,.08);--edge:rgba(255,94,30,.24)}
.ico--green{--ink:#059669;--tint:rgba(16,185,129,.08);--edge:rgba(16,185,129,.24)}
.ico--purple{--ink:#7C3AED;--tint:rgba(139,92,246,.08);--edge:rgba(139,92,246,.22)}

/* 見出し直下の一言。長い前置きは全部これに置き換える */
.lede{
  max-width:34em;
  margin:0 0 clamp(30px,4vw,44px);
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.9;
  color:var(--text-2);
}

/* ====================================================================== */
/* 昔 / 今 の切り替えカード                                               */
/* ====================================================================== */

.ba__switch{
  position:relative;
  display:inline-grid;
  grid-auto-flow:column;
  gap:4px;
  margin-bottom:clamp(22px,2.8vw,30px);
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.ba__btn{
  position:relative;
  z-index:1;
  min-width:96px;
  padding:10px 22px;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--text-3);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:color .3s;
}

.ba__btn.is-on{color:#fff}

.ba__thumb{
  position:absolute;
  z-index:0;
  top:4px;left:4px;
  width:calc(50% - 6px);
  height:calc(100% - 8px);
  border-radius:999px;
  background:var(--grad);
  box-shadow:0 8px 20px -8px var(--accent-glow);
  transition:transform .38s cubic-bezier(.2,.8,.25,1);
}

.ba__switch[data-ba="now"] .ba__thumb{transform:translateX(calc(100% + 4px))}

.ba__cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2.2vw,22px);
}

.ba__card{
  display:grid;
  gap:16px;
  align-content:start;
  padding:clamp(26px,3.2vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:border-color .4s,box-shadow .4s;
}

.ba__then,.ba__now{
  margin:0;
  font-size:clamp(15.5px,1.7vw,18px);
  font-weight:600;
  line-height:1.7;
  letter-spacing:-.012em;
  transition:opacity .34s,translate .34s;
}

/* 2つの文を同じ場所に重ね、状態に応じて片方だけ見せる */
.ba__card{grid-template-areas:"i" "t";}
.ba__card .icobox{grid-area:i}
.ba__then,.ba__now{grid-area:t}

.ba__then{color:var(--text-3)}
.ba__now{color:var(--text);opacity:0;translate:0 8px;pointer-events:none}

.ba__cards[data-state="now"] .ba__card{
  border-color:rgba(255,94,30,.3);
  box-shadow:var(--shadow-md);
}
.ba__cards[data-state="now"] .ba__then{opacity:0;translate:0 -8px;pointer-events:none}
.ba__cards[data-state="now"] .ba__now{opacity:1;translate:0;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .ba__thumb,.ba__then,.ba__now{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .svc__art svg{transition:none}
  .svc:hover .svc__art svg{transform:none}
}

/* ====================================================================== */
/* 資料請求・お問い合わせフォーム                                          */
/* ====================================================================== */

.contact__head{position:relative;z-index:1;max-width:760px;margin:0 auto}

.cf{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
  margin-top:clamp(38px,5vw,58px);
  text-align:left;
}

@media (max-width:900px){.cf{grid-template-columns:1fr}}

.cf__side{min-width:0}

.cf__side-h{
  margin:0 0 18px;
  font-size:clamp(18px,2.2vw,21px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.018em;
}

.cf__pts{margin:0;padding:0;list-style:none;display:grid;gap:12px}

.cf__pts li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.7;
}

.cf__pts li::before{
  content:"\2713";
  flex:none;
  width:20px;height:20px;
  display:grid;
  place-items:center;
  margin-top:.15em;
  border-radius:6px;
  background:var(--accent-film);
  color:var(--accent-ink);
  font-size:11px;
  font-weight:700;
}

.cf .ask{margin-top:clamp(26px,3.2vw,34px);box-shadow:var(--shadow)}

/* ---- フォーム本体 ------------------------------------------------------ */

.cf__form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,20px) clamp(14px,1.8vw,18px);
  padding:clamp(24px,3.2vw,38px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}

@media (max-width:560px){.cf__form{grid-template-columns:1fr}}

.f{display:grid;gap:8px;margin:0;align-content:start;min-width:0}
.f--wide{grid-column:1 / -1}

fieldset.f{border:0;padding:0}

.f__label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--text);
}

.req,.opt{
  padding:3px 8px;
  border-radius:5px;
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
}

.req{background:var(--accent);color:#fff}
.opt{background:#EEF2F7;color:var(--text-3)}

.f__in{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  line-height:1.6;
  transition:border-color .22s,box-shadow .22s;
}

.f__in::placeholder{color:var(--text-4)}

.f__in:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,94,30,.15);
}

.f__ta{resize:vertical;min-height:104px}

/* select は矢印を自前で描く。OS 標準の見た目が浮くため */
.f__sel{position:relative;display:block}

.f__sel::after{
  content:"";
  position:absolute;
  right:16px;top:50%;
  width:8px;height:8px;
  margin-top:-6px;
  border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);
  pointer-events:none;
}

.f__sel select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  cursor:pointer;
}

.f__err{font-size:12.5px;font-weight:600;color:#DC2626}
.f__err:empty{display:none}
.f__in.is-bad{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* ---- ご希望の対応（大きな選択肢） -------------------------------------- */

.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.pick__o{display:block;cursor:pointer}
.pick__o input{position:absolute;opacity:0;width:0;height:0}

.pick__b{
  display:grid;
  gap:5px;
  height:100%;
  padding:15px 17px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  transition:border-color .22s,background .22s,box-shadow .22s;
}

.pick__b b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pick__b i{font-style:normal;font-size:12.5px;line-height:1.65;color:var(--text-3)}

.pick__o input:checked + .pick__b{
  border-color:var(--accent);
  background:linear-gradient(150deg,rgba(255,94,30,.10),rgba(255,94,30,.03)),var(--surface);
  box-shadow:0 0 0 1px var(--accent);
}

.pick__o input:focus-visible + .pick__b{box-shadow:0 0 0 3px rgba(255,94,30,.25)}

/* ---- 同意と送信 -------------------------------------------------------- */

.agree{gap:10px}
.agree__l{display:flex;align-items:flex-start;gap:11px;cursor:pointer}

.agree__l input{
  flex:none;
  width:19px;height:19px;
  margin-top:.15em;
  accent-color:var(--accent);
  cursor:pointer;
}

.agree__l span{font-size:13.5px;line-height:1.7;color:var(--text-2)}

.cf__send{width:100%;justify-content:center}

.cf__note{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-3);
}

/* ---- 送信後 ------------------------------------------------------------ */

.cf__done{
  display:grid;
  gap:14px;
  justify-items:center;
  padding:clamp(34px,4.4vw,52px);
  border:1px solid rgba(255,94,30,.3);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,94,30,.07),rgba(255,94,30,.01)),var(--surface);
  box-shadow:var(--shadow-md);
  text-align:center;
}

.cf__done-i{
  display:grid;
  place-items:center;
  width:56px;height:56px;
  border-radius:17px;
  background:var(--accent-film);
  color:var(--accent-ink);
}

.cf__done-i .ico{width:30px;height:30px}
.cf__done h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.cf__done p{margin:0;max-width:34em;font-size:14px;line-height:1.9;color:var(--text-2)}
.cf__done a{color:var(--accent-ink);border-bottom:1px solid rgba(255,94,30,.45)}

/* ====================================================================== */
/* how we work, per service                                                */
/* ====================================================================== */

.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2.2vw,22px)}

.way{
  padding:clamp(26px,3.2vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
}

.way:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

.way__k{
  display:inline-block;
  padding:6px 14px;
  margin-bottom:24px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--accent-film);
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-ink);
}

.way__steps{margin:0;padding:0;list-style:none;counter-reset:w}

.way__steps li{
  position:relative;
  counter-increment:w;
  padding:0 0 22px 34px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-2);
}

.way__steps li::before{
  content:counter(w,decimal-leading-zero);
  position:absolute;
  top:0;left:0;
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--accent-ink);
}

/* the rail joining the steps */
.way__steps li::after{
  content:"";
  position:absolute;
  top:18px;bottom:2px;left:6px;
  width:1px;
  background:var(--line-2);
}

.way__steps li:last-child{padding-bottom:0}
.way__steps li:last-child::after{display:none}

/* ====================================================================== */
/* faq                                                                     */
/* ====================================================================== */

.faq{max-width:880px}

.faq details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  margin-bottom:11px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color .3s,box-shadow .3s;
}

.faq details[open],
.faq details:hover{border-color:var(--line-2)}

.faq summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:21px 24px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  line-height:1.7;
  letter-spacing:-.008em;
  list-style:none;
  transition:color .22s;
}

.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}

.faq summary::before{
  content:"Q";
  flex:none;
  display:grid;
  place-items:center;
  width:25px;height:25px;
  margin-top:.22em;
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--accent-film);
  color:var(--accent-ink);
  font-family:var(--f-mono);
  font-size:12px;
}

.faq summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--f-mono);
  font-size:18px;
  color:var(--accent-ink);
  transition:transform .3s;
}

.faq details[open] summary::after{transform:rotate(45deg)}

.faq p{margin:0;padding:0 24px 24px 63px;color:var(--text-2);font-size:14px}

@media (max-width:560px){.faq p{padding-left:24px}}

/* ---- footer ----------------------------------------------------------- */

.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg-2)}

.foot__top{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(44px,5.4vw,64px) clamp(18px,4vw,30px);
  display:grid;
  grid-template-columns:minmax(240px,1.4fr) 1fr;
  gap:clamp(30px,4vw,60px);
}

@media (max-width:720px){.foot__top{grid-template-columns:1fr}}

/* 左右2列の1行目を同じ高さの箱に入れて、上端をきっちり揃える
   （17px のロゴと 11.5px の見出しでは、そのままだと行の高さが違って段差になる） */
.foot__mark{
  display:flex;align-items:center;gap:9px;
  min-height:26px;
  font-size:17px;font-weight:700;letter-spacing:.2em;
}

.foot__about{margin:16px 0 0;max-width:30em;font-size:13.5px;line-height:1.9;color:var(--text-3)}

.foot__nav{display:grid;gap:11px;align-content:start}

.foot__nav b{
  display:flex;align-items:center;
  min-height:26px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--text-3);
}

.foot__nav a{font-size:13.5px;color:var(--text-3);transition:color .22s}
.foot__nav a:hover{color:var(--accent-ink)}

.foot__base{border-top:1px solid var(--line)}

.foot__base-in{
  max-width:var(--max);
  margin:0 auto;
  padding:26px clamp(18px,4vw,30px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--text-4);
}

.foot__base-in .demo{color:var(--accent-ink)}

/* ====================================================================== */
/* motion                                                                  */
/* ====================================================================== */

.rise{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--d,0ms);
}

.rise.in{opacity:1;transform:none}

/* ====================================================================== */
/* スマートフォン                                                          */
/* 画面が細く、読む距離が近い。13〜14px の本文は小さすぎるので底上げし、    */
/* そのぶん増える縦の長さをセクション余白の圧縮で相殺する。               */
/* ====================================================================== */

@media (max-width:620px){

  /* ---- 余白：上下を詰め、左右はわずかに広げる ---- */
  .band{padding:58px 0}
  .fields{padding:26px 0}
  .wrap{padding-inline:20px}
  .h2{margin-bottom:16px}

  /* ---- 本文の底上げ ---- */
  .note,.lede{font-size:15.5px;line-height:1.85}
  .conseq__d{font-size:14.5px;line-height:1.8;padding-left:0}
  .svc__p{font-size:15.5px}
  .svc__list li{font-size:15px}
  .svc__who,.svc__for{font-size:14px}
  .own__feats li{font-size:15px}
  .work__p{font-size:14.5px}
  .faq summary{font-size:15.5px}
  .faq p{font-size:15px}
  .talk__b{font-size:15.5px}
  .rep__p{font-size:15.5px}
  .ask li,.cf__pts li{font-size:15px}
  .foot__about,.foot__nav a{font-size:14.5px}
  .quiet{font-size:15.5px;line-height:1.9}

  /* ---- 小さな欧文ラベルは字間を詰めないと語として読めない ---- */
  .tag{font-size:11px;letter-spacing:.14em;margin-bottom:16px}
  .sub-h,.works__h,.fields__h{letter-spacing:.1em}

  /* ---- 見出しは行を均等に割る。1文字だけ次の行に残るのを防ぐ ---- */
  .hero__h1 .line,.h2--jp{text-wrap:balance}

  /* ---- 和文は文節で折り返す。狭い画面ほど「その切／り分け」のような
         語の途中での改行が目立つため（Chrome / Edge。非対応は従来どおり） ---- */
  .lede,.quiet,.pair__sol,.pair__issue,.conseq__d,
  .svc__p,.svc__for,.work__p,.own__lead,.talk__b,.rep__p,.faq p,
  .ask li,.cf__pts li,.foot__about,.contact__p{
    word-break:auto-phrase;
    text-wrap:pretty;
  }

  /* ---- 吹き出しは画面幅を使う ---- */
  .talk__row{max-width:93%}

  /* ---- ボタンは全幅にして押しやすく ---- */
  .hero__cta{display:grid;gap:11px}
  .hero__cta .btn,.works__cta .btn{justify-content:center}

  /* ---- カードの内側の余白を少しだけ詰める ---- */
  .pair,.conseq li,.way{padding:22px}
  .svc__body{padding:24px 22px}
}

/* iOS は 16px 未満の入力欄に触れると画面を勝手に拡大する。それを止める */
@media (max-width:820px){
  .f__in{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .rise{opacity:1;transform:none;transition:none}
  .reveal > span{transform:none;transition:none}

  .hero__glow{animation:none;translate:-50% 0}
  .scroll::after{animation:none}

  /* 自動送りは JS 側で止める。スワイプは操作なので残す
     （動きを減らす設定は「勝手に動かない」ことが目的で、
       自分で動かす分には問題ない） */

  /* .figv は元から静止しているので、ここで止めるものは無い */

  .fstep::before{transform:scaleX(1);transition:none}
  .fstep__n{opacity:1;scale:1;transition:none}
  .fstep__t{opacity:1;translate:0;transition:none}

  .card::after{display:none}

  .btn,.card,.nav,.nav__links a,.nav__links a::after,.foot__nav a{transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* ====================================================================== */
/* 会社概要ページ                                                          */
/* ====================================================================== */

.page-head{
  padding:calc(var(--bar) + clamp(56px,8vw,104px)) 0 clamp(36px,5vw,64px);
}

.page-head .note{margin:0}

.prof{
  margin:0;
  border-top:1px solid var(--line-2);
}

.prof__row{
  display:grid;
  grid-template-columns:minmax(120px,220px) 1fr;
  gap:8px clamp(20px,4vw,56px);
  padding:clamp(18px,2.4vw,26px) 0;
  border-bottom:1px solid var(--line);
}

.prof dt{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-3);
}

.prof dd{
  margin:0;
  font-size:15.5px;
  line-height:1.9;
  color:var(--text);
  word-break:auto-phrase;
}

.prof dd small{display:block;font-size:12.5px;color:var(--text-3);letter-spacing:.04em}
.prof dd a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

.prof__list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}

.prof__list li{
  padding:7px 16px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:#fff;
  font-size:14px;
  font-weight:600;
}

.company-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,48px)}

@media (max-width:620px){
  .prof__row{grid-template-columns:1fr}
}