@charset "UTF-8";
/* トップページ専用スタイル。色・タイポ・ボタン・グリッドの値は必ず tokens.css を参照し、
   ここでは「トップページだけに固有の配置」のみを定義する。 */

.kl-top{ background:var(--kl-white); }

/* ---- Hero ---- */
.kl-hero{ position:relative; width:100%; height:640px; overflow:hidden; background:var(--kl-black); }
.kl-hero-bg{ position:absolute; inset:0; }
.kl-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.75; }
.kl-hero-overlay{ position:absolute; inset:0; background:linear-gradient(140deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 70%); }
.kl-hero-content{ position:absolute; inset:0; padding:0 0 64px 72px; display:flex; flex-direction:column; justify-content:flex-end; max-width:640px; }
.kl-hero-content .kl-h1-en{ margin-bottom:20px; }
.kl-hero-jp{ font-family:var(--kl-font-sans); font-size:14px; line-height:1.9; color:var(--kl-on-dark-75); letter-spacing:.02em; }
.kl-hero-scroll{
  position:absolute; bottom:32px; right:48px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--kl-font-en); font-size:11px; letter-spacing:.22em;
  color:var(--kl-on-dark-40);
}
.kl-hero-scroll::after{ content:''; display:block; width:48px; height:1px; background:var(--kl-on-dark-30); }
@media (max-width:768px){
  .kl-hero{ height:560px; }
  .kl-hero-content{ padding:0 24px 48px; max-width:none; }
  .kl-hero-scroll{ display:none; }
}

/* ---- Concept ---- */
.kl-concept{ max-width:680px; }
.kl-concept .kl-body{ max-width:none; }

/* ---- Service / Works grid header spacing ---- */
.kl-service-grid-wrap{ margin-top:32px; }
.kl-works-more{ display:flex; justify-content:flex-end; margin-top:20px; }
.kl-service-card .kl-card-badge-bar{ padding:16px 14px 12px; }

/* ---- Voice(共通コンポーネントはtokens.cssに移設。ここは配置微調整のみ) ---- */
.kl-voice-grid{ margin-top:8px; }

/* ---- Area ---- */
.kl-area-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; }
.kl-area-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- Thoughts: 3 pillars(信頼/技術/対話) ---- */
/* kl-pillars(信頼/技術/対話などの番号付きリスト)は共通コンポーネント化してtokens.cssへ移設 */

/* ---- Information list ---- */
.kl-info-list{ display:flex; flex-direction:column; }
.kl-info-item{
  display:flex; align-items:baseline; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--kl-on-dark-08);
  text-decoration:none;
}
.kl-info-item:hover .kl-body--on-dark{ color:var(--kl-white); }

@media (max-width:768px){
  .kl-hero-content .kl-h1-en{ font-size:36px; }
}