/* 脱 Framer 後の LP に足すスタイル。
   Framer ランタイムが担っていた演出を CSS 側で持つ。
   元の framer-*.css は index.html にインラインで入っていて、そちらは触らない。 */

/* 背景の明→暗の転換。
   Framer は color-1 / color-2 という別の DOM に差し替えていたが、
   固定背景の背景色を変えるだけで同じ見え方になる。
   インラインの background-color を上書きするので !important が要る。 */
[data-framer-name^="color-"] {
  transition: background-color .55s cubic-bezier(.4, 0, .2, 1);
}
[data-framer-name^="color-"].is-dark {
  background-color: rgb(20, 20, 20) !important;
}

/* 登場アニメーション。
   Framer は JS で1文字ずつ動かしていたが、同じ密度を再現する必要はない。
   IntersectionObserver（assets/lp.js）が .is-in を付けるので、それで出す。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* JS が無効な環境では最初から見える状態にする。
   ここが無いと、クローラや JS 無効のブラウザで本文が消える */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* アンカー移動 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- FV（自前）----------
   元は Framer の fit-text SVG が3段積んであった。実測すると
   英語 110px / 日本語の太字 65px / その下 41px で、3段とも
   画面幅いっぱいまで拡大される組みだった。文字量ではなく
   「全部が主役サイズ」なのが読みにくさの正体だったので、
   英語だけブランド面として大きさを残し、日本語は本文サイズに落とす。

   段の役割:
     nue-fv-en      ブランド。読ませるものではない
     nue-fv-title   何をする会社か。ページ唯一の h1
     nue-fv-lead    守備範囲。1行
     nue-fv-actions 次の行動

   位置決め（position:absolute / bottom:0 / padding）は Framer の
   .framer-bykibh をそのまま使う。並べ方だけこちらで持つ。 */

.framer-bykibh.nue-fv {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  letter-spacing: .04em;
  color: #000;
}

.nue-fv-en {
  margin: 0 0 1.5rem;
  font-family: 'Chakra Petch', sans-serif;
  /* 7.6vw = 1440px で 110px。元の SVG の実測値に合わせてある */
  font-size: clamp(2.125rem, 7.6vw, 7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
}

.nue-fv-title {
  margin: 0 0 .75rem;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

.nue-fv-lead {
  margin: 0 0 2rem;
  max-width: 34em;
  font-size: clamp(.875rem, 1.15vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.9;
  color: rgba(0, 0, 0, .7);
}

.nue-fv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}

/* 記事・サービスページの .button-light と同じ形。
   LP と配下ページで CTA の見た目を割らない */
.nue-fv-btn {
  display: inline-block;
  padding: .875rem 2.5rem;
  background: #000;
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity .2s;
}
.nue-fv-btn:hover { opacity: .8; }

.nue-fv-link {
  font-family: 'Chakra Petch', sans-serif;
  font-size: .875rem;
  letter-spacing: .04em;
  color: rgba(0, 0, 0, .6);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding-bottom: .25rem;
  transition: color .2s, border-color .2s;
}
.nue-fv-link:hover { color: #000; border-bottom-color: #000; }

/* 狭い画面では下端に貼りつくと CTA が親指の下に隠れる。
   下に余白を足して、ボタンごと画面内に収める */
@media (max-width: 809.98px) {
  .framer-bykibh.nue-fv { padding: 24px 24px 3.5rem; }
  .nue-fv-en { margin-bottom: 1.25rem; }
  .nue-fv-lead { margin-bottom: 1.75rem; }
  .nue-fv-actions { gap: 1.25rem; }
  .nue-fv-btn { padding: .875rem 2rem; }
}

/* ---------- LP のフッターナビ（自前）----------
   Mission / Services / About / Member / Company / Contact の6項目が
   3列に分かれて置いてあった。うち4つが /company の中の見出しになったので、
   グローバルナビと同じ4項目（Services / Knowledge / Company / Contact）に揃える。
   Knowledge はもともとフッターから辿れなかった。 */

.framer-6gpqth.nue-foot-nav {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  width: auto;
}
.nue-foot-nav a {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}
.nue-foot-nav a:hover { opacity: .6; }

@media (max-width: 809.98px) {
  .framer-6gpqth.nue-foot-nav { gap: 1.25rem 2rem; }
}

/* ---------- About（自前）----------
   FV の直下。2026-08-17 に入れた。
   ここには元々 Mission があり、`生成AIの力で人々の体験を革新し…` と
   FV と同じことを抽象で言い直していたので外した。入れ直すぶんは
   サイト内にある具体（扱う範囲・提供の形・作り方）だけで組む。

   下の Services と同じ左端（セクション 40px + 内側 20px = 60px）に揃える。
   3項目は Services のような縦リストにすると同じ組みが2回続いて見えるので、
   広い画面では3列に置く。 */

.nue-about {
  position: relative;
  overflow: hidden;
  /* 親（framer-1d32qep）が flex なので、幅を指定しないと内容ぶんに縮んで
     中央寄せされる。Services の framer-innc7s も同じ理由で width:100% を持っている。
     これが無いと左端が Services と 180px ずれる（実際にずらした） */
  width: 100%;
  flex: none;
  box-sizing: border-box;
  padding: 120px 0 40px 40px;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  letter-spacing: .04em;
  color: #000;
}

/* Services セクションと同じノイズ。装飾なのでクリックは通す */
.nue-about-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: .07;
  background-image: url(/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4_q5854ad3b.png);
  background-repeat: repeat;
  background-size: 249.5px auto;
}

.nue-about-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* LP のセクション見出し（Services / Mission）と同じ組み。実測値 */
.nue-about-head {
  margin: 0 0 2.5rem;
  margin-left: -20px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  color: rgb(21, 21, 21);
}

.nue-about-lead {
  margin: 0 0 3.5rem;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.7;
  /* 既定だと「メンバ / ーが、」のように長音記号が行頭に来る。
     禁則を強めて、そこで折らせないようにする */
  line-break: strict;
  text-wrap: balance;
}

/* リードで「事業のグロース経験のあるメンバー」と言っているので、
   その根拠として本人を出す。抽象的な3項目（扱う範囲・提供の形・作り方）を
   並べていたが、何の会社か分からないという指摘で差し替えた。
   詳しい経歴は /company#member にある */
.nue-about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3rem;
}
.nue-about-list > li { display: grid; gap: 1rem; align-content: start; }

.nue-about-photo { width: 100%; max-width: 260px; }
.nue-about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1158;
  object-fit: cover;
}

.nue-about-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.nue-about-name span {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(0, 0, 0, .5);
}

.nue-about-desc { margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.9; color: rgba(0, 0, 0, .7); }

.nue-about-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.5rem;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(0, 0, 0, .5);
  text-decoration: none;
  transition: color .2s;
}
.nue-about-more::after { content: '↗'; font-size: 12px; }
.nue-about-more:hover { color: #000; }

@media (min-width: 810px) {
  .nue-about-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    max-width: 62rem;
  }
}

@media (max-width: 809.98px) {
  .nue-about { padding: 80px 0 24px 24px; }
  .nue-about-head { margin-bottom: 2rem; }
  .nue-about-lead { margin-bottom: 2.5rem; }
  .nue-about-more { margin-top: 2.5rem; }
  /* 読点での改行は広い画面向け。狭い画面では逆に半端な行を作るので、
     ブラウザに任せて均等に割らせる */
  .nue-about-lead br { display: none; }
}

/* ---------- Services（自前）----------
   LP の S/001・S/002 の組み方をそのまま踏襲する。
   値は Framer の描画結果から実測したもの:
     連番ラベル  Chakra Petch 16px / 500 / ls .04em / rgba(0,0,0,.5)
     英語見出し  Chakra Petch 32px / 600 / ls .02em / #000
     日本語      Noto Sans JP 16px / 700 / ls .04em / rgba(0,0,0,.5)
     説明        Noto Sans JP 14px / 500 / ls .04em / line-height 160%
   区切りは全幅の1px罫線。 */

/* ノイズ層はセクション全面を覆っていて、クリックを吸ってしまう。
   元の LP は行がリンクではなかったので問題にならなかったが、
   /services/* へのリンクにした時点で当たり判定を外す必要がある。
   純粋な装飾なので pointer-events を切る。 */
[data-framer-name="Noise image"],
[data-framer-name="Noise 2"],
[data-framer-background-image-wrapper] { pointer-events: none; }

.nue-services {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  /* LP の Frame 75 は 1440px 幅で 1400px だった。左右 20px の余白に合わせる */
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

.nue-svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
  text-decoration: none;
  color: #000;
}
.nue-svc-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }

.nue-svc-num {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  color: rgba(0, 0, 0, .5);
}

.nue-svc-meta {
  display: block;
  margin-top: .5rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

.nue-svc-body { display: grid; gap: .5rem; align-content: start; }

.nue-svc-en {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  transition: opacity .25s;
}
.nue-svc-row:hover .nue-svc-en { opacity: .5; }

.nue-svc-ja {
  margin: 0 0 1.25rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: rgba(0, 0, 0, .5);
}

.nue-svc-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
}

.nue-svc-more {
  margin: 1.75rem 0 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(0, 0, 0, .5);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.nue-svc-more::after { content: '↗'; font-size: 12px; }
.nue-svc-row:hover .nue-svc-more { color: #000; }

.nue-svc-img { justify-self: start; }
.nue-svc-img img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 600 / 760;
  object-fit: cover;
}

@media (min-width: 810px) {
  .nue-svc-row {
    grid-template-columns: 8rem minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
    padding: 4.5rem 0;
  }
  .nue-svc-img { justify-self: end; }
}

/* ---------- お問い合わせページ ----------
   元のページはフォームだけが置かれていて、何の窓口なのか、
   送ると何が返ってくるのかがどこにも書かれていなかった。
   フォームの上に置く説明と、任意項目の印。 */

.contact-intro {
  /* フォームは 600px 幅で中央寄せ。同じ幅・同じ中心に揃える */
  max-width: 600px;
  margin: 0 auto 2.5rem;
  padding-inline: 1.25rem;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  letter-spacing: .04em;
  line-height: 1.9;
  color: #000;
}

.contact-intro-label {
  margin: 0 0 1rem;
  font-family: 'Chakra Petch', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(0, 0, 0, .5);
}

.contact-intro-title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

.contact-intro-lead {
  margin: 0 0 1.75rem;
  font-size: .9375rem;
  color: rgba(0, 0, 0, .7);
}

.contact-intro-steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: .625rem;
}
/* 連番は擬似要素を絶対配置で置く。
   grid にすると <strong> までグリッドの子として扱われ、
   2列のグリッドに3つ目が入って縦積みに崩れる。実際に一度崩した。 */
.contact-intro-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  font-size: .875rem;
  color: rgba(0, 0, 0, .7);
}
.contact-intro-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: .75rem;
  color: rgba(0, 0, 0, .35);
  line-height: 1.9;
}
.contact-intro-steps strong { color: #000; }

.contact-intro-note {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: .75rem;
  color: rgba(0, 0, 0, .5);
}

/* 任意項目の印。必須に印を付けるより、任意を明示する方が
   「書かなくてよい欄がある」と先に伝わる */
.form-optional {
  margin-left: .5rem;
  padding: .1em .5em;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 400;
  color: rgba(0, 0, 0, .5);
  letter-spacing: .04em;
  vertical-align: 1px;
}