@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+JP:wght@200;300;400;500;700;900&display=swap');

/* ===========================================================================
   KAPUTELI 独自ヘッダーを使うページで、Lightning標準ヘッダーを非表示
   トップページ ／ /lp/ ／ /cgpers-detail/ で共通使用
   =========================================================================== */
.home .site-header,
.home .siteHeader,
.home #siteHeader,
.home .site-header-layout-default,
.home .global-nav,
.home .gMenu_outer,
.post-name-lp .site-header,
.post-name-lp .siteHeader,
.post-name-lp #siteHeader,
.post-name-lp .site-header-layout-default,
.post-name-lp .global-nav,
.post-name-lp .gMenu_outer,
.post-name-cgpers-detail .site-header,
.post-name-cgpers-detail .siteHeader,
.post-name-cgpers-detail #siteHeader,
.post-name-cgpers-detail .site-header-layout-default,
.post-name-cgpers-detail .global-nav,
.post-name-cgpers-detail .gMenu_outer {
    display: none !important;
}
/* Lightning メインエリア上部の余白リセット（共通） */
.home .site-body,
.home #main,
.home .site-content,
.page-lp .site-body,
.page-lp #main,
.page-lp .site-content,
.page-cgpers-detail .site-body,
.page-cgpers-detail #main,
.page-cgpers-detail .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 管理バー（ログイン中のみ表示される黒いバー）の分の余白調整 */
.home.admin-bar .kpt-header,
.page-lp.admin-bar .kpt-header,
.page-cgpers-detail.admin-bar .kpt-header {
    top: 32px;
}

/* ===========================================================================
   ROOT & RESET ／ .kpt- でスコープ化
   =========================================================================== */
.kpt-root {
  --kpt-bg:        #ffffff;
  --kpt-bg-alt:    #f6f5f2;
  --kpt-text:      #111111;
  --kpt-text-2:    #3a3a3a;
  --kpt-muted:     #8a8a8a;
  --kpt-line:      #e5e3df;
  --kpt-line-dark: #cfcdc8;
  --kpt-accent:    #111111;

  --kpt-pad-x:     56px;
  --kpt-pad-x-sp:  20px;

  --kpt-font-jp:   'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --kpt-font-en:   'Inter', 'Noto Sans JP', sans-serif;

  --kpt-slide-duration: 5500ms;
  --kpt-slide-fade:     1800ms;

  background: var(--kpt-bg);
  color: var(--kpt-text);
  font-family: var(--kpt-font-jp);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
.kpt-root *,
.kpt-root *::before,
.kpt-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.kpt-root a { color: inherit; text-decoration: none; transition: opacity .3s ease; }
.kpt-root a:hover { opacity: .55; }
.kpt-root img,
.kpt-root svg { display: block; max-width: 100%; }
.kpt-root ul, .kpt-root ol { list-style: none; }
.kpt-root button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ===========================================================================
   HERO ／ ヘッダー一体型・5枚スライドショー
   =========================================================================== */
.kpt-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #000;
}
.kpt-hero-slides { position: absolute; inset: 0; z-index: 1; }
.kpt-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.0);
  transition:
    opacity var(--kpt-slide-fade) cubic-bezier(.4, 0, .2, 1),
    transform 7s cubic-bezier(.25, .46, .45, .94);
  will-change: opacity, transform;
}
.kpt-slide.is-active { opacity: 1; transform: scale(1.06); }

.kpt-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.10) 18%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,.46) 100%);
  pointer-events: none;
}

.kpt-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--kpt-pad-x);
  color: #fff;
  background: transparent;
  transition: background-color .5s ease, color .5s ease, padding .5s ease, border-color .5s ease, transform .5s ease;
  border-bottom: 1px solid transparent;
}
.kpt-root.is-scrolled .kpt-header {
  position: fixed;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--kpt-text);
  border-bottom-color: var(--kpt-line);
  padding: 14px var(--kpt-pad-x);
  animation: kpt-headerDrop .5s ease forwards;
}
@keyframes kpt-headerDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.kpt-logo {
  font-family: var(--kpt-font-en);
  font-weight: 500;
  letter-spacing: 0.34em;
  font-size: 14px;
}
.kpt-logo .kpt-logo-mark {
  font-family: var(--kpt-font-jp);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-left: 6px;
  opacity: 0.7;
}

.kpt-nav { display: flex; align-items: center; gap: 36px; }
.kpt-nav-list { display: flex; gap: 34px; align-items: center; }
.kpt-nav-list > li { position: relative; }
.kpt-nav-list a,
.kpt-nav-list > li > span.kpt-has-sub {
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  padding: 8px 0;
}
.kpt-nav-list .kpt-has-sub::after {
  content: "+";
  margin-left: 6px;
  font-weight: 300;
  opacity: .6;
}
.kpt-submenu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: #fff;
  color: var(--kpt-text);
  border: 1px solid var(--kpt-line);
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.kpt-nav-list > li:hover > .kpt-submenu,
.kpt-nav-list > li:focus-within > .kpt-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.kpt-submenu a {
  display: block;
  padding: 11px 24px;
  font-family: var(--kpt-font-jp);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--kpt-text);
  white-space: nowrap;
  text-transform: none;
}
.kpt-submenu a + a { border-top: 1px solid var(--kpt-line); }

.kpt-burger {
  display: none;
  width: 28px;
  height: 18px;
  position: relative;
}
.kpt-burger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .4s ease, top .4s ease, opacity .3s;
}
.kpt-burger span:nth-child(1) { top: 4px; }
.kpt-burger span:nth-child(2) { top: 50%; }
.kpt-burger span:nth-child(3) { top: calc(100% - 4px); }
.kpt-root.is-menu-open .kpt-burger span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.kpt-root.is-menu-open .kpt-burger span:nth-child(2) { opacity: 0; }
.kpt-root.is-menu-open .kpt-burger span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.kpt-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--kpt-bg);
  padding: 100px 32px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.kpt-root.is-menu-open .kpt-drawer { opacity: 1; visibility: visible; }
.kpt-drawer ul { display: flex; flex-direction: column; gap: 24px; }
.kpt-drawer a {
  font-family: var(--kpt-font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kpt-text);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.kpt-drawer a .kpt-drawer-jp {
  font-family: var(--kpt-font-jp);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kpt-muted);
  text-transform: none;
  font-weight: 400;
}
.kpt-drawer-sub {
  margin-top: 12px;
  margin-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kpt-drawer-sub a {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--kpt-text-2);
  font-weight: 400;
}

.kpt-hero-bottom {
  position: absolute;
  left: var(--kpt-pad-x);
  right: var(--kpt-pad-x);
  bottom: 80px;
  z-index: 3;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  pointer-events: none;
}
.kpt-hero h1 {
  font-family: var(--kpt-font-jp);
  font-weight: 200;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.18em;
  line-height: 1.7;
  max-width: 70%;
  text-shadow: 0 1px 20px rgba(0,0,0,.25);
}
.kpt-hero h1 .kpt-hero-en {
  display: block;
  font-family: var(--kpt-font-en);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 18px;
}
.kpt-hero-meta {
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-align: right;
  opacity: 0.85;
  line-height: 2.2;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.kpt-hero-indicator {
  position: absolute;
  left: var(--kpt-pad-x);
  bottom: 36px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
}
.kpt-hero-indicator-num {
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,.85);
  margin-right: 16px;
  min-width: 56px;
}
.kpt-hero-indicator-num em { font-style: normal; opacity: .55; }
.kpt-dot {
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,0.30);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  display: block;
}
.kpt-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.95);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.kpt-dot.is-active::after {
  transform: scaleX(1);
  transition: transform var(--kpt-slide-duration) linear;
}
.kpt-dot.is-passed::after {
  transform: scaleX(1);
  transition: transform .25s ease;
  opacity: .35;
}

/* ===========================================================================
   SECTION SHELL
   =========================================================================== */
.kpt-section { padding: 140px 0; position: relative; }
.kpt-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--kpt-pad-x);
}
.kpt-section-head { margin-bottom: 80px; }
.kpt-eyebrow {
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--kpt-muted);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kpt-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.kpt-section-title {
  font-family: var(--kpt-font-jp);
  font-weight: 200;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: var(--kpt-text);
}
.kpt-section-title-en {
  font-family: var(--kpt-font-en);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--kpt-text);
}
.kpt-section-lead {
  margin-top: 32px;
  max-width: 640px;
  font-size: 14px;
  line-height: 2.2;
  color: var(--kpt-text-2);
  font-weight: 400;
}

/* "View All ＞＞" link 共通 */
.kpt-section-more-wrap {
  margin-top: 80px;
  text-align: center;
}
.kpt-section-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--kpt-text);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--kpt-text);
  transition: gap .35s ease, padding-right .35s ease;
}
.kpt-section-more::after {
  content: "＞＞";
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
}
.kpt-section-more:hover {
  gap: 22px;
  padding-right: 8px;
  opacity: 1;
}

.kpt-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.kpt-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===========================================================================
   INTRO
   =========================================================================== */
.kpt-intro { padding: 160px 0 120px; }
.kpt-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.kpt-intro-en {
  font-family: var(--kpt-font-en);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.18;
  color: var(--kpt-text);
  letter-spacing: 0.02em;
}
.kpt-intro-jp {
  font-family: var(--kpt-font-jp);
  font-size: 14px;
  line-height: 2.4;
  color: var(--kpt-text-2);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.kpt-intro-jp p + p { margin-top: 1.5em; }
.kpt-intro-jp strong {
  font-weight: 700;
  color: var(--kpt-text);
}

/* ===========================================================================
   SERVICES (デザイン性強化版)
   =========================================================================== */
.kpt-services {
  background: var(--kpt-bg-alt);
  position: relative;
  overflow: hidden;       /* 大きな番号ウォーターマークの overflow を隠す */
}
.kpt-services-list { display: flex; flex-direction: column; gap: 0; }

.kpt-service {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 120px 0;
  border-top: 1px solid var(--kpt-line-dark);
}
.kpt-service:last-child { border-bottom: 1px solid var(--kpt-line-dark); }
.kpt-service:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
.kpt-service:nth-child(even) .kpt-service-visual { order: 2; }
.kpt-service:nth-child(even) .kpt-service-body   { order: 1; }

/* --- 巨大な装飾番号ウォーターマーク --- */
.kpt-service-bignum {
  position: absolute;
  top: 60px;
  font-family: var(--kpt-font-en);
  font-weight: 100;
  font-size: clamp(160px, 22vw, 360px);
  line-height: 0.85;
  color: var(--kpt-text);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
}
.kpt-service:nth-child(odd)  .kpt-service-bignum { right: -40px; }
.kpt-service:nth-child(even) .kpt-service-bignum { left: -40px; }

/* --- 画像エリア + Featured バッジ --- */
.kpt-service-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #ddd;
  display: block;
  z-index: 1;
}
.kpt-service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  filter: grayscale(0.12) contrast(1.02);
}
.kpt-service:hover .kpt-service-visual img { transform: scale(1.04); }

.kpt-service-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 16px;
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-text);
  z-index: 2;
}

/* --- Body エリア --- */
.kpt-service-body { position: relative; z-index: 1; }

/* --- 番号 + カテゴリラベル ／ 横長の罫線レイアウト --- */
.kpt-service-no {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  font-family: var(--kpt-font-en);
}
.kpt-service-no-num {
  font-weight: 200;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--kpt-text);
}
.kpt-service-no-cat {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-muted);
  padding-bottom: 4px;
}
.kpt-service-no::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kpt-line-dark);
  margin-bottom: 4px;
}

/* --- 大きな英文タイトル ／ 主役 --- */
.kpt-service-title {
  font-family: var(--kpt-font-en);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  color: var(--kpt-text);
}

/* --- 日本語タイトル ／ 罫線で区切る --- */
.kpt-service-title-jp {
  font-family: var(--kpt-font-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--kpt-text-2);
  margin-bottom: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--kpt-line-dark);
}

/* --- タグピル ／ メタ情報を視覚的に --- */
.kpt-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0;
  padding: 0;
}
.kpt-service-tags li {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--kpt-text-2);
  border: 1px solid var(--kpt-line-dark);
  border-radius: 100px;
  white-space: nowrap;
  transition: all .3s ease;
}
.kpt-service-tags li:first-child {
  background: var(--kpt-text);
  color: var(--kpt-bg);
  border-color: var(--kpt-text);
}

/* --- 説明文 --- */
.kpt-service-desc {
  font-size: 14px;
  line-height: 2.15;
  color: var(--kpt-text-2);
  margin-bottom: 24px;
  font-weight: 400;
}
.kpt-service-desc-en {
  font-family: var(--kpt-font-en);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--kpt-muted);
  margin-bottom: 36px;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* --- Stats Row ／ 3つの数値で説得力UP --- */
.kpt-service-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--kpt-line-dark);
  border-bottom: 1px solid var(--kpt-line-dark);
}
.kpt-service-stats li {
  padding: 22px 8px;
  border-right: 1px solid var(--kpt-line-dark);
  text-align: center;
}
.kpt-service-stats li:last-child { border-right: none; }
.kpt-stat-num {
  display: block;
  font-family: var(--kpt-font-en);
  font-weight: 200;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  color: var(--kpt-text);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.kpt-stat-label {
  display: block;
  font-family: var(--kpt-font-en);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-muted);
}

/* --- View Detail リンク --- */
.kpt-service-link {
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-text);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--kpt-text);
  transition: gap .35s ease;
}
.kpt-service-link:hover { gap: 22px; opacity: 1; }
.kpt-service-link::after { content: "＞＞"; font-size: 12px; letter-spacing: 0; }

/* ===========================================================================
   WORKS GALLERY ／ 制作実績ギャラリー
   =========================================================================== */
.kpt-works { background: var(--kpt-bg); }
.kpt-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.kpt-work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.kpt-work-fig {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--kpt-bg-alt);
  margin-bottom: 20px;
}
.kpt-work-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  filter: grayscale(0.05) contrast(1.02);
}
.kpt-work-card:hover { opacity: 1; }
.kpt-work-card:hover .kpt-work-fig img { transform: scale(1.05); }
.kpt-work-info { padding: 0 4px; }
.kpt-work-cat {
  display: block;
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-muted);
  margin-bottom: 10px;
}
.kpt-work-title {
  font-family: var(--kpt-font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--kpt-text);
}

/* ===========================================================================
   OUR EDGE ／ Why Us （背景 off-white でリズム作り）
   =========================================================================== */
.kpt-edge { background: var(--kpt-bg-alt); }
.kpt-edge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--kpt-line-dark);
}
.kpt-edge-item {
  position: relative;
  padding: 56px 40px;
  border-right: 1px solid var(--kpt-line-dark);
  border-bottom: 1px solid var(--kpt-line-dark);
}
.kpt-edge-item:last-child { border-right: none; }
.kpt-edge-no {
  font-family: var(--kpt-font-en);
  font-weight: 200;
  font-size: 56px;
  line-height: 1;
  color: var(--kpt-text);
  margin-bottom: 32px;
  display: block;
  letter-spacing: 0.02em;
}
.kpt-edge-title-en {
  font-family: var(--kpt-font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kpt-edge-title-jp {
  font-family: var(--kpt-font-jp);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--kpt-muted);
  margin-bottom: 28px;
}
.kpt-edge-desc {
  font-size: 13px;
  line-height: 2.15;
  color: var(--kpt-text-2);
  font-weight: 400;
}

/* ===========================================================================
   COLUMN ／ コラム最新3件
   =========================================================================== */
.kpt-column { background: var(--kpt-bg); }
.kpt-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.kpt-col-card { position: relative; }
.kpt-col-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.kpt-col-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--kpt-bg-alt);
  margin-bottom: 24px;
}
.kpt-col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  filter: grayscale(0.08) contrast(1.02);
}
.kpt-col-link:hover { opacity: 1; }
.kpt-col-link:hover .kpt-col-img img { transform: scale(1.05); }
.kpt-col-link:hover .kpt-col-read { gap: 16px; }
.kpt-col-link:hover .kpt-col-title { color: var(--kpt-text); }

.kpt-col-body { padding: 0 4px; }
.kpt-col-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.kpt-col-date {
  font-family: var(--kpt-font-en);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--kpt-muted);
}
.kpt-col-cat {
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kpt-text);
  border: 1px solid var(--kpt-line-dark);
  padding: 3px 10px;
}
.kpt-col-title {
  font-family: var(--kpt-font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--kpt-text);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s ease;
}
.kpt-col-excerpt {
  font-family: var(--kpt-font-jp);
  font-size: 13px;
  line-height: 2;
  color: var(--kpt-text-2);
  margin-bottom: 20px;
  letter-spacing: 0.06em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpt-col-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kpt-text);
  transition: gap .35s ease;
}

/* ===========================================================================
   NEWS
   =========================================================================== */
.kpt-news { background: var(--kpt-bg-alt); }
.kpt-news-list { border-top: 1px solid var(--kpt-line-dark); }
.kpt-news-item {
  display: grid;
  grid-template-columns: 200px 140px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--kpt-line-dark);
  transition: padding-left .4s ease;
}
.kpt-news-item:hover { padding-left: 12px; opacity: 1; }
.kpt-news-date {
  font-family: var(--kpt-font-en);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--kpt-muted);
}
.kpt-news-cat {
  font-family: var(--kpt-font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-text);
  border: 1px solid var(--kpt-line-dark);
  padding: 4px 12px;
  display: inline-block;
  width: fit-content;
}
.kpt-news-title {
  font-family: var(--kpt-font-jp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--kpt-text);
}
.kpt-news-arrow {
  font-family: var(--kpt-font-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--kpt-muted);
}

/* ===========================================================================
   CTA / CONTACT
   =========================================================================== */
.kpt-cta { padding: 200px 0; text-align: center; }
.kpt-cta h2 {
  font-family: var(--kpt-font-jp);
  font-weight: 200;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}
.kpt-cta h2 .kpt-cta-en {
  display: block;
  font-family: var(--kpt-font-en);
  font-weight: 300;
  font-size: 0.34em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--kpt-muted);
  margin-bottom: 28px;
}
.kpt-cta p {
  font-family: var(--kpt-font-jp);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--kpt-text-2);
  line-height: 2.2;
  margin-bottom: 56px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}
.kpt-cta-buttons {
  display: inline-flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.kpt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 44px;
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--kpt-text);
  border: 1px solid var(--kpt-text);
  background: transparent;
  overflow: hidden;
  transition: color .5s ease;
}
.kpt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kpt-text);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.7,0,.2,1);
  z-index: 0;
}
.kpt-btn > * { position: relative; z-index: 1; }
.kpt-btn:hover { color: var(--kpt-bg); opacity: 1; }
.kpt-btn:hover::before { transform: translateY(0); }
.kpt-btn-fill { background: var(--kpt-text); color: var(--kpt-bg); border-color: var(--kpt-text); }
.kpt-btn-fill::before { background: var(--kpt-bg); }
.kpt-btn-fill:hover { color: var(--kpt-text); }
.kpt-btn-fill:hover::before { transform: translateY(0); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.kpt-footer {
  border-top: 1px solid var(--kpt-line);
  padding: 80px var(--kpt-pad-x) 32px;
  background: var(--kpt-bg);
}
.kpt-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.kpt-footer h4 {
  font-family: var(--kpt-font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--kpt-text);
}
.kpt-footer ul { display: flex; flex-direction: column; gap: 10px; }
.kpt-footer ul a {
  font-family: var(--kpt-font-jp);
  font-size: 12px;
  color: var(--kpt-text-2);
  letter-spacing: 0.08em;
  font-weight: 400;
}
.kpt-footer p {
  font-family: var(--kpt-font-jp);
  font-size: 12px;
  color: var(--kpt-text-2);
  line-height: 2;
  letter-spacing: 0.08em;
  font-weight: 400;
}
.kpt-footer-brand {
  font-family: var(--kpt-font-en);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.34em;
  margin-bottom: 18px;
  color: var(--kpt-text);
}
.kpt-foot-bottom {
  max-width: 1320px;
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--kpt-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--kpt-font-en);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kpt-muted);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .kpt-section { padding: 110px 0; }
  .kpt-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .kpt-service { grid-template-columns: 1fr; gap: 40px; padding: 80px 0; }
  .kpt-service:nth-child(even) { grid-template-columns: 1fr; }
  .kpt-service:nth-child(even) .kpt-service-visual { order: 0; }
  .kpt-service:nth-child(even) .kpt-service-body   { order: 0; }
  .kpt-service-bignum { font-size: clamp(140px, 30vw, 240px); top: 40px; }

  .kpt-works-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .kpt-column-grid { grid-template-columns: 1fr; gap: 56px; max-width: 640px; margin: 0 auto; }

  .kpt-edge-grid { grid-template-columns: 1fr; }
  .kpt-edge-item { border-right: 0; }

  .kpt-news-item { grid-template-columns: 110px 1fr; gap: 16px; row-gap: 8px; }
  .kpt-news-cat { grid-column: 2; justify-self: start; }
  .kpt-news-title { grid-column: 1 / 3; }
  .kpt-news-arrow { display: none; }

  .kpt-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .kpt-root { --kpt-pad-x: var(--kpt-pad-x-sp); }
  .kpt-section { padding: 80px 0; }
  .kpt-section-head { margin-bottom: 48px; }
  .kpt-section-title { font-size: clamp(32px, 9vw, 52px); }
  .kpt-section-title-en { font-size: clamp(38px, 11vw, 64px); }

  .kpt-section-more-wrap { margin-top: 56px; }

  .kpt-nav-list, .kpt-nav-list .kpt-has-sub { display: none; }
  .kpt-burger { display: block; }
  .kpt-header { padding: 18px var(--kpt-pad-x-sp); }
  .kpt-root.is-scrolled .kpt-header { padding: 12px var(--kpt-pad-x-sp); }

  .kpt-hero { height: 92vh; min-height: 520px; }
  .kpt-hero h1 { max-width: 100%; }
  .kpt-hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    bottom: 100px;
  }
  .kpt-hero-meta { text-align: left; }
  .kpt-hero-indicator {
    left: var(--kpt-pad-x-sp);
    right: var(--kpt-pad-x-sp);
    bottom: 28px;
  }
  .kpt-hero-indicator-num { margin-right: 12px; min-width: 50px; font-size: 9px; }
  .kpt-dot { width: 22px; }

  .kpt-intro { padding: 100px 0 80px; }
  .kpt-intro-en { font-size: clamp(30px, 9vw, 44px); }

  .kpt-service { padding: 60px 0; }
  .kpt-service-bignum { font-size: clamp(100px, 28vw, 180px); top: 24px; }
  .kpt-service-no-num { font-size: 28px; }
  .kpt-service-tag { top: 14px; left: 14px; padding: 7px 12px; font-size: 9px; letter-spacing: 0.28em; }
  .kpt-service-tags { gap: 6px; margin: 28px 0; }
  .kpt-service-tags li { padding: 6px 12px; font-size: 9px; letter-spacing: 0.16em; }
  .kpt-service-stats li { padding: 16px 4px; }
  .kpt-stat-num { font-size: 22px; }
  .kpt-stat-label { font-size: 8px; letter-spacing: 0.24em; }

  .kpt-works-grid { grid-template-columns: 1fr; gap: 40px; }

  .kpt-edge-item { padding: 40px 24px; }
  .kpt-edge-no { font-size: 44px; margin-bottom: 24px; }

  .kpt-cta { padding: 100px 0; }
  .kpt-cta-buttons { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
  .kpt-btn { justify-content: center; padding: 20px 24px; }

  .kpt-footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .kpt-footer { padding: 60px var(--kpt-pad-x-sp) 24px; }
  .kpt-foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; font-size: 9px; letter-spacing: 0.28em; }
}

.kpt-root.is-menu-open { overflow: hidden; height: 100vh; }