@charset "UTF-8";

/* -------- minimal reset -------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--night); background-color: var(--cloud); }
body.is-nav-open { overflow: hidden; }
body.is-modal-open {
  position: fixed;
  overflow: hidden;
  width: 100%;
}
h1, h2, h3, p, figure, dl, dt, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ==========================================================
 共通
========================================================== */

:root {
  /* Primary */
  --sun: #ffda1b;
  --water: #447fe0;

  /* Secondary */
  --night: #202226;
  --cloud: #ffffff;
  --leaf: #2f7417;

  /* Support: Gray */
  --gr-50: #fafafc;
  --gr-75: #f8f8fa;
  --gr-100: #f0f1f5;
  --gr-150: #e5e6ea;
  --gr-200: #dadcdf;
  --gr-250: #d0d1d3;
  --gr-300: #acadb0;
  --gr-350: #a0a1a4;
  --gr-400: #949598;
  --gr-500: #737378;
  --gr-550: #65656a;
  --gr-600: #56575b;

  /* Support: Lychee */
  --ly-50: #fdf3f1;
  --ly-100: #fec3bb;
  --ly-200: #fe9384;
  --ly-300: #ea705f;
  --ly-400: #d64c3a;
  --ly-500: #c23b32;
  --ly-600: #ad2929;

  /* Support: Avocado */
  --av-50: #ecfaec;
  --av-100: #a7e7a5;
  --av-200: #61d45d;
  --av-300: #49bb50;
  --av-400: #30a143;
  --av-500: #197f38;
  --av-600: #025d2c;

  /* Support: Prune */
  --pu-50: #edf6ff;
  --pu-100: #a2caf9;
  --pu-200: #579ef2;
  --pu-300: #4b86df;
  --pu-400: #3f6ecc;
  --pu-500: #385296;
  --pu-600: #303560;

  /* Support: Papaya */
  --pa-50: #fffbd9;
  --pa-100: #ffde75;
  --pa-200: #fec010;
  --pa-300: #f69908;
  --pa-400: #ee7100;
  --pa-500: #b15e0b;
  --pa-600: #734b15;

  /* Support: Sand */
  --sa-50: #fbf8ee;
  --sa-200: #f8f3e1;
  --sa-400: #f3eacf;
  --sa-600: #eddfbb;

  /* Gradation / AI */
  --ai-yellow: #ffda1b;
  --ai-blue: #447fe0;
  --ai-green: #7db298;

  /* Talent intelligence（Use Cases配色） */
  --sk-50: #e6f7ff;
  --sk-200: #5db5de;
  --sk-300: #1e9cd7;
  --pur-50: #ede8ff;
  --pur-200: #a38bff;
  --pur-300: #7a61da;
  --pur-400: #674ccd;
  --pi-50: #ffedfe;
  --pi-200: #ec8fe7;
  --pi-300: #d860d2;

  /* Use Cases: 紺色背景 */
  --nv-900: #142f5a;
  --nv-700: #244373;

  /* english */
  --inter: "Inter", sans-serif;
  --ubuntu: "Ubuntu", sans-serif;

  /* KTiブランド固有トークン（Figma変数より） */
  --kti-black: #1a1b1f;
  --kti-glass-bg: rgba(255, 255, 255, 0.7);
  --kti-glass-blur: blur(20px);
  --kti-shadow-01: 0 10px 40px 0 rgba(228, 221, 252, 0.04), 0 4px 30px 0 rgba(228, 221, 252, 0.07), 0 1px 20px 0 rgba(228, 221, 252, 1);
  --kti-shadow-02: 0 10px 12px 0 rgba(32, 34, 38, 0.04), 0 4px 8px 0 rgba(32, 34, 38, 0.07), 0 1px 4px 0 rgba(32, 34, 38, 0.12);
  --kti-primary-color: #eef2fe;
  --kti-gradation: linear-gradient(99deg, var(--pi-300) 1.37%, #8b78d4 20.65%, var(--water) 39.19%, var(--water) 51.08%, var(--water) 66.82%, var(--sk-300) 76.74%, #8ab987 93.39%, var(--sun) 104.97%);
  /* FAQ hover用: kti-gradationからwaterのストップを1つ減らして色の帯を狭くしたもの */
  --kti-faq-gradation: linear-gradient(135deg, var(--pi-300) 5%, #8B78D4 28.65%, var(--water) 47.37%, var(--sk-300) 66.08%, #8AB987 86.13%, var(--sun) 100%);
  /* 見出しシャインエフェクト用: 中央のみ光を透過させる帯状マスク（maskは輝度ベースなのでwhite=表示/transparent=非表示） */
  --kti-shine-mask: linear-gradient(100deg, transparent 38%, white 48%, white 52%, transparent 62%);
}

/* ==========================================================
  アニメーション定義（@property・@keyframes）
========================================================== */

/* セクション共通タイトル（badge + heading） */
@keyframes kti-title-rise-in {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(6deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

/* カード類のフェードイン（strength-list_item・feature-list_item・usecase-mockで使用） */
@keyframes kti-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes kti-heading-shine-sweep {
  from {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
  to {
    mask-position: 0% 0;
    -webkit-mask-position: 0% 0;
  }
}

/* CTA見出し: 常時ループさせるためスイープ後に間を空けて繰り返す */
@keyframes kti-heading-shine-sweep-loop {
  0% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
  35% {
    mask-position: 0% 0;
    -webkit-mask-position: 0% 0;
  }
  100% {
    mask-position: 0% 0;
    -webkit-mask-position: 0% 0;
  }
}

/* mvセクションの玉（is-blue/is-yellow/is-pink）: 2色の比率をスライドさせる */
@property --kti-mv-blob-slide {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}

@keyframes kti-mv-blob-slide {
  from {
    --kti-mv-blob-slide: 20%;
  }
  to {
    --kti-mv-blob-slide: 85%;
  }
}

/* ユースケースのモック画像 */
@keyframes usecase-mock-spin {
  to {
    rotate: 360deg;
  }
}

/* FAQ質問文のホバーグラデーション */
@keyframes faq-question-gradient {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* フッターのロゴブロブ（クリック・アイドル時のポヨンアニメーション） */
@keyframes kti-blob-poyon {
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.85, 1.18);
  }
  45% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.08);
  }
  82% {
    transform: scale(1.04, 0.97);
  }
}

/* 横方向はスクワッシュだけだと縦との区別がつきにくいため、左右への揺れ(translateX)を組み合わせる */
@keyframes kti-blob-poyon-horizontal {
  0%, 100% {
    transform: translateX(0) scale(1, 1);
  }
  25% {
    transform: translateX(-10px) scale(1.18, 0.85);
  }
  45% {
    transform: translateX(8px) scale(0.85, 1.15);
  }
  65% {
    transform: translateX(-4px) scale(1.08, 0.95);
  }
  82% {
    transform: translateX(2px) scale(0.97, 1.04);
  }
}

/* --poyon-spin(1/-1) で回転方向をランダムに切り替える、スクワッシュと同じタイミングの回転版 */
@keyframes kti-blob-poyon-spin {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(calc(14deg * var(--poyon-spin)));
  }
  45% {
    transform: rotate(calc(-10deg * var(--poyon-spin)));
  }
  65% {
    transform: rotate(calc(5deg * var(--poyon-spin)));
  }
  82% {
    transform: rotate(calc(-2deg * var(--poyon-spin)));
  }
}

body, html {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  font-feature-settings: 'palt' on;
  letter-spacing: 0.08em;
  font-size: 16px;
  font-weight: 400;
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}

img {
  width: 100%;
  height: auto;
}

.inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
  @media screen and (max-width: 768px) {
    padding: 0 16px;
  }
}

.cta-button {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.sugao-ss_link {
  font-size: 16px;
  font-weight: bold;
  color: var(--pu-400);
  text-decoration: underline;
  text-underline-offset: 30%;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s;
  white-space: nowrap;

  @media screen and (max-width: 768px) {
    font-size: 14px;

    &.arrow,
    &.down,
    &.blank {
      &::after {
        width: 16px;
        height: 16px;
      }
    }
  }

  &.text {
    display: inline;
    margin-right: 3px;
    @media screen and (max-width: 768px) {
      font-size: 14px;
    }
  }

  &.arrow {
    &::after {
      content: '';
      width: 20px;
      height: 20px;
      display: inline-block;
      mask-image: url(/img/common/icon_arrow.svg);
      mask-size: cover;
      background-color: var(--pu-400);
    }
    &:visited {
      &::after {
        text-decoration: underline;
        background-color: var(--gr-500);
      }
    }
    &:hover {
      &::after {
        background-color: var(--pa-500);
      }
    }
  }
  &.down {
    &::after {
      content: '';
      width: 20px;
      height: 20px;
      margin-top: 2px;
      display: inline-block;
      mask-image: url(/img/common/icon_arrow.svg);
      mask-size: cover;
      background-color: var(--pu-400);
      transform: rotate(90deg);
    }
    &:visited {
      &::after {
        text-decoration: underline;
        background-color: var(--gr-500);
      }
    }
    &:hover {
      &::after {
        text-decoration: underline;
        background-color: var(--pa-500);
      }
    }
  }
  &.blank {
    &::after {
      content: '';
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
      mask-image: url(/img/common/icon_blank.svg);
      mask-size: cover;
      background-color: var(--pu-400);
    }
    &:visited {
      &::after {
        text-decoration: underline;
        background-color: var(--gr-500);
      }
    }
    &:hover {
      &::after {
        text-decoration: underline;
        background-color: var(--pa-500);
      }
    }
  }
  &:visited {
    color: var(--gr-500);
    &::after {
      background-color: var(--gr-500);
    }
  }

  &:hover {
    color: var(--pa-500);
    text-decoration: underline;
    &::after {
      background-color: var(--pa-500);
    }
  }
}

.only-sp {
  display: none;
  @media screen and (max-width: 768px) {
    display: block;
  }
}

.only-pc {
  display: block;
  @media screen and (max-width: 768px) {
    display: none;
  }
}

/* 汎用フェードインクラス（is-inviewはscript.jsのIntersectionObserverが付与） */
.kti-fade-in {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
    transform: none;
  }

  &.is-inview {
    animation: kti-fade-in-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

/* -----------------------------------
  余白
----------------------------------- */
.mt120 {
  margin-top: 120px;
  @media screen and (max-width: 768px) {
    margin-top: 80px;
  }
}

.mt100 {
  margin-top: 100px;
  @media screen and (max-width: 768px) {
    margin-top: 60px;
  }
}

.mt80 {
  margin-top: 80px;
  @media screen and (max-width: 768px) {
    margin-top: 60px;
  }
}

.mt60 {
  margin-top: 60px;
  @media screen and (max-width: 768px) {
    margin-top: 40px;
  }
}

.mt48 {
  margin-top: 48px;
  @media screen and (max-width: 768px) {
    margin-top: 32px;
  }
}

.mt40 {
  margin-top: 40px;
  @media screen and (max-width: 768px) {
    margin-top: 32px;
  }
}

.mt32 {
  margin-top: 32px;
  @media screen and (max-width: 768px) {
    margin-top: 24px;
  }
}

.mt24 {
  margin-top: 24px;
  @media screen and (max-width: 768px) {
    margin-top: 16px;
  }
}

.mt20 {
  margin-top: 20px;
  @media screen and (max-width: 768px) {
    margin-top: 12px;
  }
}

.mt16 {
  margin-top: 16px;
  @media screen and (max-width: 768px) {
    margin-top: 8px;
  }
}

.mt12 {
  margin-top: 12px;
  @media screen and (max-width: 768px) {
    margin-top: 8px;
  }
}

.mt8 {
  margin-top: 8px;
  @media screen and (max-width: 768px) {
    margin-top: 4px;
  }
}

.mt4 {
  margin-top: 4px;
  @media screen and (max-width: 768px) {
    margin-top: 2px;
  }
}

/* ------------------------------------
  テキストスタイル
----------------------------------- */

/* XL（ページタイトル） */
.sugao-ss_xl {
  font-size: 52px;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 36px;
  }
}

/* L（セクションタイトル） */
.sugao-ss_l {
  font-size: 48px;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 32px;
  }
}

/* M（タイトル） */
.sugao-ss_m {
  font-size: 32px;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 28px;
  }
}

/* S（サブタイトル） */
.sugao-ss_s {
  font-size: 24px;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 20px;
  }
}

/* XS（リストタイトル） */
.sugao-ss_xs {
  font-size: 18px;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 16px;
  }
}

/* P（ノーマル本文） */
.sugao-ss_p {
  font-size: 16px;
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}

/* P（エモーショナル本文） */
.sugao-ss_p-emotional {
  font-size: 16px;
  line-height: 1.9;
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}

/* N（注釈） */
.sugao-ss_n {
  font-size: 10px;
  line-height: 1.4;
}

sup {
  font-size: 0.6em;
}


/* -----------------------------------
  背景色
----------------------------------- */
.bg-papaya {
  background-color: var(--pa-50);
}

.bg-prune {
  background-color: var(--pu-50);
}

.bg-gray {
  background-color: var(--gr-75);
}

.bg-sand {
  background-color: var(--sa-50);
}


/* ==========================================================
  CTAボタン（cta-list）
========================================================== */
.cta-list {
  display: flex;
  gap: 40px;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
    padding: 0 30px;
  }

  .item {
    flex: 0 1 254px;
    @media screen and (max-width: 768px) {
      flex: 1 1 auto;
    }
  }

  .cta-button {
    height: 70px;
    margin: 0;
    padding: 4px 43px 5px 24px;
    flex-direction: row;
    border: 2px solid;
    border-radius: 999px;
    overflow: hidden;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.4s, border-color 0.4s;
    --cta-spread: 16;
    box-shadow: var(--kti-shadow-01);
    @media screen and (max-width: 768px) {
      height: 64px;
      font-size: 16px;
      padding: 0 30px 0 24px;
      --cta-spread: 40;
    }

    /* hover時に中央から放射状に広がるグラデーション（広がり具合はボタン幅に応じて--cta-spreadで調整） */
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--kti-gradation);
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.5s;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 24px;
      width: 26px;
      height: 26px;
      transform: translateY(-50%);
      mask-image: url(/img/common/icon_arrow.svg);
      mask-size: cover;
      background-color: currentColor;
    }
  }

  .cta-button.primary {
    background-color: var(--kti-black);
    border-color: var(--kti-black);
    color: var(--cloud);
    box-shadow: var(--kti-shadow-01);
  }

  .cta-button.wht {
    background-color: var(--cloud);
    border-color: var(--kti-black);
    color: var(--kti-black);
    box-shadow: var(--kti-shadow-01);
  }

  /* hover専用スタイルはPCのみに限定し、タッチ端末で1タップ目がhover扱いになり遷移が遅れるのを防ぐ */
  @media screen and (min-width: 768px) {
    a.cta-button.primary:hover {
      border-color: transparent;
      background: linear-gradient(var(--kti-black), var(--kti-black)) padding-box, var(--kti-gradation) border-box;

      &::before {
        transform: translate(-50%, -50%) scale(var(--cta-spread));
      }
    }

    a.cta-button.wht:hover {
      border-color: transparent;
      background: linear-gradient(var(--cloud), var(--cloud)) padding-box, var(--kti-gradation) border-box;
      color: var(--cloud);

      &::before {
        transform: translate(-50%, -50%) scale(var(--cta-spread));
      }
    }
  }
}

/* ==========================================================
  セクション共通タイトル（badge + heading）
========================================================== */
.kti-section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 48px;
  @media screen and (max-width: 768px) {
    gap: 4px;
    margin-bottom: 36px;
  }

  .kti-section-title-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 24px 4px;
    background-color: var(--pu-400);
    color: var(--cloud);
    font-family: var(--ubuntu);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: normal;
    border-radius: 55px 40px 40px 0;
    transform-origin: center bottom;
    opacity: 0;
    transform: translateY(24px) rotate(6deg);
    @media screen and (max-width: 768px) {
      padding: 4px 16px;
      font-size: 16px;
    }
    @media (prefers-reduced-motion: reduce) {
      opacity: 1;
      transform: none;
    }
  }

  .kti-section-title-heading {
    position: relative;
    font-size: 48px;
    font-weight: 700;
    color: var(--kti-black);
    line-height: 1.4;
    @media screen and (max-width: 768px) {
      font-size: 32px;
    }

    .kti-char {
      display: inline-block;
      transform-origin: center bottom;
      opacity: 0;
      transform: translateY(20px) rotate(6deg);
      @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        transform: none;
      }
    }

    .kti-heading-shine {
      position: absolute;
      inset: 0;
      background-image: var(--kti-gradation);
      background-size: 220% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      font-kerning: none;
      mask-image: var(--kti-shine-mask);
      -webkit-mask-image: var(--kti-shine-mask);
      mask-mode: luminance;
      mask-size: 300% 100%;
      -webkit-mask-size: 300% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-position: 100% 0;
      -webkit-mask-position: 100% 0;
      pointer-events: none;
      @media (prefers-reduced-motion: reduce) {
        display: none;
      }
    }
  }

  &.is-inview {
    .kti-section-title-badge {
      animation: kti-title-rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.3s;
      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }

    .kti-section-title-heading {
      .kti-char {
        animation: kti-title-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }

      .kti-heading-shine {
        animation: kti-heading-shine-sweep 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
      }
    }
  }
}

/* ==========================================================
  全体
========================================================== */

.kti-page {
  overflow: hidden;
}

/* ==========================================================
  ヘッダー
========================================================== */

.kti-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 20px 60px;
  @media screen and (max-width: 768px) {
    padding: 16px 16px;
  }

  .kti-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    @media screen and (max-width: 768px) {
      flex-wrap: wrap;
      gap: 0;
      padding: 12px 12px 12px 20px;
      background-color: var(--kti-glass-bg);
      /* 固定ヘッダーのbackdrop-filterはスクロール毎に再計算されるためSPではぼかし量を抑える */
      backdrop-filter: blur(10px);
      border-radius: 40px;
      box-shadow: var(--kti-shadow-01);
    }
  }

  .kti-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 0 28px;
    background-color: var(--kti-glass-bg);
    backdrop-filter: var(--kti-glass-blur);
    border-radius: 50px;
    box-shadow: var(--kti-shadow-01);
    transition: all 0.3s;
    @media screen and (max-width: 768px) {
      order: 1;
      height: auto;
      padding: 0;
      background: none;
      backdrop-filter: none;
      box-shadow: none;
    }

    &:hover {
      img {
        opacity: 0.7;
      }
    }

    img {
      width: 108px;
      height: 40px;
      transition: all 0.3s;
      @media screen and (max-width: 768px) {
        width: 86px;
        height: 32px;
      }
    }
  }

  .kti-header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 72px;
    padding: 0 10px 0 16px;
    background-color: var(--kti-glass-bg);
    backdrop-filter: var(--kti-glass-blur);
    border-radius: 50px;
    box-shadow: var(--kti-shadow-01);
    @media screen and (max-width: 768px) {
      display: none;
      order: 3;
      flex: 1 1 100%;
      height: auto;
      margin-top: 20px;
      padding: 0;
      background: none;
      backdrop-filter: none;
      box-shadow: none;
      border-radius: 0;
      gap: 0;

      &.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
    }

    .kti-nav-list {
      display: flex;
      align-items: center;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: stretch;
      }

      li {
        a {
          display: flex;
          align-items: center;
          padding: 24px 12px;
          font-size: 16px;
          font-weight: 700;
          color: var(--kti-black);
          transition: color 0.3s;
          @media screen and (max-width: 768px) {
            padding: 12px 8px 12px 0;
            &::before {
              content: '';
              flex: none;
              width: 6px;
              height: 6px;
              margin-right: 8px;
              background-color: var(--pu-400);
              border-radius: 50%;
            }
          }

          &:hover {
            color: var(--pu-400);
          }
        }
      }
    }

    .kti-nav-contact {
      position: relative;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 51px;
      padding: 0 16px;
      overflow: hidden;
      background-color: var(--kti-black);
      border: 2px solid var(--kti-black);
      color: var(--cloud);
      font-size: 16px;
      font-weight: 700;
      border-radius: 40px;
      white-space: nowrap;
      transition: border-color 0.4s;
      --cta-spread: 12;
      @media screen and (max-width: 768px) {
        height: 54px;
        margin: 20px 0 30px;
      }

      /* hover時に中央から放射状に広がるグラデーション（cta-buttonと同じ手法） */
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--kti-gradation);
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.5s;
      }

      /* hover専用スタイルはPCのみに限定し、タッチ端末で1タップ目がhover扱いになり遷移が遅れるのを防ぐ */
      @media screen and (min-width: 768px) {
        &:hover {
          border-color: transparent;
          background: linear-gradient(var(--kti-black), var(--kti-black)) padding-box, var(--kti-gradation) border-box;

          &::before {
            transform: translate(-50%, -50%) scale(var(--cta-spread));
          }
        }
      }
    }
  }

  .kti-nav-toggle {
    display: none;
    @media screen and (max-width: 768px) {
      display: flex;
      order: 2;
      flex: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 0;
      background: url(/kti/img/nav-toggle-icon.svg?20260915v2) no-repeat center / contain;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }

    span {
      display: block;
      width: 16px;
      height: 2px;
      background-color: var(--cloud);
      border-radius: 1px;
      transition: transform 0.3s, opacity 0.3s;
    }

    &.is-open {
      span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      span:nth-child(2) {
        opacity: 0;
      }
      span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }
    }
  }
}

/* ==========================================================
  ヒーロー（mv）
========================================================== */
.kti-mv {
  position: relative;
  z-index: 0;
  padding: 170px 0;
  background-color: #EEF2FE;

  &::before {
    content: '';
    position: absolute;
    top: -210px;
    bottom: 0;
    left: 50%;
    width: 1920px;
    height: 1220px;
    z-index: -1;
    transform: translateX(-50%);
    background: url(/kti/img/bg01.png?20260929) no-repeat center center / contain;
    pointer-events: none;
    @media screen and (max-width: 768px) {
      top: 0;
      left: 0;
      width: 100%;
      height: 830px;
      transform: none;
      background: url(/kti/img/bg01_sp.png?20260929) no-repeat center bottom/ cover;
    }
  }

  @media screen and (max-width: 768px) {
    padding: 120px 0 80px;
  }

  .kti-mv-blob {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 42%;
    animation-name: kti-mv-blob-slide;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    /* blur+アニメーションの組み合わせはSPで負荷が高いため、SPでは静止表示にする */
    @media screen and (max-width: 768px) {
      animation: none;
    }
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }

    &.is-circle {
      top: 86px;
      right: -40px;
      z-index: 0;
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: linear-gradient(314deg, var(--water) 26.03%, var(--pi-300) 83.06%);
      background-size: 200% 100%;
      filter: drop-shadow(14px 20px 8px var(--pu-100));
      @media screen and (max-width: 768px) {
        width: 50px;
        height: 50px;
        top: 320px;
        right: -30px;
      }
    }

    &.is-triangle {
      bottom: 270px;
      left: -20px;
      z-index: 0;
      width: 70px;
      height: 63px;
      border-radius: 0;
      mask-image: url(/kti/img/triangle-mask.svg?20260915);
      mask-size: contain;
      mask-repeat: no-repeat;
      background: linear-gradient(265deg, var(--sun) 16.17%, var(--water) 98.23%);
      background-size: 100% 200%;
      filter: drop-shadow(14px 20px 8px rgba(255, 222, 117, 0.4));
      transform: rotate(-127deg);
      @media screen and (max-width: 768px) {
        width: 57px;
        height: 52px;
      }
    }
  }

  .kti-mv-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 500px 1fr;
    grid-template-areas: "content image";
    align-items: center;
    column-gap: 10px;
    @media screen and (max-width: 768px) {
      display: flex;
      flex-direction: column;
    }

    .kti-mv-text {
      grid-area: content;
      text-align: center;
      /* SPでは タイトル→ロゴ→挿絵→ボタン の順に並べたいので、ラッパーを解除して
         kti-mv-content の直接の子（flexアイテム）として order で並べ替える */
      @media screen and (max-width: 768px) {
        display: contents;
      }

      .kti-mv-heading {
        @media screen and (max-width: 768px) {
          order: 1;
        }

        .kti-mv-title {
          display: block;
          position: relative;
          font-size: 25px;
          font-weight: 700;
          line-height: 1.3;
          letter-spacing: 0.08em;
          color: var(--kti-black);
          @media screen and (max-width: 768px) {
            font-size: 17px;
          }

          .accent {
            display: block;
            font-size: 44px;
            color: var(--pu-400);
            margin-top: 4px;
            @media screen and (max-width: 768px) {
              font-size: 32px;
            }
          }

          .kti-char {
            display: inline-block;
            transform-origin: center bottom;
            opacity: 0;
            transform: translateY(20px) rotate(6deg);
            @media (prefers-reduced-motion: reduce) {
              opacity: 1;
              transform: none;
            }
          }

          .kti-heading-shine {
            position: absolute;
            inset: 0;
            background-image: var(--kti-gradation);
            background-size: 220% 100%;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            font-kerning: none;
            mask-image: var(--kti-shine-mask);
            -webkit-mask-image: var(--kti-shine-mask);
            mask-mode: luminance;
            mask-size: 300% 100%;
            -webkit-mask-size: 300% 100%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-position: 100% 0;
            -webkit-mask-position: 100% 0;
            pointer-events: none;
            @media (prefers-reduced-motion: reduce) {
              display: none;
            }
          }

          &.is-inview {
            .kti-char {
              animation: kti-title-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
              @media (prefers-reduced-motion: reduce) {
                animation: none;
              }
            }

            .kti-heading-shine {
              animation: kti-heading-shine-sweep 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
            }
          }
        }

        .kti-mv-logo {
          display: block;
          margin-top: 30px;
          @media screen and (max-width: 768px) {
            margin-top: 16px;
          }

          img {
            width: 320px;
            max-width: 100%;
            height: auto;
            @media screen and (max-width: 768px) {
              width: 180px;
              margin: 0 auto;
            }
          }
        }
      }
    }

    .kti-mv-illust {
      grid-area: image;
      display: flex;
      align-items: center;
      justify-content: center;
      @media screen and (max-width: 768px) {
        order: 3;
        margin: 10px 20px 0;
      }

      img {
        width: 100%;
        max-width: 635px;
        height: auto;
      }
    }
  }

  /* cta-listは複数セクションで使い回す共通コンポーネントのためフラットに書く */
  .cta-list {
    justify-content: center;
    margin-top: 40px;
    gap: 20px;
    @media screen and (max-width: 768px) {
      order: 4;
      margin-top: 24px;
      width: 100%;
    }

    .item {
      @media screen and (min-width: 768px) {
        flex: 0 1 240px;
      }
    }
  }
}

/* ==========================================================
  ユースケース
========================================================== */
.kti-usecase {
  position: relative;
  z-index: 0;
  background-color: var(--nv-900);
  @media screen and (max-width: 768px) {
    padding: 48px 0;
  }

  /* 上下の湾曲した背景（bg-usecase.svgを天地反転させて使い回す） */
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 100%;
    height: 610px;
    pointer-events: none;
    @media screen and (max-width: 768px) {
      height: clamp(99px, 26.4vw, 203px);
    }
  }
  &::before {
    top: -320px;
    background: url(/kti/img/bg-usecase.png?20260915) no-repeat center top / cover;
    @media screen and (max-width: 768px) {
      top: clamp(-90px, -13vw, -50px);
      background: url(/kti/img/bg-usecase_sp.png?20260915) no-repeat center top / cover;
    }
  }
  &::after {
    bottom: -300px;
    transform: translateX(-50%) scaleY(-1);
    background: url(/kti/img/bg-usecase.png?20260915) no-repeat center top / cover;
    @media screen and (max-width: 768px) {
      bottom: clamp(-90px, -11.73vw, -44px);
      background: url(/kti/img/bg-usecase_sp.png?20260915) no-repeat center top / cover;
    }
  }

  > .inner {
    z-index: 1;
  }

  .kti-section-title {
    margin-bottom: 0;
    .kti-section-title-badge {
      background-color: var(--cloud);
      color: var(--nv-900);
    }
    .kti-section-title-heading {
      color: var(--cloud);
    }
  }

  .usecase-list {
    display: flex;
    flex-direction: column;

    .usecase-list_item {
      position: relative;
      /* 01・02の最下部に敷く薄いグラデーション（背景本体とは別レイヤー） */
      margin: 64px 0;
      @media screen and (max-width: 768px) {
        margin: 40px 0;
      }

      &:not(:last-child) {
        &::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: -64px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 0;
          height: 190px;
          background: linear-gradient(to bottom, var(--nv-900), var(--nv-700));
          pointer-events: none;
          width: 100vw;
          @media screen and (max-width: 768px) {
            height: 100px;
            bottom: -48px;
          }
        }
      }

      &::before {
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: contain;
      }

      &.is-sky {
        .usecase-persona-badge {
          background-color: var(--sk-300);
        }
        .usecase-watermark {
          color: var(--sk-300);
        }
        .usecase-compare-row.is-after dt {
          background-color: var(--sk-300);
        }
        &::before {
          top: -350px;
          right: -475px;
          width: 1000px;
          height: 1000px;
          background-image: url(/kti/img/blob01.png?20260929);
          @media screen and (max-width: 768px) {
            top: -240px;
            right: -330px;
            width: 636px;
            height: 636px;
          }
        }
      }

      &.is-purple {
        .usecase-persona-badge {
          background-color: var(--pur-300);
        }
        .usecase-watermark {
          color: var(--pur-300);
        }
        .usecase-compare-row.is-after dt {
          background-color: var(--pur-300);
        }
        &::before {
          top: -320px;
          left: -420px;
          width: 880px;
          height: 880px;
          background-image: url(/kti/img/blob02.png?20260929);
          @media screen and (max-width: 768px) {
            top: -160px;
            left: -330px;
            width: 600px;
            height: 600px;
          }
        }
      }

      &.is-pink {
        .usecase-persona-badge {
          background-color: var(--pi-300);
        }
        .usecase-watermark {
          color: var(--pi-300);
        }
        .usecase-compare-row.is-after dt {
          background-color: var(--pi-300);
        }
        &::before {
          top:  -70px;
          left: 700px;
          z-index: 0;
          width: 1080px;
          height: 1080px;
          background-image: url(/kti/img/blob03.png?20260929);
          @media screen and (max-width: 768px) {
            top: auto;
            bottom: -300px;
            left: auto;
            right: -330px;
            width: 640px;
            height: 640px;
          }
        }
      }

      .usecase-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        @media screen and (max-width: 768px) {
          flex-wrap: wrap;
        }

        .usecase-persona-badge {
          display: inline-flex;
          flex: none;
          align-items: center;
          padding: 6px 20px;
          color: var(--cloud);
          font-size: 20px;
          font-weight: 700;
          border-radius: 40px;
          white-space: nowrap;
          @media screen and (max-width: 768px) {
            padding: 8px 12px;
            font-size: 13px;
          }
        }

        .usecase-watermark {
          width: auto;
          height: 63px;
          flex: none;
          @media screen and (max-width: 768px) {
            height: 42px;
          }
        }
      }

      .usecase-body {
        position: relative;
        z-index: 1;
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 75px;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 24px;
          margin-top: 24px;
        }

        .usecase-profile {
          display: flex;
          flex: none;
          flex-direction: column;
          align-items: center;
          width: 456px;
          @media screen and (max-width: 768px) {
            width: 100%;
          }

          .usecase-photo {
            width: 290px;
            height: 290px;
            margin-bottom: 8px;
            border-radius: 50%;
            overflow: hidden;
            @media screen and (max-width: 768px) {
              width: 200px;
              height: 200px;
              margin-bottom: 6px;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .usecase-compare {
            position: relative;
            width: 100%;
            margin-top: -50px;
            max-width: 456px;

            &::before {
              content: '';
              position: absolute;
              top: -22px;
              left: 50%;
              width: 0;
              height: 0;
              border-left: 22px solid transparent;
              border-right: 22px solid transparent;
              border-bottom: 32px solid var(--gr-100);
              transform: translateX(-50%);
              @media screen and (max-width: 768px) {
                top: -14px;
                border-left-width: 13px;
                border-right-width: 13px;
                border-bottom-width: 20px;
              }
            }

            .usecase-compare-row {
              display: flex;
              min-height: 72px;
              background-color: var(--cloud);
              overflow: hidden;
              @media screen and (max-width: 768px) {
                min-height: 60px;
              }

              &:first-child {
                border-radius: 16px 16px 0 0;
              }
              &:last-child {
                border-radius: 0 0 16px 16px;
              }

              dt {
                display: flex;
                flex: none;
                align-items: center;
                justify-content: center;
                width: 94px;
                padding: 0 8px;
                font-family: var(--ubuntu);
                font-weight: 700;
                font-size: 20px;
                letter-spacing: normal;
                color: var(--cloud);
                @media screen and (max-width: 768px) {
                  width: 70px;
                  font-size: 14px;
                }
              }

              dd {
                display: flex;
                align-items: center;
                flex: 1 1 auto;
                padding: 12px 16px;
                color: var(--kti-black);
                font-size: 16px;
                line-height: 1.5;
                text-align: left;
                font-weight: bold;
                @media screen and (max-width: 768px) {
                  padding: 10px 12px;
                  font-size: 13px;
                }
              }

              &.is-before {
                background-color: var(--gr-100);

                dt {
                  background-color: var(--gr-250);
                  color: var(--kti-black);
                }
              }
            }
          }
        }

        .usecase-mock {
          position: relative;
          z-index: 0;
          flex: 1 1 auto;
          max-width: 629px;
          min-width: 0;

          .usecase-mock-frame {
            position: relative;
            z-index: 1;
            display: block;
            border-radius: 26px;
            padding: 6px;
            overflow: hidden;
            @media screen and (max-width: 768px) {
              border-radius: 22px;
              padding: 4px;
            }

            /* AIっぽく右回りに流れるグラデーションの枠線 */
            &::before {
              content: '';
              position: absolute;
              inset: -50%;
              z-index: 0;
              background: conic-gradient(
                from 0deg,
                var(--pi-300) 0deg,
                #8b78d4 60deg,
                var(--water) 150deg,
                var(--sk-300) 240deg,
                #8ab987 280deg,
                var(--sun) 320deg,
                var(--pi-300) 360deg
              );
              animation: usecase-mock-spin 5s linear infinite;
            }
          }

          img {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            height: auto;
            border-radius: 20px;
            @media screen and (max-width: 768px) {
              border-radius: 12px;
            }
          }

          .usecase-mock-note {
            margin-top: 12px;
            color: var(--cloud);
            text-align: right;
            @media screen and (max-width: 768px) {
              text-align: left;
            }
          }
        }
      }
    }
  }
}

/* ==========================================================
  KTiとは（about）
========================================================== */
.kti-about {
  padding: 200px 0;
  background: url(/kti/img/about-bg.svg?20260930) no-repeat top left / contain;
  @media screen and (max-width: 768px) {
    padding: 120px 0 120px;
    background: url(/kti/img/about-bg.svg?20260930) no-repeat bottom left / 700px;
  }

  .kti-about-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
    }

    &::before {
      content: '';
      position: absolute;
      z-index: 1;
      bottom: -70px;
      left: 600px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(-38deg, var(--sk-200) 23%, var(--water) 79%);
      box-shadow: 17px 25px 8px 0px rgba(93, 181, 222, 0.5);
      @media screen and (max-width: 768px) {
        bottom: -100px;
        left: auto;
        right: 50px;
        width: 40px;
        height: 40px;
        box-shadow: 10px 14px 8px 0px rgba(93, 181, 222, 0.5);
      }
    }
  }

  .kti-about-text {
    max-width: 600px;
    @media screen and (max-width: 768px) {
      max-width: none;
    }
    .kti-about-heading {
      position: relative;
      font-size: 44px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--kti-black);
      @media screen and (max-width: 768px) {
        font-size: 30px;
      }

      .kti-char {
        display: inline-block;
        transform-origin: center bottom;
        opacity: 0;
        transform: translateY(20px) rotate(6deg);
        @media (prefers-reduced-motion: reduce) {
          opacity: 1;
          transform: none;
        }
      }

      .kti-heading-shine {
        position: absolute;
        inset: 0;
        background-image: var(--kti-gradation);
        background-size: 220% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-kerning: none;
        mask-image: var(--kti-shine-mask);
        -webkit-mask-image: var(--kti-shine-mask);
        mask-mode: luminance;
        mask-size: 300% 100%;
        -webkit-mask-size: 300% 100%;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: 100% 0;
        -webkit-mask-position: 100% 0;
        pointer-events: none;
        @media (prefers-reduced-motion: reduce) {
          display: none;
        }
      }

      &.is-inview {
        .kti-char {
          animation: kti-title-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
          @media (prefers-reduced-motion: reduce) {
            animation: none;
          }
        }

        .kti-heading-shine {
          animation: kti-heading-shine-sweep 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
        }
      }
    }
    .kti-about-lead {
      margin-top: 64px;
      font-size: 20px;
      line-height: 1.9;
      letter-spacing: 0.1em;
      color: var(--kti-black);
      @media screen and (max-width: 768px) {
        margin-top: 24px;
        font-size: 15px;
      }

      > * + * {
        margin-top: 32px;
        @media screen and (max-width: 768px) {
          margin-top: 24px;
        }
      }

      .caution {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;

        .sugao-ss_n {
          display: block;
        }

      }
    }
  }

  .kti-about-media {
    width: 520px;
    aspect-ratio: 2864 / 1554;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-image: url(/kti/img/about-kti.jpg?20260929);
    background-size: cover;
    background-position: center;
    box-shadow: var(--kti-shadow-01);
    cursor: pointer;
    transition: all 0.3s;
    @media screen and (max-width: 768px) {
      position: static;
      width: 100%;
    }

    &:hover {
      opacity: 0.7;
    }

    img {
      width: 85px;
      height: 85px;
      @media screen and (max-width: 768px) {
        width: 64px;
        height: 64px;
      }
    }
  }
}

/* ==========================================================
  KTiとは 動画ポップアップ（movie modal）
========================================================== */
.kti-movie-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(32, 34, 38, 0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  @media screen and (max-width: 768px) {
    padding: 16px;
  }

  &.is-open {
    display: flex;
  }

  .kti-movie-modal-box {
    position: relative;
    width: 1000px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    cursor: default;
    outline: none;
  }

  .kti-movie-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 64px;
    height: 64px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transform: translate(50%, -50%);
    @media screen and (max-width: 768px) {
      width: 44px;
      height: 44px;
      right: 10px;
    }

    &:focus-visible {
      outline: 2px solid var(--pu-400);
      outline-offset: 4px;
    }

    img {
      width: 100%;
      height: 100%;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-touch-callout: none;
    }
  }

  .kti-movie-modal-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img {
      width: 100px;
      height: 100px;
      @media screen and (max-width: 768px) {
        width: 64px;
        height: 64px;
      }
    }

    video, iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}

/* ==========================================================
  機能例（feature）
========================================================== */
.kti-feature {
  .feature-list {
    display: flex;
    gap: 40px;
    @media screen and (max-width: 768px) {
      flex-direction: column;
    }

    .feature-list_item {
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
      min-width: 0;
      gap: 24px;
      @media screen and (max-width: 768px) {
        gap: 20px;
      }

      &:nth-child(2).is-inview {
        animation-delay: 0.4s;
        @media screen and (max-width: 768px) {
          animation-delay: 0s;
        }
      }

      .feature-list_item-visual {
        border-radius: 8px;
        overflow: hidden;
      }

      .feature-list_item-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .feature-list_item-heading {
        font-size: 28px;
        font-weight: 700;
        color: var(--kti-black);
        text-align: center;
        @media screen and (max-width: 768px) {
          font-size: 24px;
        }
      }

      .feature-list_item-text {
        color: var(--kti-black);
      }
    }
  }

  .cta-list.feature-cta {
    justify-content: center;
  }
}

/* ==========================================================
  KTiの強み（strength）
========================================================== */
.kti-strength {
  position: relative;
  z-index: 0;

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -190px;
    right: -250px;
    width: 600px;
    height: 600px;
    background: url(/kti/img/blob04.png?20260930) center / contain no-repeat;
    @media screen and (max-width: 768px) {
      top: -130px;
      right: -250px;
      width: 480px;
      height: 480px;
    }
  }

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: -230px;
    left: -250px;
    width: 550px;
    height: 550px;
    background: url(/kti/img/blob05.png?20260930) center / contain no-repeat;
    @media screen and (max-width: 768px) {
      bottom: -200px;
      left: -170px;
      width: 360px;
      height: 360px;
    }
  }

  .kti-strength-triangle {
    position: absolute;
    z-index: -1;
    top: 40px;
    left: 62%;
    width: 66px;
    height: 68px;
    filter: drop-shadow(10px 16px 8px rgba(103, 76, 205, 0.35));
    @media screen and (max-width: 768px) {
      display: none;
    }

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      mask-image: url(/kti/img/triangle-mask.svg?20260915);
      mask-size: contain;
      mask-repeat: no-repeat;
      background: linear-gradient(144deg, var(--water) 13.39%, var(--pur-200) 112.79%);
    }
  }

  .inner {
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      bottom: 160px;
      left: 287px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(322deg, var(--sk-200) 25.23%, var(--sun) 75.68%);
      filter: drop-shadow(17px 25px 8px rgba(93, 181, 222, 0.60));
      @media screen and (max-width: 768px) {
        content: none;
      }
    }
  }

  .strength-list {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 56px;
    }

    .strength-list_item {
      position: relative;
      flex: 1 1 0;
      min-width: 0;

      &:nth-child(2).is-inview {
        animation-delay: 0.4s;
        @media screen and (max-width: 768px) {
          animation-delay: 0s;
        }
      }
      &:nth-child(3).is-inview {
        animation-delay: 0.8s;
        @media screen and (max-width: 768px) {
          animation-delay: 0s;
        }
      }

      &:nth-child(2) {
        margin-top: 100px;
        @media screen and (max-width: 768px) {
          margin-top: 0;
        }
      }
      &:nth-child(3) {
        margin-top: 200px;
        @media screen and (max-width: 768px) {
          margin-top: 0;
        }
      }

      .strength-list_item-number {
        position: absolute;
        top: -45px;
        left: -26px;
        z-index: 1;
        display: block;
        width: 75px;
        @media screen and (max-width: 768px) {
          top: -32px;
          left: -12px;
          width: 56px;
        }
      }

      .strength-list_item-visual {
        border-radius: 8px;
        overflow: hidden;
      }

      .strength-list_item-heading {
        margin-top: 24px;
        font-size: 28px;
        font-weight: 700;
        color: var(--kti-black);
        text-align: center;
        @media screen and (max-width: 768px) {
          margin-top: 20px;
          font-size: 24px;
        }
      }

      .strength-list_item-text {
        margin-top: 16px;
        color: var(--kti-black);
      }
    }
  }

  /* cta-listは複数セクションで使い回す共通コンポーネントのためフラットに書く */
  .cta-list.strength-cta {
    justify-content: center;
    margin-top: 64px;
    @media screen and (max-width: 768px) {
      margin-top: 40px;
    }

    .item {
      flex: 0 1 254px;
      @media screen and (max-width: 768px) {
        flex: 1 1 auto;
      }
    }
  }
}

/* ==========================================================
  KTiが描く未来（future）
========================================================== */
.kti-future {
  position: relative;
  z-index: 0;
  padding: 178px 0;
  @media screen and (max-width: 768px) {
    padding: 32% 0;
  }

  /* 湾曲したすりガラス背景（future-wave-mask.svg = 上下が波型にくり抜かれた1枚のパネル形状） */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(211, 222, 255, 0.3);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    mask-image: url(/kti/img/future-wave-mask.svg?20260915);
    -webkit-mask-image: url(/kti/img/future-wave-mask.svg?20260915);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    @media screen and (max-width: 768px) {
      /* SP専用に作られた形状（future-wave-mask_sp.svg）に差し替える */
      mask-image: url(/kti/img/future-wave-mask_sp.svg?20260915);
      -webkit-mask-image: url(/kti/img/future-wave-mask_sp.svg?20260915);
      background-color: rgba(211, 222, 255, 0.5);
      mask-size: cover;
      -webkit-mask-size: cover;
    }
  }

  .kti-future-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .kti-future-text {
      width: 462px;
      /* SPでは見出し・画像・本文の順に並べたいので、ラッパーを解除してkti-future-content の直接の子（flexアイテム）として order で並べ替える */
      @media screen and (max-width: 768px) {
        display: contents;
      }

      .kti-future-lead {
        color: var(--kti-black);
        line-height: 1.8;
        @media screen and (max-width: 768px) {
          order: 3;
          margin-top: 20px;
        }

        > * + * {
          margin-top: 24px;
          @media screen and (max-width: 768px) {
            margin-top: 16px;
          }
        }
      }
    }

    .kti-future-visual {
      flex: none;
      width: 53%;
      @media screen and (max-width: 768px) {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        order: 2;
      }
    }
  }

  /* kti-section-titleは複数セクションで使い回す共通コンポーネントのためフラットに書く */
  .kti-section-title {
    @media screen and (max-width: 768px) {
      order: 1;
    }
  }
}

/* ==========================================================
  よくある質問（faq）
========================================================== */
.kti-faq {
  position: relative;

  .kti-faq-triangle {
    position: absolute;
    z-index: -1;
    top: -60px;
    left: 55%;
    width: 66px;
    height: 68px;
    filter: drop-shadow(14px 20px 6px rgba(255, 218, 27, 0.40));

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      mask-image: url(/kti/img/triangle-mask.svg?20260915);
      mask-size: contain;
      mask-repeat: no-repeat;
      background: linear-gradient(-160deg, var(--water) 21%, var(--sun) 100%);
      @media screen and (max-width: 768px) {
        content: none;
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 240px;
    right: -250px;
    width: 760px;
    height: 760px;
    background: url(/kti/img/blob06.png?20260930) center / contain no-repeat;
    @media screen and (max-width: 768px) {
      top: 170px;
      right: -300px;
      width: 600px;
      height: 600px;
    }
  }

  .inner {
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 380px;
      left: 63px;
      width: 63px;
      height: 63px;
      border-radius: 50%;
      background: linear-gradient(329deg, var(--water) 29.86%, var(--pi-300) 85.21%);
      filter: drop-shadow(17px 25px 8px rgba(216, 96, 210, 0.40));
      @media screen and (max-width: 768px) {
        width: 40px;
        height: 40px;
        top: -65px;
        left: auto;
        right: 60px;
        filter: drop-shadow(10px 14px 6px rgba(216, 96, 210, 0.40));
      }
    }
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 783px;
    max-width: 100%;
    margin: 0 auto;
    @media screen and (max-width: 768px) {
      gap: 12px;
      width: 100%;
      margin-top: 40px;
    }

    .faq-accordion {
      background-color: var(--kti-primary-color);
      border-radius: 50px 0 50px 50px;
      box-shadow: var(--kti-shadow-01);
      overflow: hidden;
      @media screen and (max-width: 768px) {
        border-radius: 36px 0 36px 36px;
      }

      .faq-question {
        position: relative;
        z-index: 0;
        padding: 24px 0;
        background-color: var(--cloud);
        border-radius: 50px 0 50px 50px;
        cursor: pointer;
        list-style: none;
        transition: all 0.3s;
        @media screen and (max-width: 768px) {
          padding: 16px 0;
          border-radius: 36px 0 36px 36px;
        }

        &::-webkit-details-marker {
          display: none;
        }

        /* グラデーションをオーバーレイにして不透明度で ふわっと フェードさせる（background-imageの切り替えはtransitionできないため） */
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
          border-radius: inherit;
          background-image: var(--kti-faq-gradation);
          background-size: 200% 100%;
          opacity: 0;
          transition: opacity 0.3s;
        }

        &:hover {
          color: var(--cloud);

          &::before {
            opacity: 1;
            animation: faq-question-gradient 3.5s ease-in-out infinite alternate;

            @media (prefers-reduced-motion: reduce) {
              animation: none;
            }
          }

          .faq-q-label {
            filter: brightness(0) invert(1);
          }

          .faq-question-text {
            color: var(--cloud);
          }

          .faq-toggle {
            &::before,
            &::after {
              background-color: var(--cloud);
            }
          }
        }

        .faq-q-label {
          position: absolute;
          top: 38px;
          left: 32px;
          width: 28px;
          height: auto;
          transform: translateY(-50%);
          transition: filter 0.3s;
          @media screen and (max-width: 768px) {
            top: 27px;
            left: 20px;
            width: 22px;
          }
        }

        .faq-question-text {
          display: block;
          padding: 0 75px 0 76px;
          font-size: 18px;
          font-weight: 700;
          color: var(--kti-black);
          transition: color 0.3s;
          @media screen and (max-width: 768px) {
            padding: 0 52px 0 54px;
            font-size: 14px;
          }
        }

        .faq-toggle {
          position: absolute;
          top: 35px;
          right: 40px;
          width: 26px;
          height: 26px;
          transform: translateY(-50%);
          @media screen and (max-width: 768px) {
            top: 26px;
            right: 20px;
            width: 20px;
            height: 20px;
          }

          &::before,
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 3.5px;
            background-color: var(--pu-400);
            border-radius: 999px;
            transform: translate(-50%, -50%);
            transition: background-color 0.3s;
            @media screen and (max-width: 768px) {
              height: 3px;
            }
          }

          /* 縦棒（閉じている時は90度＝＋、開くと0度＝横棒に重なって−） */
          &::after {
            transform: translate(-50%, -50%) rotate(90deg);
            transition: background-color 0.3s, transform 0.3s;
          }
        }
      }

      /* max-heightのトランジションで開閉をアニメーションする（details要素のネイティブ非表示と衝突せず、Safari/Firefoxを含め広くサポートされる手法） */
      .faq-answer {
        display: flex;
        align-items: flex-start;
        gap: 17px;
        padding: 0 75px 0 27px;
        max-height: 0;
        overflow: hidden;
        background-color: var(--kti-primary-color);
        transition: max-height 0.3s ease, padding 0.3s ease;
        @media screen and (max-width: 768px) {
          gap: 10px;
          padding: 0 20px;
        }

        .faq-a-label {
          flex: none;
          width: 32px;
          height: auto;
          margin-top: 4px;
          @media screen and (max-width: 768px) {
            width: 24px;
          }
        }

        .faq-answer-text {
          font-size: 18px;
          font-weight: 400;
          color: var(--kti-black);
          line-height: 1.6;
          @media screen and (max-width: 768px) {
            font-size: 14px;
          }
        }
      }

      &[open] {
        .faq-question {
          border-radius: 50px 0 0 0;
          @media screen and (max-width: 768px) {
            border-radius: 36px 0 0 0;
          }
        }
        .faq-toggle::after {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        .faq-answer {
          max-height: 600px;
          padding: 24px 75px 24px 27px;
          @media screen and (max-width: 768px) {
            padding: 20px;
          }
        }
      }
    }
  }
}

/* ==========================================================
  関連セミナー・資料（related）
========================================================== */
.kti-related {
  padding: 120px 0;
  @media screen and (max-width: 768px) {
    padding: 64px 0;
  }

  .related-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
    }

    .related-list_item {
      width: 360px;
      @media screen and (max-width: 768px) {
        width: 100%;
      }

      .related-list_item-link {
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: all 0.3s;
        &:hover {
          opacity: 0.7;
        }
      }

      img.related-list_item-thumb {
        aspect-ratio: 1200 / 630;
        box-shadow: var(--kti-shadow-02);
        border-radius: 8px;
        @media screen and (max-width: 768px) {
          border-radius: 4px;
        }
      }

      .related-list_item-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--kti-black);
        @media screen and (max-width: 768px) {
          font-size: 15px;
        }
      }
    }
  }
}

/* ==========================================================
  CTA
========================================================== */
.kti-cta {
  padding: 100px 0;
  background: url(/kti/img/cta-bg.png?20260929) no-repeat center center / cover;
  @media screen and (max-width: 768px) {
    padding: 64px 0;
  }

  .kti-cta-content {
    display: flex;
    flex-direction: column;
    text-align: center;

    .kti-cta-text {
      .kti-cta-logo {
        img {
          width: 260px;
          height: auto;
          @media screen and (max-width: 768px) {
            width: 160px;
          }
        }
      }

      .kti-cta-heading {
        position: relative;
        margin-top: 24px;
        background: linear-gradient(170deg, var(--sk-300) 7%, var(--pur-400) 80%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        /* shine側と同じカーニング設定にして文字位置のズレを防ぐ */
        font-kerning: none;
        font-size: 48px;
        font-weight: 700;
        line-height: 1.4;
        @media screen and (max-width: 768px) {
          font-size: 32px;
          margin-top: 12px;
        }

        .kti-heading-shine {
          position: absolute;
          inset: 0;
          background-image: var(--kti-gradation);
          background-size: 220% 100%;
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          -webkit-text-fill-color: transparent;
          font-kerning: none;
          mask-image: var(--kti-shine-mask);
          -webkit-mask-image: var(--kti-shine-mask);
          mask-mode: luminance;
          mask-size: 300% 100%;
          -webkit-mask-size: 300% 100%;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          mask-position: 100% 0;
          -webkit-mask-position: 100% 0;
          pointer-events: none;
          animation: kti-heading-shine-sweep-loop 3s ease-in-out infinite;
          @media (prefers-reduced-motion: reduce) {
            display: none;
          }
        }
      }
    }
  }

  /* cta-listは複数セクションで使い回す共通コンポーネントのためフラットに書く */
  .cta-list {
    justify-content: center;
    margin-top: 64px;
    @media screen and (max-width: 768px) {
      margin-top: 40px;
    }
  }
}

/* ==========================================================
  フッター
========================================================== */
.kti-footer {
  padding: 150px 0 20px;
  @media screen and (max-width: 768px) {
    padding: 100px 0 20px;
  }

  .kti-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .kti-footer-blob {
      width: 223px;
      @media screen and (max-width: 768px) {
        width: 160px;
      }

      .kti-footer-blob-symbol {
        position: relative;
        display: block;
        width: 170px;
        margin: 0 auto;
        padding: 0;
        border: none;
        background: none;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        @media screen and (max-width: 768px) {
          width: 110px;
        }
        &:focus-visible {
          outline: 2px solid var(--pu-400);
          outline-offset: 4px;
          border-radius: 8px;
        }

        .kti-footer-blob-img {
          transform-origin: center bottom;
          --poyon-spin: 1;
          @media (prefers-reduced-motion: reduce) {
            animation: none !important;
          }

          &.is-poyon {
            animation: kti-blob-poyon 0.9s ease-in-out;
          }
          &.is-poyon-horizontal {
            animation: kti-blob-poyon-horizontal 0.9s ease-in-out;
          }
          &.is-poyon-spin {
            animation: kti-blob-poyon-spin 0.9s ease-in-out;
          }
        }

        .kti-footer-blob-tapme {
          position: absolute;
          left: 74%;
          top: -31%;
          width: 62.94%;
          height: auto;
        }
      }
    }

    .kti-footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      margin-top: 100px;
      @media screen and (max-width: 768px) {
        margin-top: 40px;
      }

      .kti-footer-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px 32px;
        @media screen and (max-width: 768px) {
          gap: 8px 16px;
        }
      }

      .kti-footer-copyright {
        font-family: var(--inter);
        font-size: 14px;
        font-weight: 500;
        color: var(--gr-500);
        text-align: center;
        @media screen and (max-width: 768px) {
          font-size: 12px;
        }
      }
    }
  }
}