/* ==========================================================================
   目次（Ctrl+F / Cmd+F でセクション名を検索して移動）
   Header                 .header
   Hero                   .hero / .marquee / .photo
   02_outline             .outline（モグラエフェクトの定義もこの近く）
   12_CTA                 .cta
   03_Common Challenges   .challenges / .challenge-card
   05_サービス内容        .services
   08_実績紹介            .cases
   11_FAQ                 .faq / .faq-item
   13_Process             .process / .process-step
   14_Footer              .footer
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --header-height: 75px;

  /* --- カラートークン --------------------------------------------------- */
  --color-blue: #1b39e2;
  --color-cyan: #0097ae;
  --color-green: #48dc03;
  --color-lime: #77ff41;
  --color-eyebrow: #6f6f6f;

  /* --- グラデーション ---------------------------------------------------
     CVボタンは全て同一の3色グラデ。background-size:200%でhover時に
     #0097AE→#48DC03 側へスライドさせるため、静止時は青→シアンに見える。
     --brand-grad は帯・下線など「面ではない」装飾用の2色グラデ。 */
  --gradient-cv: linear-gradient(134deg, var(--color-blue) 0%, var(--color-cyan) 50%, var(--color-green) 100%);
  --brand-grad: linear-gradient(100deg, var(--color-blue) 0%, var(--color-cyan) 99.917%);

  /* --- 見出し ------------------------------------------------------------ */
  /* セクション見出し(h2)とサービス見出し(h3)の共通サイズルール（PC値） */
  --section-h2-size: clamp(36px, 3.3vw, 42px);
  --section-h2-line-height: 1.35;
  --service-h3-size: clamp(30px, 3.2vw, 38px);
  --service-h3-line-height: 1.28;
  --eyebrow-size: 38px;
  --heading-shadow: 0 0 5px rgba(255, 255, 255, 0.15);

  /* --- レイアウト -------------------------------------------------------- */
  --inner-max: 1200px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

html, body {
  height: 100%;
}

body {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   ファーストビュー（ヘッダー＋MV）の高さ。
   SPブラウザは 100vh を「ブラウザUIが隠れた最大の表示領域」として扱うため、
   アドレスバー/下部メニューが出ている初期表示ではMVが画面外にはみ出す。
   svh（= UI表示時の最小表示領域）を優先し、実際に見えている範囲に収める。
   dvh はスクロール中のUI開閉で高さが変わりガタつくため使わない。
   ========================================================================== */
.viewport-block {
  height: 100vh;  /* svh 非対応ブラウザ用フォールバック */
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* 固定ヘッダー分の高さを確保して、ファーストビューの構成を維持する */
  padding-top: var(--header-height);
}

/* svh非対応の古いiOS（15.4未満）だけ、JSが visualViewport から算出した
   --app-height を使う。JSが動かない場合は上の 100vh にフォールバックする。 */
@supports not (height: 100svh) {
  @media (max-width: 900px) {
    .viewport-block {
      height: var(--app-height, 100vh);
    }
  }
}

/* Header（全ページで追従する固定ヘッダー） */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  background: #000;
  border-bottom: 1px solid #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav__cta {
  --btn-grad: var(--brand-grad);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  min-width: 240px;
  border-radius: 4px;
  background: #000;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

.nav__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.nav__cta:hover::after {
  transform: scaleX(1);
}

.nav__cta > span {
  position: relative;
  z-index: 2;
  color: transparent;
  background-image: var(--btn-grad);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.35s ease;
}

/* Hero */
.hero {
  flex: 1 1 auto;
  position: relative;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

/* Marquee */
.marquee {
  position: absolute;
  left: 0;
  width: 100%;
  height: 9%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  opacity: .6;
}

.marquee--top {
  top: 4.8%;
}

.marquee--bottom {
  top: 88%;
  z-index: 3;
}

.marquee__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.marquee__track img {
  height: 100%;
  width: auto;
  aspect-ratio: 3593.84 / 67.4606;
  max-width: none;
  display: block;
  flex-shrink: 0;
  opacity: 0.55;
}

.marquee__track--rtl {
  animation: marquee-rtl 133.3s linear infinite;
}

.marquee__track--ltr {
  animation: marquee-ltr 133.3s linear infinite;
}

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Hero content (badge + headline) */
.hero__content {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 40px 58px 40px;
  pointer-events: none;
}

.hero__content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 16px 40px;
}

.hero__badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__reveal-mask {
  display: inline-flex;
  overflow: hidden;
}

.hero__reveal-mask--headline {
  display: block;
  width: 100%;
}

.hero__reveal-mask > * {
  transform: translateY(110%) rotate(3deg);
  transform-origin: left bottom;
  animation: hero-line-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform;
}

.hero__reveal-mask--badge > * {
  animation-delay: 0.42s;
}

.hero__reveal-mask--sub > * {
  animation-delay: 0.56s;
}

.hero__reveal-mask--headline > * {
  animation-delay: 0.7s;
}

@keyframes hero-line-rise {
  from {
    transform: translateY(110%) rotate(3deg);
  }

  to {
    transform: translateY(0) rotate(0);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  border-radius: 30px;
  background: linear-gradient(113.66deg, rgb(27, 57, 226) 0%, rgb(0, 151, 174) 99.917%);
  color: #fff;
  font-weight: 700;
  font-size: max(14px, 1.6vw);
  line-height: 1.2;
  white-space: nowrap;
}

.hero__badge-sub {
  font-weight: 900;
  font-size: max(14px, 1.9vw);
  letter-spacing: 0.87px;
  line-height: 1.2;
  color: #fff;
}

.hero__headline {
  font-weight: 900;
  font-size: clamp(13px, 5vw, 60px);
  letter-spacing: 0.74px;
  line-height: 1.28;
  color: #fff;
  white-space: nowrap;
}

.hero__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 113.75%;
  height: 120.73%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.photo {
  --scroll-shift: 280;
  --scroll-direction: -1;
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  background: #454545;
  will-change: transform;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.photo--1 { --scroll-shift: 140; z-index: 1; left: 0%; bottom: 28.90%; width: 22.89%; aspect-ratio: 375 / 261; }
.photo--6 { --scroll-shift: 520; z-index: 2; left: 11.42%; bottom: 70.86%; width: 18.50%; aspect-ratio: 303 / 211; }
.photo--2 { --scroll-shift: 260; z-index: 3; left: 25.21%; bottom: 17.17%; width: 23.02%; aspect-ratio: 377 / 541; }
.photo--kougi { --scroll-shift: 580; z-index: 4; left: 55.98%; top: 48.85%; width: 22.71%; aspect-ratio: 372 / 277; }
.photo--5 { --scroll-shift: 90; z-index: 5; left: 45.91%; bottom: 10%; width: 17.09%; aspect-ratio: 280 / 195; }
.photo--3 { --scroll-shift: 440; z-index: 6; left: 56.83%; bottom: 60.46%; width: 13.92%; aspect-ratio: 228 / 327; }
.photo--4 { --scroll-shift: 190; z-index: 7; left: 76.31%; bottom: 12.21%; width: 23.69%; aspect-ratio: 388 / 557; }

.photo--kougi {
  border-radius: 20px;
}

.glitch {
  position: relative;
  width: 100%;
  height: 100%;
}

.glitch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glitch__r,
.glitch__b {
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.glitch__r {
  filter: url(#glitch-purple) saturate(0.05);
}

.glitch__b {
  filter: url(#glitch-blue);
}

.photo.is-glitching .glitch__base {
  animation: glitch-slice 0.4s steps(2, end) 1;
}

.photo.is-glitching .glitch__r {
  opacity: 0.5;
  animation: glitch-slice-r 0.4s steps(2, end) 1;
}

.photo.is-glitching .glitch__b {
  opacity: 1;
  animation: glitch-slice-b 0.4s steps(2, end) 1;
}

@keyframes glitch-slice {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  10% { clip-path: inset(8% 0 78% 0); transform: translate(-2%, 0); }
  20% { clip-path: inset(62% 0 12% 0); transform: translate(2%, 0); }
  30% { clip-path: inset(30% 0 45% 0); transform: translate(-1.5%, 0); }
  40% { clip-path: inset(4% 0 84% 0); transform: translate(1.5%, 0); }
  50% { clip-path: inset(72% 0 8% 0); transform: translate(-2%, 0); }
  60% { clip-path: inset(18% 0 58% 0); transform: translate(2%, 0); }
  70% { clip-path: inset(48% 0 28% 0); transform: translate(-1%, 0); }
  80% { clip-path: inset(0 0 88% 0); transform: translate(1%, 0); }
  90% { clip-path: inset(88% 0 0 0); transform: translate(-1.5%, 0); }
}

@keyframes glitch-slice-r {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  15% { clip-path: inset(20% 0 60% 0); transform: translate(-3%, 1%); }
  35% { clip-path: inset(55% 0 20% 0); transform: translate(3%, -1%); }
  55% { clip-path: inset(10% 0 75% 0); transform: translate(-2.5%, 0); }
  75% { clip-path: inset(65% 0 10% 0); transform: translate(2.5%, 1%); }
  90% { clip-path: inset(35% 0 40% 0); transform: translate(-2%, 0); }
}

@keyframes glitch-slice-b {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  15% { clip-path: inset(45% 0 30% 0); transform: translate(3%, -1%); }
  35% { clip-path: inset(5% 0 82% 0); transform: translate(-3%, 1%); }
  55% { clip-path: inset(70% 0 15% 0); transform: translate(2.5%, 0); }
  75% { clip-path: inset(25% 0 55% 0); transform: translate(-2.5%, -1%); }
  90% { clip-path: inset(80% 0 5% 0); transform: translate(2%, 0); }
}

/* 02_outline */
.outline {
  position: relative;
  background: transparent;
}

.outline__bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.outline__bg {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.outline.is-revealed .outline__bg {
  opacity: 1;
  transform: scale(1);
}

.outline__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(0 0 0 / 20%);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

.outline__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 140px 120px;
}

/* About/Outlineは長文見出しのため、他セクションの --section-h2-size より
   小さい固定サイズを維持する意図的な例外 */
.outline__title {
  width: 100%;
  max-width: var(--inner-max);
  font-weight: 800;
  font-size: 36px;
  line-height: normal;
  color: #fff;
  text-shadow: var(--heading-shadow);
  margin: 0 auto 28px;
}

.outline__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  letter-spacing: 0.075em;
}

.outline__body p {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
color: #c2c2c2;
}

.outline__body .hl {
  color: #fff;
  font-size: 1.4em;
  line-height: 1.75em;
}

/* モグラエフェクト */
.mogura-mask {
  display: block;
  overflow: hidden;
}

.mogura-line {
  display: block;
  transform: translateY(110%) rotate(3deg);
  transform-origin: left bottom;
  will-change: transform;
}

.outline.is-revealed .mogura-line {
  animation: mogura-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.28s + var(--mogura-delay));
}

@keyframes mogura-rise {
  from {
    transform: translateY(110%) rotate(3deg);
  }

  to {
    transform: translateY(0) rotate(0);
  }
}

.outline__media {
  position: relative;
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  aspect-ratio: 1200 / 570;
  border-radius: 20px;
  overflow: hidden;
  background: #454545;
}

.outline__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.media-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
}

.media-toggle .icon-pause {
  display: flex;
  gap: 4px;
}

.media-toggle .icon-pause span {
  display: block;
  width: 4px;
  height: 16px;
  background: #fff;
  border-radius: 1px;
}

.media-toggle .icon-play {
  display: none;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #fff;
}

.media-toggle.is-paused .icon-pause {
  display: none;
}

.media-toggle.is-paused .icon-play {
  display: block;
}

/* 12_CTA④ */
.cta {
  --cta-color-progress: 0;
  --cta-shift: 72px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px;
  overflow: hidden;
  background: #e6ebf6;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #e6ebf6;
}

.cta__bg img {
  position: absolute;
  left: 0;
  top: -180px;
  width: 100%;
  height: calc(100% + 360px);
  max-width: none;
  object-fit: cover;
  object-position: center 56%;
  filter:
    grayscale(calc(1 - var(--cta-color-progress)))
    saturate(calc(0.08 + var(--cta-color-progress) * 0.92));
  opacity: calc(0.82 + var(--cta-color-progress) * 0.18);
  transform: translate3d(0, var(--cta-shift), 0) scale(1.015);
  transform-origin: center;
  will-change: transform, filter, opacity;
}

.cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(230 235 246 / calc(0.34 - var(--cta-color-progress) * 0.34));
  pointer-events: none;
}

.cta__text {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 30px;
  line-height: normal;
  text-align: center;
  color: #333333;
  max-width: 784px;
  margin-bottom: 40px;
  white-space: nowrap;
}

.cta.is-revealed .mogura-line {
  animation: mogura-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.12s + var(--mogura-delay));
}

/* ==========================================================================
   通常CTAセクション（背景画像つき / .cta・.cta--footer）のボタン。
   consult系CTA枠（.consultation-box__button）とは別コンポーネント。
   PCでは「学校･自治体･企業のご相談はこちら」を1行で表示する（カンプ準拠）。
   2行化するのは幅が足りないSP/TABのみで、その指定は各メディアクエリ側に持たせる。
   ========================================================================== */
.cta__button {
  --btn-grad: var(--brand-grad);
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 4px;
  background: #000;
  font-weight: 800;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.cta__button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.cta__button:hover::after {
  transform: scaleX(1);
}

.cta__button > span {
  position: relative;
  z-index: 2;
  color: transparent;
  background-image: var(--btn-grad);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.35s ease;
}

/* PCでは sub / main を行内に流して1行に繋げる。
   strong の UA既定（font-weight: bolder）で片方だけ太くならないよう継承させる。 */
.cta__button .cv-button__sub,
.cta__button strong {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

/* 03_Common Challenges */
.challenges {
  --btn-grad: var(--brand-grad);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 1092px;
  padding: 140px 120px;
  overflow: hidden;
  background: #000;
}

/* 相談CTA枠の見出しは枠自身の出現で発火させるため、セクション単位のこの指定からは除外する
   （セクション上端が見えた時点＝枠がまだ画面外のうちにアニメが終わってしまうのを防ぐ）。 */
.challenges.is-revealed .mogura-line:not(.consultation-box__title-line) {
  animation: mogura-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.1s + var(--mogura-delay));
}

.challenges__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.challenges__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
  -webkit-mask-image: radial-gradient(circle at center, #fff 0%, #fff 22%, transparent 62%);
  mask-image: radial-gradient(circle at center, #fff 0%, #fff 22%, transparent 62%);
}

.challenges__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: calc(100% + 15px);
  max-width: none;
  opacity: 0.45;
  transform: translate(-50%, -50%);
}

.challenges__frame--horizontal {
  width: calc(100% + 15px);
  height: 100%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.challenges__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--inner-max);
}

.challenges__title-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 80px;
  text-align: center;
  text-shadow: var(--heading-shadow);
}

/* ==========================================================================
   Eyebrow（英字ラベル）共通。font-family / color / line-height / text-shadow を
   1箇所で管理し、サイズだけ各セクションで上書きする。
   ========================================================================== */
.challenges__eyebrow,
.cases__eyebrow,
.process__eyebrow {
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--eyebrow-size);
  line-height: 1;
  color: var(--color-eyebrow);
  text-shadow: var(--heading-shadow);
}

.challenges__title {
  font-weight: 800;
  font-size: var(--section-h2-size);
  line-height: var(--section-h2-line-height);
  color: #fff;
}

.challenges__title-seg {
  white-space: nowrap;
}

.challenges__title-hl {
  font-size: 60px;
  line-height: 1;
}

.challenges__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  padding-bottom: 80px;
}

.challenge-card {
  min-height: 122px;
  padding: 1.6em 1.6em;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(144, 144, 144, 0.92);
  box-shadow: 0 0 15px rgba(22, 152, 230, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.challenge-card p {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
}

.challenge-card mark {
  display: inline;
  padding: 2px 2px 5px;
  background: linear-gradient(transparent 12%, var(--color-lime) 12%, var(--color-lime) 82%, transparent 82%);
  color: inherit;
}

.challenges__support {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 80px;
  font-weight: 800;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: center;
  color: #fff;
}

.challenges__support-seg {
  white-space: nowrap;
}

.challenges__support-small {
  font-size: clamp(22px, 2vw, 29px);
  letter-spacing: 0.03em;
}

.challenges__support-mid {
  font-size: clamp(32px, 3.1vw, 45px);
  letter-spacing: 0.03em;
}

.challenges__support strong {
  font-size: clamp(40px, 3.75vw, 55px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-lime);
}

@property --consult-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ==========================================================================
   相談CTA枠（challenges / services / cases 共通コンポーネント）。
   既存のセクション別クラスは残したまま .consultation-box を併用しており、
   枠線・発光・配置・余白はこの共通クラス1箇所で管理する。
   セクション固有の差（見出しサイズ・本文量による調整）だけ個別に上書きする。
   ========================================================================== */
.consultation-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: 40px;
  border: 1px solid var(--color-blue);
  border-radius: 10px;
}

/* 枠に沿って周回する発光ライン */
.consultation-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--consult-glow-angle),
    rgba(75, 231, 246, 0) 0deg,
    rgba(75, 231, 246, 0) 235deg,
    rgba(75, 231, 246, 0.55) 315deg,
    #9becff 348deg,
    #ffffff 357deg,
    rgba(75, 231, 246, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(3px)
    drop-shadow(0 0 5px rgba(75, 231, 246, 0.9))
    drop-shadow(0 0 12px rgba(75, 231, 246, 0.6))
    drop-shadow(0 0 20px rgba(75, 231, 246, 0.35));
  animation: consult-glow-travel 10s linear infinite;
  pointer-events: none;
}

@keyframes consult-glow-travel {
  to {
    --consult-glow-angle: 360deg;
  }
}

/* 発光ライン(::before)より前面に出す */
.consultation-box__text,
.consultation-box__button {
  position: relative;
  z-index: 1;
}

.consultation-box__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.consultation-box__title {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.3;
  color: #fff;
}

/* 見出しの改行位置制御。日本語はほぼ全文字間で改行可能なため、<wbr>を足すだけでは
   位置を指定できない。意味のまとまりを nowrap で固め、その境目（<wbr>）だけを
   改行候補として残すことで、狭い幅でも語の途中で割れないようにする。
   （challenges__title-seg / challenges__support-seg と同じ手法） */
.consultation-box__title-seg {
  white-space: nowrap;
}

/* 見出しのモグラエフェクト（3枠共通）。
   枠が画面に入ったタイミングで発火させるため、トリガーは枠自身の .is-revealed。
   セクション単位ではなく枠単位にすることで、3箇所とも同じ見え方になる。 */
.consultation-box.is-revealed .consultation-box__title-line {
  animation: mogura-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.1s + var(--mogura-delay, 0s));
}

.consultation-box__desc {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  color: #d2d2d2;
}

/* challenges の本文だけ一段暗いグレー（既存デザインを維持する意図的な例外） */
.challenges__consultation .consultation-box__desc {
  color: #c2c2c2;
}

/* challenges はPCのみ見出しを1行組みにし、本文も一段小さい。
   SP側の共通サイズに負けないよう、PC幅に限定して適用する。 */
@media (min-width: 901px) {
  .challenges__consultation .consultation-box__title {
    line-height: 1.25;
    white-space: nowrap;
  }

  /* <wbr> は white-space: nowrap でも改行機会として働いてしまうため、
     1行組みを保つPC幅では要素ごと消す（SP側の改行制御には影響しない）。 */
  .challenges__consultation .consultation-box__title wbr {
    display: none;
  }

  .challenges__consultation .consultation-box__desc {
    font-size: 18px;
    line-height: 1.5;
  }
}

.challenges__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 188px;
  padding: 16px 34px;
  border-radius: 4px;
  background: #000;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.challenges__button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.challenges__button:hover::after {
  transform: scaleX(1);
}

.challenges__button > span {
  position: relative;
  z-index: 2;
  color: transparent;
  background-image: var(--btn-grad);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.35s ease;
}

.challenges__button span span {
  font-size: 19px;
}

.challenges__button strong {
  font-size: 24px;
  letter-spacing: 1.2px;
}

@media (max-width: 1320px) and (min-width: 901px) {
  .challenges__support {
    font-size: 28px;
    letter-spacing: 0.02em;
    line-height: 1.68;
  }

  .challenges__support-small {
    font-size: 24px;
  }

  .challenges__support-mid {
    font-size: 38px;
  }

  .challenges__support strong {
    font-size: 46px;
  }
}

/* 05_サービス内容 */
.services {
  --svc-grad: var(--brand-grad);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0;
  overflow: hidden;
  background: #000;
}

.services__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.services__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
}

/* Glitch Slice：画像を5分割の帯に複製し、出現時に帯ごとバラバラにジッターさせてから
   定位置へ収束させる演出。https://codepen.io/positlabs/pen/xwMpez の手法を出現アニメ用に移植。
   使い方：.glitch-slice > .glitch-slice__base + .glitch-slice__mask--1〜5（各1枚ずつ同じ画像）
   祖先要素に is-revealed が付与されたタイミングで再生される。 */
.glitch-slice {
  position: relative;
  display: inline-block;
}

.glitch-slice__base {
  position: relative;
  display: block;
  opacity: 0;
}

.glitch-slice__mask {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.glitch-slice__mask img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 500%;
  display: block;
}

.glitch-slice__mask--1 { top: 0%; }
.glitch-slice__mask--1 img { top: 0%; }
.glitch-slice__mask--2 { top: 20%; }
.glitch-slice__mask--2 img { top: -100%; }
.glitch-slice__mask--3 { top: 40%; }
.glitch-slice__mask--3 img { top: -200%; }
.glitch-slice__mask--4 { top: 60%; }
.glitch-slice__mask--4 img { top: -300%; }
.glitch-slice__mask--5 { top: 80%; }
.glitch-slice__mask--5 img { top: -400%; }

@keyframes glitch-slice-base-in {
  0%, 35% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes glitch-slice-mask-out {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes glitch-slice-jitter-1 {
  0% { transform: translate(-8px, 3px); }
  20% { transform: translate(6px, -4px); }
  40% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -2px); }
  80% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-slice-jitter-2 {
  0% { transform: translate(9px, -2px); }
  25% { transform: translate(-6px, 4px); }
  50% { transform: translate(5px, -3px); }
  75% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-slice-jitter-3 {
  0% { transform: translate(-10px, -3px); }
  20% { transform: translate(7px, 5px); }
  45% { transform: translate(-5px, -2px); }
  70% { transform: translate(3px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-slice-jitter-4 {
  0% { transform: translate(6px, 4px); }
  30% { transform: translate(-9px, -3px); }
  55% { transform: translate(4px, 2px); }
  80% { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-slice-jitter-5 {
  0% { transform: translate(-5px, 5px); }
  20% { transform: translate(8px, -4px); }
  50% { transform: translate(-6px, 3px); }
  75% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

.services__intro.is-revealed .glitch-slice__base,
.service.is-revealed .glitch-slice__base {
  animation: glitch-slice-base-in 0.6s ease-out both;
}

.services__intro.is-revealed .glitch-slice__mask,
.service.is-revealed .glitch-slice__mask {
  animation: glitch-slice-mask-out 0.6s ease-out both;
}

.services__intro.is-revealed .glitch-slice__mask--1 img,
.service.is-revealed .glitch-slice__mask--1 img { animation: glitch-slice-jitter-1 0.55s steps(5, end) both; }
.services__intro.is-revealed .glitch-slice__mask--2 img,
.service.is-revealed .glitch-slice__mask--2 img { animation: glitch-slice-jitter-2 0.55s steps(5, end) both; }
.services__intro.is-revealed .glitch-slice__mask--3 img,
.service.is-revealed .glitch-slice__mask--3 img { animation: glitch-slice-jitter-3 0.55s steps(5, end) both; }
.services__intro.is-revealed .glitch-slice__mask--4 img,
.service.is-revealed .glitch-slice__mask--4 img { animation: glitch-slice-jitter-4 0.55s steps(5, end) both; }
.services__intro.is-revealed .glitch-slice__mask--5 img,
.service.is-revealed .glitch-slice__mask--5 img { animation: glitch-slice-jitter-5 0.55s steps(5, end) both; }

@media (prefers-reduced-motion: reduce) {
  .glitch-slice__base {
    opacity: 1;
    animation: none;
  }

  .glitch-slice__mask,
  .glitch-slice__mask img {
    animation: none;
    opacity: 0;
  }
}

.services__intro {
  position: relative;
  display: flex;
  min-height: 338px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.services__intro-circle {
  position: absolute;
  top: 0;
  width: 47.124%;
  aspect-ratio: 1;
  border: 1px solid rgba(220, 226, 246, 0.28);
  border-radius: 50%;
  background: rgba(220, 226, 246, 0.035);
  transition: transform 1.19s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.services__intro-circle--1 {
  left: 11.111%;
}

/* 初期状態：3つの円を左（円1の位置）に重ねる。セクションインで現在位置へ展開 */
.services__intro-circle--2 {
  left: 44.792%;
  transform: translateX(-71.47%);
  transition-delay: 0.075s;
}

.services__intro-circle--3 {
  left: 78.472%;
  transform: translateX(-142.94%);
  transition-delay: 0.15s;
}

.services__intro.is-revealed .services__intro-circle {
  transform: translateX(0);
}

.services__intro-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #fff;
  font-weight: 800;
}

.services__intro-brand {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 36px;
  line-height: 1.15;
  white-space: nowrap;
}

.services__intro-brand span {
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: 54px;
  line-height: 0.85;
  letter-spacing: 0;
}

.services__intro-main {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
}

.services__intro-main strong {
  display: inline-block;
  margin-right: 5px;
}

.services__intro-main strong .glitch-slice,
.services__intro-main strong .glitch-slice__base {
  display: block;
  height: 112px;
  width: auto;
}

.services__intro-main span {
  padding-bottom: 7px;
  color: #dce2f6;
  font-size: 36px;
}

.services__intro-main b {
  padding-bottom: 3px;
  font-size: 56px;
}

.services__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 200px;
}

.service {
  display: flex;
  flex-direction: column;
}

.service__head {
  padding: 0 120px 42px;
}

.service__title {
  padding-bottom: 50px;
}

.service__heading {
  display: flex;
  align-items: center;
  gap: 30px;
}

.service__heading > div {
  min-width: 0;
}

.service__number {
  display: block;
  flex: 0 0 auto;
}

.service__number .glitch-slice,
.service__number .glitch-slice__base {
  display: block;
  height: 83px;
  width: auto;
}

.service__eyebrow {
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  color: #fff;
}

/* サービス配下の小見出し（h3相当）。h2より一段小さいサイズを共通変数で管理 */
.service__name {
  font-weight: 800;
  font-size: var(--service-h3-size);
  line-height: var(--service-h3-line-height);
  color: #fff;
}

.service__line {
  display: block;
  height: 1px;
  margin-top: 15px;
  background: var(--svc-grad);
}

.service__desc {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.9;
  color: #d2d2d2;
}

.service__desc strong {
  font-weight: 800;
  font-size: 23px;
  color: #fff;
}

.service__band {
  position: relative;
  display: flex;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 100px 0;
  overflow: hidden;
}

.service__band-img {
  position: absolute;
  left: 0;
  top: -180px;
  width: 100%;
  height: calc(100% + 360px);
  max-width: none;
  object-fit: cover;
  transform: translate3d(0, var(--svc-shift, 0px), 0);
  will-change: transform;
}

.service__band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

.service__band-inner--left {
  justify-content: flex-start;
}

.service__band-inner--right {
  justify-content: flex-end;
}

.service-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 600px;
  max-width: 100%;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.035) 32%, rgba(7, 12, 18, 0.34) 68%, rgba(0, 0, 0, 0.28) 100%),
    rgba(9, 14, 20, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(26px) saturate(165%) brightness(1.04);
  -webkit-backdrop-filter: blur(26px) saturate(165%) brightness(1.04);
}

.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.service-card::before {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 18%, transparent 43%),
    radial-gradient(circle at 92% 112%, rgba(77, 190, 255, 0.16), transparent 38%);
  mix-blend-mode: screen;
}

.service-card::after {
  top: 0;
  left: 10%;
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  opacity: 0.72;
}

.service-card__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-card__label {
  font-weight: 500;
  font-size: 16px;
  color: #e8e8e8;
}

.service-card__list {
  list-style: disc;
  padding-left: 36px;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.8;
  color: #fff;
}

.service-card__list--sm {
  padding-left: 30px;
  font-size: 20px;
}

.service-card__results {
  list-style: disc;
  padding-left: 30px;
}

.service-card__results li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.service-card__results li:last-child {
  margin-bottom: 0;
}

.service-card__results strong {
  font-weight: 800;
  font-size: 24px;
  color: #fff;
}

.service-card__results span {
  font-size: 15px;
  color: #fff;
}

.service-card__results--sm strong {
  font-size: 20px;
}

.service-card__results--sm span {
  color: #d2d2d2;
}

.services__consult {
  margin: 0 120px;
  width: auto;
}

/* サイズ・色は .consultation-box__title / __desc 共通ルールが担当。

   max-width は services だけに必要な意図的な例外（共通化しないこと）。
   テキストブロック幅は見出しの長さで決まるため、見出しが最も長い services は
   PC幅で本文が832pxまで伸び、2行目に「ます。」だけが残る（実測 803px + 35px）。
   504pxで抑えると 503px + 335px のバランスした2行になる。
   ・challenges に同じ制限をかけると 489px + 86px の中途半端な2行になるため付けない
     （制限なしなら574pxで1行に収まる）
   ・cases は元々475pxで収まるため制限は不要（付けても無効）
   ビューポート約1100px未満では本文が504px以下になり、この指定は無効になる。 */
.services__consult-desc {
  max-width: 504px;
}

.services__consult-button {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 4px;
  background: #000;
  font-weight: 800;
  font-size: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.services__consult-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.services__consult-button:hover::after {
  transform: scaleX(1);
}

.services__consult-button > span {
  position: relative;
  z-index: 2;
  color: transparent;
  background-image: var(--svc-grad);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.35s ease;
}

/* small+strong の2行CVボタン内部レイアウト・文字サイズ（Services専用。
   .cta__button 側は自身の共通ルールで完結させ、ここには依存させない）。 */
.services__consult-button > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.services__consult-button .cv-button__sub {
  font-size: 19px;
  font-weight: 800;
}

.services__consult-button strong {
  margin-top: 3px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

/* 08_実績紹介 */
.cases {
  --cases-grad: var(--brand-grad);
  padding: 80px 120px;
  overflow: hidden;
  background: linear-gradient(to bottom, #28031e 0%, #100119 48%, #030022 100%);
}

.cases__inner {
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
}

.cases__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 80px;
  text-align: center;
}

/* cases だけ中間幅で縮める可変指定（他2つは固定38px） */
.cases__eyebrow {
  font-size: clamp(26px, 3vw, 38px);
}

.cases__title {
  width: 100%;
  padding-bottom: 15px;
  color: #fff;
  font-weight: 800;
  font-size: var(--section-h2-size);
  line-height: var(--section-h2-line-height);
  text-shadow: var(--heading-shadow);
}

.cases__title strong {
  font-size: clamp(36px, 4.7vw, 60px);
}

.cases__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--cases-grad);
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3%;
  padding-bottom: 100px;
}

.case-card {
  position: relative;
  display: flex;
  height: 480px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding-top: 40px;
  border-radius: 18px;
  color: #fff;
}

.case-card--blue {
  background: #605dff;
}

.case-card--red {
  background: #ff7b5d;
}

.case-card--green {
  background: #5dffa9;
}

.case-card__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  mix-blend-mode: multiply;
}

.case-card__content {
  position: relative;
  z-index: 2;
  padding: 0 14px;
}

.case-card__content h3 {
  display: flex;
  min-height: 60px;
  align-items: center;
  padding-bottom: 8px;
  font-weight: 800;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.6;
}

.case-card__content p {
  color: #e0e0e0;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.8;
}

.case-card__visual {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.case-card__visual img {
  position: absolute;
  max-width: none;
}

.case-card__visual--konami {
  width: 510px;
  height: 328px;
}

.case-card__visual--konami img {
  top: 0;
  left: -144px;
  width: 606px;
}

.case-card__visual--mihara {
  right: 0;
  left: auto;
  width: 516px;
  height: 241px;
  transform: none;
}

.case-card__visual--mihara img {
  top: -5px;
  left: 78px;
  width: 438px;
}

.case-card__visual--katsuura {
  width: 742px;
  height: 408px;
}

.case-card__visual--katsuura img {
  top: -6px;
  left: -109px;
  width: 780px;
}

/* サイズ・色は .consultation-box__title / __desc 共通ルールが担当 */

.cases__consult-button {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 4px;
  background: #000;
  text-decoration: none;
  white-space: nowrap;
}

.cases__consult-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.cases__consult-button:hover::after {
  transform: scaleX(1);
}

.cases__consult-button > span {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  line-height: 1.1;
  color: transparent;
  background-image: var(--cases-grad);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.35s ease;
}

.cases__consult-button .cv-button__sub {
  font-size: 20px;
}

.cases__consult-button strong {
  margin-top: 3px;
  font-size: 24px;
}

/* CVボタン共通: デフォルト #1B39E2→#0097AE、hoverで #0097AE→#48DC03 へスライド。
   PC/SP共通で必ずこの1本を使う（SP側で個別の背景を再指定しないこと） */
.nav__cta,
.cta__button,
.challenges__button,
.services__consult-button,
.cases__consult-button {
  background: var(--gradient-cv);
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: background-position 0.6s ease, transform 0.3s ease;
}

/* 旧レイヤー・グラデーション文字を無効化し、白文字ベタに */
.nav__cta::after,
.cta__button::after,
.challenges__button::after,
.services__consult-button::after,
.cases__consult-button::after {
  display: none;
}

.nav__cta > span,
.cta__button > span,
.challenges__button > span,
.services__consult-button > span,
.cases__consult-button > span {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

@media (hover: hover) {
  .nav__cta:hover,
  .cta__button:hover,
  .challenges__button:hover,
  .services__consult-button:hover,
  .cases__consult-button:hover {
    background-position: 100% 100%;
    transform: scale(0.97);
  }
}

/* 11_FAQ */
.faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 300px 120px;
  color: #333;
}

.faq__bg-video {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__bg-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: #FFFFFF8C;
  backdrop-filter: blur(54px);
  -webkit-backdrop-filter: blur(54px);
}

.faq__background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 720px;
  height: 280px;
  max-width: none;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  transform: translateX(-50%);
  pointer-events: none;
}

.faq__qa-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translateY(-34px);
}

.faq__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.faq__title {
  margin-bottom: 50px;
  font-weight: 800;
  font-size: var(--section-h2-size);
  line-height: var(--section-h2-line-height);
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 24px rgba(46, 65, 111, 0.05);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  cursor: pointer;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.faq-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.faq-item__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item__question-copy,
.faq-item__answer p {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
}

.faq-item__question-copy span,
.faq-item__answer span {
  min-width: 0;
}

.faq-item__question-copy b,
.faq-item__answer b {
  flex: 0 0 13px;
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.faq-item__question-copy b {
  color: var(--color-blue);
}

.faq-item__answer b {
  color: #ef2fbf;
}

.faq-item__toggle {
  position: relative;
  flex: 0 0 24px;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-cyan) 100%);
  box-shadow: 0 4px 10px rgba(27, 57, 226, 0.15);
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
  /* 開閉の体感を少しだけゆったりさせる（answer側の 0.4s と歩調を合わせる） */
  transition: transform 0.35s ease;
}

.faq-item__toggle::before {
  width: 2px;
  height: 10px;
}

.faq-item__toggle::after {
  width: 10px;
  height: 2px;
}

.faq-item.is-open .faq-item__toggle::before {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-item__answer {
  max-height: 0;
  margin: 0 28px;
  overflow: hidden;
  opacity: 0;
  /* 開閉速度：高さ0.4s / 不透明度0.32s。opacityを気持ち速めにして、
     開き切る前に本文が読み始められるようにする。 */
  transition: max-height 0.4s ease, margin-bottom 0.4s ease, opacity 0.32s ease;
}

.faq-item__answer p {
  min-height: 0;
}

.faq-item.is-open .faq-item__answer {
  max-height: 240px;
  margin-bottom: 22px;
  opacity: 1;
}

.faq-item:not(.is-open) .faq-item__answer {
  max-height: 0;
  margin-bottom: 0;
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 8px;
  border-radius: 2px;
}

/* 13_Process */
.process {
  position: relative;
  z-index: 1;
  margin-top: -30px;
  min-height: 857px;
  padding: 80px 120px;
  border-radius: 30px 30px 0 0;
  background: #000;
  color: #fff;
}

.process__inner {
  display: grid;
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  grid-template-columns: minmax(0, 400px) minmax(0, 740px);
  gap: 60px;
  align-items: start;
}

.process__intro {
  padding-bottom: 15px;
}

/* process だけ見出しとの間隔を持つ（challenges/cases は親のgapで制御） */
.process__eyebrow {
  margin-bottom: 8px;
}

.process__title {
  padding-bottom: 30px;
  font-weight: 800;
  font-size: var(--section-h2-size);
  line-height: var(--section-h2-line-height);
  text-shadow: var(--heading-shadow);
}

.process__lead {
  color: #d2d2d2;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: 0.07em;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 40px;
  list-style: none;
}

.process-step {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 14px;
  padding-top: 18px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-blue) 0%, var(--color-cyan) 100%) 1;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .process-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.process-step__number {
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  text-shadow: var(--heading-shadow);
}

.process-step h3 {
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  text-shadow: var(--heading-shadow);
}

.process-step p {
  color: #d2d2d2;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* 14_Footer */
.footer {
  padding: 64px 40px 40px;
  background: var(--color-blue);
  color: #000;
}

.footer__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.footer__operator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 25px;
}

.footer__operator a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.footer__operator-main {
  gap: 10px;
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
}

.footer__operator-main img {
  width: 26px;
  height: 26px;
}

.footer__operator-sub {
  gap: 5px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.footer__operator-sub img {
  width: 16px;
  height: 16px;
}

.footer__operator-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 60px;
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.footer__links a {
  color: inherit;
  font-size: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.footer__links span {
  font-size: 40px;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 35px;
  padding-bottom: 60px;
}

.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__socials img {
  display: block;
  object-fit: contain;
}

.footer__social-x {
  width: 54px;
  height: 56px;
}

.footer__social-youtube {
  width: 199px;
  height: 43px;
}

.footer__social-instagram {
  width: 56px;
  height: 56px;
}

.footer__copyright {
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

/* ==========================================================================
   テキストリンク / SNSアイコンの hover 演出：Duplicate Slide
   リンク内の中身を複製して真下に隠しておき、hover 時に中身だけ縦方向へ
   スライドさせて複製へ差し替える（参考: https://codepen.io/ajmnz/pen/bGwxOEb）。
   CTAボタンには適用しない。純CSSのため JS は不要。
   ========================================================================== */
.link-duplicate-hover {
  overflow: hidden;
}

.link-duplicate-hover__inner {
  position: relative;
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

/* 元テキストの真下に複製テキスト（data-text）を置き、overflow: hidden で隠す。
   --duplicate-slide-gap は、行の高さより背の高い器で複製を見える範囲の外へ
   押し出すための余白。通常のテキストリンクでは既定 0 でそのまま真下に付く。 */
.link-duplicate-hover__inner::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: calc(100% + var(--duplicate-slide-gap, 0px));
  width: 100%;
}

/* footer__links は下線付き。inline-block には親の text-decoration が乗らないため、
   内側要素と複製の両方に同じ下線を明示して既存の見た目を維持する。
   line-height を持たせて下線(offset 7px)を box 内に収めることで、スライド時に
   元テキストの下線が上端に残らないようにする（line-height は ::after にも継承される）。 */
.footer__links .link-duplicate-hover__inner,
.footer__links .link-duplicate-hover__inner::after {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  line-height: 1.5;
}

/* SNSアイコン：同じ画像を縦に2枚並べ（2枚目は真下に絶対配置）、hover で下の1枚へ差し替える。
   高さは1枚目の画像で決まるので、レスポンシブなアイコンサイズにそのまま追従する。 */
.icon-duplicate-hover {
  overflow: hidden;
}

.icon-duplicate-hover__inner {
  position: relative;
  display: block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.icon-duplicate-hover__inner img {
  display: block;
}

.icon-duplicate-hover__inner img + img {
  position: absolute;
  left: 0;
  top: 100%;
}

/* hover 可能な環境でのみスライドさせる（タッチデバイスでは通常表示のまま） */
@media (hover: hover) {
  .link-duplicate-hover:hover .link-duplicate-hover__inner {
    transform: translateY(calc(-100% - var(--duplicate-slide-gap, 0px)));
  }

  .icon-duplicate-hover:hover .icon-duplicate-hover__inner {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-duplicate-hover__inner,
  .icon-duplicate-hover__inner {
    transition: none;
  }

  .link-duplicate-hover:hover .link-duplicate-hover__inner,
  .icon-duplicate-hover:hover .icon-duplicate-hover__inner {
    transform: none;
  }
}

/* ==========================================================================
   Footer 最下段。
   PC: 変更前と同じ横並び（copyright 左 / Scroll TOP 右、space-between）。
   SP: SNSアイコンの下に Scroll TOP を中央配置し、その下に copyright を置く
   （縦積み）。DOM順は「Scroll TOP → copyright」で固定し、PCでは order で
   copyright を視覚的に先頭（左）へ持ってくる。
   Scroll TOP は他のfooterリンクと同じトーン（下線＋Duplicate Slide hover）に
   揃え、CTAのようなボタン扱いにはしない。
   ========================================================================== */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* DOM上は Scroll TOP が先だが、PCでは copyright を左に見せる */
.footer__bottom .footer__copyright {
  order: -1;
}

.footer__scroll-top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-family: "Rajdhani", YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  text-decoration: none;
}

/* 下線は内側テキスト（複製含む）に付ける。リンク全体に付けるとアイコンまで
   下線が伸びてしまうため。overflow:hidden の中でスライドさせる都合上、
   line-height で下線を要素内に収める（footer__links と同じ手法）。 */
.footer__scroll-top .link-duplicate-hover__inner,
.footer__scroll-top .link-duplicate-hover__inner::after {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  line-height: 1.4;
}

.footer__scroll-top-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  color: var(--color-blue);
  font-size: 18px;
  line-height: 1;
}

.footer__scroll-top:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

@media (max-width: 1200px) {
  .service__head {
    padding: 0 20px 42px;
  }

  .outline__inner {
    padding: 140px 20px;
  }

  .cta {
    padding: 120px 20px;
  }

  .challenges {
    padding: 140px 20px;
  }

  .cases {
    padding: 80px 20px;
  }

  /* .services はセクション側に左右paddingを持たないため、CV枠のマージンで
     他セクション（20px）と同じ内側位置に揃える。PCの120pxのままだと
     タブレット幅で相談枠だけ極端に細くなる。 */
  .services__consult {
    margin-inline: 20px;
  }

  .faq {
    padding: 300px 20px;
  }

  .process {
    padding: 80px 20px;
  }

  .footer {
    padding: 64px 20px 40px;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  /* ==========================================================================
     タブレット幅: CVボタン（header の .nav__cta を除く）の見た目を統一する。
     PCベースのままだと .cta__button だけ1行構成で幅が突出し、他の
     small+strong構成のボタンはテキスト量差で幅がバラバラになるため、
     ここで幅・高さ・padding・文字サイズ・改行構造を1箇所にまとめて揃える。
     幅は 900px以下と同じ「challenges__button 基準の340px」に合わせて一貫させる。
     ========================================================================== */
  :root {
    --tablet-cv-width: 340px;
    --tablet-cv-sub-size: 17px;
    --tablet-cv-main-size: 23px;
    --tablet-cv-line-height: 1.15;
  }

  .cta__button,
  .challenges__button,
  .services__consult-button,
  .cases__consult-button {
    width: min(100%, var(--tablet-cv-width));
    max-width: var(--tablet-cv-width);
    min-height: 64px;
    padding: 14px 28px;
    margin-inline: auto;
    box-sizing: border-box;
    line-height: var(--tablet-cv-line-height);
    text-align: center;
  }

  .cta__button .cv-button__sub,
  .challenges__button span span,
  .services__consult-button .cv-button__sub,
  .cases__consult-button .cv-button__sub {
    display: block;
    font-size: var(--tablet-cv-sub-size);
    font-weight: 800;
    line-height: var(--tablet-cv-line-height);
    letter-spacing: 0.05em;
  }

  .cta__button strong,
  .challenges__button strong,
  .services__consult-button strong,
  .cases__consult-button strong {
    display: block;
    margin-top: 3px;
    font-size: var(--tablet-cv-main-size);
    font-weight: 800;
    line-height: var(--tablet-cv-line-height);
    letter-spacing: 0.05em;
  }

  .cta__button > span,
  .challenges__button > span,
  .services__consult-button > span,
  .cases__consult-button > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: var(--tablet-cv-line-height);
  }

  /* challenges__button のHTMLには裸の<br>があり、span/strongをblock化すると
     余分な行として残ってしまう（SPと同じ現象）ため、ここでも非表示にする */
  .challenges__button > span br {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 51px;
    /* SP: 見出しの共通サイズを一段下げる */
    --section-h2-size: clamp(28px, 7.2vw, 32px);
    --service-h3-size: clamp(22px, 6.2vw, 26px);
    --service-h3-line-height: 1.42;
    /* SP: CVボタン（header の .nav__cta を除く）共通のサイズ・行間・padding */
    --sp-cv-sub-size: 16px;
    --sp-cv-main-size: 21px;
    --sp-cv-line-height: 1.18;
    --sp-cv-padding: 14px 16px;
    /* eyebrow: cases/process はSPで30px。challenges だけ後述の例外で18px */
    --eyebrow-size: 30px;
  }

  /* ==========================================================================
     SP: CVボタン共通ルール（.nav__cta は対象外）。
     width/max-width・背景グラデーションは各ボタンの個別ブロックで維持し、
     文字サイズ階層・line-height・paddingだけをここで一括管理する。
     ========================================================================== */
  .cta__button,
  .challenges__button,
  .services__consult-button,
  .cases__consult-button {
    min-height: 56px;
    max-width: 340px;
    padding: var(--sp-cv-padding);
    margin-inline: auto;
    box-sizing: border-box;
    line-height: var(--sp-cv-line-height);
    text-align: center;
    /* 親が align-items: flex-start のセクションでも、CVボタンだけは
       challenges__button を基準にした 340px 幅のまま中央に配置する */
    align-self: center;
  }

  /* small+strong（challengesはspan+strong）を縦積みするため column flex にする */
  .cta__button > span,
  .challenges__button > span,
  .services__consult-button > span,
  .cases__consult-button > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: var(--sp-cv-line-height);
  }

  .cta__button .cv-button__sub,
  .challenges__button span span,
  .services__consult-button .cv-button__sub,
  .cases__consult-button .cv-button__sub {
    display: block;
    font-size: var(--sp-cv-sub-size);
    font-weight: 800;
    line-height: var(--sp-cv-line-height);
    letter-spacing: 0.05em;
  }

  .cta__button strong,
  .challenges__button strong,
  .services__consult-button strong,
  .cases__consult-button strong {
    display: block;
    margin-top: 3px;
    font-size: var(--sp-cv-main-size);
    font-weight: 800;
    line-height: var(--sp-cv-line-height);
    letter-spacing: 0.05em;
  }

  .header {
    height: var(--header-height);
    padding: 0 10px;
  }

  /* SPは footer 全体を中央寄せに統一する（operator / links / socials /
     Scroll TOP / copyright すべて） */
  .footer__operator {
    align-items: center;
    text-align: center;
  }

  .footer__links {
    justify-content: center;
  }

  /* SPのみ縦積みにする。SNSアイコンの下に Scroll TOP を中央配置し、
     その下に copyright を置く（PCの order:-1 はSPでは無効化し、
     DOM順=Scroll TOP→copyright のまま並べる） */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .footer__bottom .footer__copyright {
    order: 0;
    align-self: center;
    text-align: center;
  }

  .footer__scroll-top {
    align-self: center;
    gap: 10px;
    font-size: 20px;
  }

  .footer__scroll-top-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .logo img {
    height: 28px;
  }

  .nav__cta {
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    border: none;
  }

  .nav__cta::after {
    display: none;
  }

  .nav__cta > span {
    color: #fff;
  }

  .marquee {
    height: 8%;
  }

  .marquee--top {
    top: 4%;
  }

  .marquee--bottom {
    top: 89.62%;
  }

  .hero__content {
    padding: 80px 0 72px;
  }

  .hero__content-inner {
    gap: 12px;
    padding: 16px 10px;
  }

  .hero__badge-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero__reveal-mask--sub {
    width: 100%;
  }

  .hero__badge {
    font-size: 16px;
  }

  .hero__badge-sub {
    font-size: 22px;
    letter-spacing: 0.78px;
    line-height: 1.4;
    width: 100%;
    white-space: normal;
  }

  .hero__headline {
    font-size: 44px;
    letter-spacing: 0.55px;
    width: 100%;
    white-space: normal;
  }

  .hero__stage {
    left: 10px;
    top: 0;
    width: calc(100% - 20px);
    height: 100%;
    transform: none;
  }

  /* Figma「iPhone 17 - 1」(node 197:1856) の実測値を反映したはみ出しコラージュ。
     mvpic_D/F/E はFigma上では元画像の向き違いを補正するため-90°回転していたが、
     こちらの画像アセットは正しい向きなので回転はせず、見た目のバウンディングボックス寸法で配置する。 */
  .photo--6 { --scroll-shift: 320; left: -8.6%; top: 8.4%; width: 54.7%; aspect-ratio: 209 / 146; bottom: auto; border-radius: 7px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.25); }
  .photo--3 { --scroll-shift: 280; left: 59.5%; top: 0%; width: 34%; aspect-ratio: 130 / 187; bottom: auto; border-radius: 7px; box-shadow: none; }
  .photo--1 { --scroll-shift: 100; left: -14.3%; top: 29.65%; width: 56.3%; aspect-ratio: 215 / 150; bottom: auto; border-radius: 7px; box-shadow: none; }
  .photo--4 { --scroll-shift: 130; left: 61.9%; top: 30.3%; width: 58.1%; aspect-ratio: 222 / 319; bottom: auto; border-radius: 7px; box-shadow: none; }
  .photo--kougi { --scroll-shift: 360; left: 25.5%; top: 38.6%; width: 41.4%; aspect-ratio: 158 / 118; bottom: auto; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); }
  .photo--2 { --scroll-shift: 170; left: -5.5%; top: 59.3%; width: 56.5%; aspect-ratio: 216 / 310; bottom: auto; border-radius: 7px; box-shadow: none; }
  .photo--5 { --scroll-shift: 60; left: 69.9%; top: 78.1%; width: 41.9%; aspect-ratio: 160 / 112; bottom: auto; border-radius: 7px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.25); }

  .outline__inner {
    /* gapを外し、各要素のmarginだけで間隔を作る。
       以前はgap(60px)とoutline__titleのmargin-bottom(28px)が二重にかかり
       タイトル→本文(88px)と本文→動画(60px)で間隔がバラバラになっていた。 */
    gap: 0;
    padding: 90px 16px;
  }

  /* 長文h2の例外：他h2より一段小さめの可変サイズにする */
  .outline__title {
    font-size: clamp(22px, 5.8vw, 28px);
    line-height: 1.5;
  }

  .outline__body {
    margin-bottom: 44px;
    letter-spacing: 0.05em;
  }

  .outline__body p {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.7;
  }

  .outline__media {
    border-radius: 10px;
  }

  .outline__bg {
    width: 80%;
    height: 40%;
  }

  .cta {
    padding: 80px 16px;
  }

  .cta__text {
    font-size: 26px;
    max-width: none;
  }

  /* width/max-width は上の共通CVボタンルール（challenges__button基準の340px）に従う。
     small/strong はそれぞれ独立した行のため、通常CTA/Footer CTAとも折り返さない */
  .cta__button {
    width: 100%;
    white-space: nowrap;
    border: none;
  }

  .cta__button::after {
    display: none;
  }

  .cta__button > span {
    color: #fff;
  }

  /* SPは Figma node 341:836（03_課題提起）の実測値に合わせる */
  .challenges {
    min-height: auto;
    padding: 80px 0;
  }

  .challenges__title-block {
    padding: 0 15px 40px;
  }

  /* challenges の eyebrow は Figma(node 341:836)準拠で他より小さい。意図的な例外 */
  .challenges__eyebrow {
    font-size: 18px;
  }

  /* cases はPC中間幅用の clamp を持つため、SPでは共通値(--eyebrow-size)に戻す */
  .cases__eyebrow {
    font-size: var(--eyebrow-size);
  }

  /* h2サイズは共通変数（--section-h2-size）が担当。SPでは分割セグメントを
     折り返し可にして、大きくしたベース文字が横にはみ出さないようにする。
     強調語（壁／突破する）だけ nowrap で割れないよう保護する。 */
  .challenges__title-seg {
    white-space: normal;
  }

  .challenges__title-hl {
    font-size: clamp(32px, 9vw, 38px);
    white-space: nowrap;
  }

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

  .challenge-card {
    min-height: 0;
    padding: 20px;
  }

  .challenge-card p {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: 0.396px;
  }

  /* Figma node 348:909 の3行組み。
     1行目「TEQWINGが企画から実施まで」/ 2行目「ワンストップで」/ 3行目「サポートします」 */
  .challenges__support {
    display: block;
    padding-bottom: 0;
    font-size: clamp(18px, 5.1vw, 20px);
    line-height: 1.6em;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: normal;
  }
  .challenges__support wbr {
    display: none;
  }
  /* 各行は nowrap で1まとまりに保ち、強調語（ワンストップ／サポート）を途中で割らない。
     行の分割は下の support-mid::after の強制改行(\A)で制御する。 */
  .challenges__support-seg {
    display: block;
    white-space: nowrap;
  }

  .challenges__support-small {
    font-size: clamp(16px, 4.6vw, 18px);
  }

  .challenges__support-mid {
    font-size: clamp(26px, 7.4vw, 30px);
  }

  .challenges__support strong {
    font-size: clamp(30px, 9.2vw, 36px);
    line-height: 1.05;
    white-space: nowrap;
  }

  /* 「サポートします」を3行目に送る */
  .challenges__support-mid::after {
    content: "\A";
    white-space: pre;
  }

  /* 「します」はカンプ上「で」と同じサイズ（可変） */
  .challenges__support-seg:last-child > span:last-child {
    font-size: clamp(26px, 7.4vw, 30px);
  }

  /* ========================================================================
     SP: 相談CTA枠は3セクション共通で縦積み・中央揃えにする
     （challenges__consultation の見え方を正とする）。
     親がフル幅のセクションでは width:auto + 左右マージンで15px内側に収める。
     ======================================================================== */
  .consultation-box {
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 24px;
    width: auto;
    max-width: none;
    padding: 24px 18px;
    box-sizing: border-box;
  }

  .consultation-box__text {
    align-items: center;
    gap: 20px;
  }

  .consultation-box__title {
    font-size: 25px;
    text-align: center;
    letter-spacing: 0.728px;
    white-space: normal;
  }

  .consultation-box__desc {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.484px;
  }

  /* challenges だけ上のサポート文との間隔を持つ */
  .challenges__consultation {
    margin-top: 30px;
  }

  .challenges__button {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    border: none;
  }

  .challenges__button::after {
    display: none;
  }

  .challenges__button > span {
    color: #fff;
  }

  /* span/strongをflex-columnで縦積みするため、PCの2行表示に使っていた<br>は不要になる。
     消すとPC側の改行手段がなくなるためHTMLは変更せず、SPだけ非表示にして余分な行間を消す */
  .challenges__button > span br {
    display: none;
  }

  .services {
    padding: 80px 0;
  }

  .services__inner {
    gap: 80px;
  }

  .services__intro {
    min-height: 193px;
    padding: 30px 20px;
  }

  /* ベン図の重なり円（Figma node 341:728）。402px幅のカンプで
     left:66px / top:15.88px / 幅432px・円1つ178pxを比率換算した値 */
  .services__intro-circle {
    top: 16px;
    width: 44.3%;
  }

  .services__intro-circle--1 {
    left: 16.4%;
  }

  .services__intro-circle--2 {
    left: 48%;
  }

  .services__intro-circle--3 {
    left: 79.6%;
  }

  /* SPはイントロの2行をそれぞれ中央揃えにする（Figma node 341:733） */
  .services__intro-copy {
    align-items: center;
    gap: 14px;
  }

  .services__intro-brand,
  .services__intro-main {
    justify-content: center;
  }

  .services__intro-brand {
    gap: 5px;
    font-size: 24px;
  }

  .services__intro-brand span {
    font-size: 40px;
  }

  .services__intro-main strong .glitch-slice,
  .services__intro-main strong .glitch-slice__base {
    height: 80px;
  }

  .services__intro-main span {
    padding-bottom: 4px;
    font-size: 30px;
  }

  .services__intro-main b {
    padding-bottom: 2px;
    font-size: 38px;
  }

  .services__body {
    gap: 104px;
  }

  .service__head {
    padding: 0 16px 34px;
  }

  .service__title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 40px;
  }

  /* SPは番号バッジを見出しの上に積み、見出しブロック全体を中央揃えにする（Figma node 341:757） */
  .service__heading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 15px;
    width: 100%;
  }

  .service__heading > div {
    width: 100%;
    text-align: center;
  }

  .service__number {
    padding-top: 0;
  }

  /* SPは番号画像・見出しを一段小さくして、サービスブロックの圧を下げる */
  .service__number .glitch-slice,
  .service__number .glitch-slice__base {
    height: clamp(38px, 11vw, 46px);
  }

  .service__eyebrow {
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.45;
  }

  /* .service__name のサイズは共通変数（--service-h3-size）が担当（SP: 22-26px） */

  .service__desc {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.75;
  }

  .service__desc strong {
    font-size: 19px;
  }

  .service__band {
    padding: 40px 0;
  }

  /* SPはカードを左右交互ではなく全幅で表示する（Figma node 341:771） */
  .service__band-inner,
  .service__band-inner--right {
    padding: 0 20px;
    justify-content: flex-start;
  }

  .service-card {
    gap: 24px;
    width: 100%;
    padding: 20px;
  }

  .service-card__group {
    gap: 16px;
  }

  .service-card__list {
    padding-left: 24px;
    font-size: 16px;
  }

  .service-card__list--sm {
    padding-left: 24px;
    font-size: 15px;
  }

  .service-card__results strong {
    font-size: 17px;
  }

  .service-card__results--sm strong {
    font-size: 16px;
  }

  .service-card__results span {
    font-size: 12px;
  }

  /* 配置・余白は .consultation-box 共通ルールに従う。
     見出しは本文が他2枠より長いため、1段小さいサイズを例外として維持する。 */
  .services__consult-title {
    font-size: 22px;
  }

  .services__consult-desc {
    font-size: 15px;
  }

  /* width/max-width は上の共通CVボタンルールに従う（challenges__button基準の340px）。
     親(.consultation-box)の align-items:center と共通ルールの align-self:center で
     中央に配置される */
  .services__consult-button {
    width: 100%;
    border: none;
  }

  .services__consult-button::after {
    display: none;
  }

  .services__consult-button > span {
    color: #fff;
  }

  .cases {
    padding: 70px 16px;
  }

  .cases__header {
    padding-bottom: 46px;
  }

  .case-card__content h3 {
    font-size: 21px;
    line-height: 1.4;
  }

  .case-card__content p {
    font-size: 15px;
    line-height: 1.7;
  }

  /* .cases__title のサイズは共通変数（--section-h2-size）が担当。strong のみ強調維持 */
  .cases__title strong {
    font-size: 40px;
  }

  .cases__grid {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
    gap: 24px;
    padding-bottom: 70px;
  }

  /* 配置・余白は .consultation-box 共通ルールに従う */
  .cases__consult-desc {
    font-size: 16px;
  }

  /* PCの意図的な改行はSPでは自然な折り返しに任せる */
  .br-pc-only {
    display: none;
  }

  /* width/max-width は上の共通CVボタンルールに従う（challenges__button基準の340px）。
     親(.consultation-box)の align-items:center と共通ルールの align-self:center で
     中央に配置される */
  .cases__consult-button {
    width: 100%;
    border: none;
  }

  .cases__consult-button::after {
    display: none;
  }

  .cases__consult-button > span {
    color: #fff;
  }

  .faq {
    padding: 190px 12px 96px;
  }

  .faq__background {
    top: 0;
    width: 620px;
    height: 240px;
  }

  .faq__qa-svg {
    transform: translateY(-48px);
  }

  .faq__title {
    margin-bottom: 24px;
  }

  .faq-item__question {
    gap: 16px;
    padding: 18px;
  }

  .faq-item {
    background: rgba(255, 255, 255, 0.4);
  }

  .faq-item__question-copy,
  .faq-item__answer p {
    gap: 12px;
    font-size: 16px;
    line-height: 1.65;
  }

  .faq-item__question-copy b,
  .faq-item__answer b {
    font-size: 27px;
  }

  .faq-item__answer {
    margin-right: 18px;
    margin-left: 18px;
  }

  .faq-item.is-open .faq-item__answer {
    margin-bottom: 18px;
  }

  .process {
    min-height: 0;
    margin-top: -22px;
    padding: 70px 20px;
    border-radius: 22px 22px 0 0;
  }

  .process__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .process__title {
    padding-bottom: 22px;
  }

  .process__lead {
    font-size: 16px;
    line-height: 1.75;
  }

  .process__steps {
    gap: 24px;
    padding-top: 0;
  }

  .process-step {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
    padding-top: 15px;
  }

  .process-step__number {
    font-size: 30px;
  }

  .process-step h3 {
    font-size: 20px;
    line-height: 1.75;
  }

  .process-step p {
    font-size: 14px;
    line-height: 1.75;
  }

  .footer {
    padding: 48px 20px 32px;
  }

  .footer__operator-main {
    font-size: 29px;
  }

  .footer__operator-main img {
    width: 22px;
    height: 22px;
  }

  .footer__operator-sub {
    font-size: 14px;
  }

  .footer__links {
    gap: 16px;
    padding-bottom: 46px;
  }

  .footer__links a {
    font-size: 31px;
  }

  .footer__links span {
    font-size: 22px;
  }

  /* SNSアイコンは中央寄せ。SNS→Scroll TOP の間隔は footer__bottom の
     padding-top で作るため、ここでは padding-bottom を持たせない */
  .footer__socials {
    justify-content: center;
    gap: 39px;
    padding-bottom: 0;
  }

  .footer__bottom {
    padding-top: 59px;
  }

  .footer__social-x,
  .footer__social-instagram {
    width: 36px;
    height: 36px;
  }

  .footer__social-youtube {
    width: 130px;
    height: auto;
  }

  .footer__copyright {
    font-size: 21px;
  }

  /* ==========================================================================
     SP: 通常コンテンツの左右余白を 15px に統一。
     背景帯・フル幅画像（100vw）は対象外。padding-left/right の longhand で
     縦paddingは各セクションの指定を維持したまま横だけ揃える。
     ========================================================================== */
  .hero__content-inner,
  .outline__inner,
  .cta,
  .service__head,
  .service__band-inner,
  .service__band-inner--right,
  .cases,
  .faq,
  .process,
  .footer,
  .challenges__title-block,
  .challenges__cards {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* challenges / services はセクション側に左右paddingが無いため、CV枠自身の
     マージンで15px内側に寄せる。cases は .cases の左右padding(15px)で揃うので不要。 */
  .challenges__consultation,
  .services__consult {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width: 640px) {
  .cta__text {
    font-size: 22px;
  }
}

@media (max-width: 520px) {
  .cta__text {
    font-size: 18px;
  }
}

@media (max-width: 430px) {
  .cta__text {
    font-size: 17px;
  }

  .faq {
    padding: 180px 15px 84px;
  }

  .faq__background {
    top: 0;
    width: 540px;
    height: 226px;
  }

  .faq__qa-svg {
    transform: translateY(-44px);
  }

  .faq-item__question {
    padding: 16px 14px;
  }

  .faq-item__question-copy,
  .faq-item__answer p {
    gap: 10px;
    font-size: 15px;
  }

  .faq-item__question-copy b,
  .faq-item__answer b {
    flex-basis: 12px;
    font-size: 25px;
  }

  .faq-item__toggle {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .faq-item__answer {
    margin-right: 14px;
    margin-left: 14px;
  }

  .faq-item.is-open .faq-item__answer {
    margin-bottom: 16px;
  }

  .process {
    padding: 56px 15px;
  }

  /* 430px以下は横paddingのみ追加で詰める（フォントサイズは通常のSP共通値のまま） */
  .cta__button {
    padding: 14px 12px;
  }

  .process__inner {
    gap: 32px;
  }

  .process__lead {
    font-size: 15px;
  }

  .process__lead br {
    display: none;
  }

  .process-step h3 {
    font-size: 19px;
  }

  .footer {
    padding: 40px 15px 28px;
  }

  .footer__operator-main {
    gap: 7px;
    font-size: 24px;
  }

  .footer__operator-sub {
    font-size: 12px;
  }

  .footer__links {
    gap: 11px;
    padding-bottom: 40px;
  }

  .footer__links a {
    font-size: 25px;
  }

  .footer__links span {
    font-size: 21px;
  }

  /* padding-bottom は 900px 側で 0 にしている（間隔は footer__bottom が担当）。
     gap / padding-top は 900px 側と同じ幅だけ広げて、SP全体で間隔感を揃える。 */
  .footer__socials {
    gap: 33px;
  }

  .footer__bottom {
    padding-top: 51px;
    gap: 26px;
  }

  .footer__social-x,
  .footer__social-instagram {
    width: 39px;
    height: 39px;
  }

  .footer__social-youtube {
    width: 140px;
  }

  .footer__copyright {
    font-size: 17px;
  }
}

@media (max-width: 360px) {
  .cta__text {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__reveal-mask > * {
    transform: none;
    animation: none;
  }

  .outline__bg {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* モグラエフェクトはトリガー側（.is-revealed）が高い詳細度で animation を指定するため、
     抑制側も同じ詳細度のセレクタを個別に列挙しないと打ち消せない。
     新しくモグラを追加したときは、ここへの追記も忘れないこと。 */
  .mogura-line,
  .outline.is-revealed .mogura-line,
  .cta.is-revealed .mogura-line,
  .challenges.is-revealed .mogura-line:not(.consultation-box__title-line),
  .consultation-box.is-revealed .consultation-box__title-line {
    transform: none;
    animation: none;
  }

  .consultation-box::before {
    animation: none;
  }

  /* FAQの開閉は動作自体は残しつつ、トランジションだけ無くして即時に切り替える */
  .faq-item__answer,
  .faq-item__toggle::before,
  .faq-item__toggle::after {
    transition: none;
  }
}