@charset "UTF-8";
/* =========================================================
   design-tune.css
   サイト全体の文字組み・レイアウトの調整レイヤー
   §5 コンポーネント / §7 モーション を kibidango に適用。
   ※ カラー（§2）は既存のきびだんごブランド（オレンジ／ネイビー）を維持。
   ※ 全ページ = 文字組のみ / TOP（.home .lp）= フル適用
   2026-07-21
   ========================================================= */

/* =========================================================
   §3 タイポグラフィ（全ページ適用・控えめ）
   ---------------------------------------------------------
   ・和文の字間を広げる（上品に見せる要点）
   ・本文行間を 1.8 前後に
   ・英数字は Outfit（幾何学サンセリフ）、和文は Noto Sans JP に
     フォールバックさせる ＝ 欧文と和文で書体を混ぜる考え方
   ========================================================= */
:root {
  --lp-font-mix: "Outfit", "Noto Sans JP", sans-serif;
  --lp-ls-body: .04em;   /* 本文 */
  --lp-ls-head: .06em;   /* 見出し */
  --lp-ls-label: .1em;   /* ラベル・小見出し */
  --lp-lh-body: 1.8;
  --lp-lh-head: 1.45;
  /* ぼかし影は使わない方針（2026.08）。境界は線・面・余白で表現する */
  --lp-transit: all .4s ease-out;
  --lp-transit-fast: all .2s ease-out;
}

body {
  font-family: var(--lp-font-mix);
  letter-spacing: var(--lp-ls-body);
  line-height: var(--lp-lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lp-font-mix);
  letter-spacing: var(--lp-ls-head);
  line-height: var(--lp-lh-head);
}

/* ヘッダーナビ・フッターナビは字間を広げると折り返すため据え置き
   （既存レイアウトを壊さないためのガード） */
.header .nav-list,
.header .nav-list *,
.header .header__link,
.d-menu,
.d-menu *,
.footer [class^="footer-nav-col"],
.footer [class^="footer-nav-col"] * {
  letter-spacing: normal;
}

/* 数字・英字を Outfit で見せるためのユーティリティ */
.font-en,
.num {
  font-family: "Outfit", sans-serif;
  letter-spacing: .02em;
}

/* =========================================================
   §4 レイアウト（TOP）
   ---------------------------------------------------------
   ・インナー幅 1200px → 1280px
   ・セクション上下余白を大きく取る（余白でリズムを作る）
   ========================================================= */
.home .lp .lp-inner {
  max-width: 1280px;
  /* セクションの基本の上下余白（2026.08 に120px→80px） */
  padding-top: 100px; /* 2026.08 80px→100px */
  padding-bottom: 100px;
  padding-left: 32px;
  padding-right: 32px;
}

/* 見出しブロックと本文の間も広げる */
.home .lp .lp-head {
  max-width: 760px;
  margin-bottom: 56px;
}

/* グリッドの余白を 基準（32〜48px）に */
.home .lp .lp-col__grid,
.home .lp .lp-ai__grid,
.home .lp .lp-ba__grid,
.home .lp .lp-industry__cols,
.home .lp .lp-faq__cols,
.home .lp .lp-case__cols,
.home .lp .lp-entry__cols {
  gap: 32px;
}

@media screen and (max-width: 1080px) {
  .home .lp .lp-inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media screen and (max-width: 767px) {
  .home .lp .lp-inner {
    padding: 64px 20px;
  }
  .home .lp .lp-head {
    margin-bottom: 32px;
  }
  .home .lp .lp-col__grid,
  .home .lp .lp-ai__grid,
  .home .lp .lp-ba__grid,
  .home .lp .lp-industry__cols,
  .home .lp .lp-faq__cols,
  .home .lp .lp-case__cols,
  .home .lp .lp-entry__cols {
    gap: 24px;
  }
}

/* =========================================================
   §3-2 見出しのリズム（TOP）
   ---------------------------------------------------------
   既存の日本語ラベル（.lp-lead）＋大見出し（.lp-h2）のペアを
   「ラベル＋大見出し」構成として整える。
   ========================================================= */
.home .lp .lp-lead {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--lp-ls-label);
  line-height: 1.4;
  margin-bottom: 10px;
}

.home .lp .lp-h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: var(--lp-ls-head);
  line-height: 1.5;
  margin-top: 0;
}

.home .lp .lp-note,
.home .lp .lp-ba__desc {
  line-height: var(--lp-lh-body);
  letter-spacing: var(--lp-ls-body);
}

/* 実績数値は Outfit で大きく（数字を強調する） */
.home .lp .lp-case__num,
.home .lp .lp-case__stat strong,
.home .lp .lp-price strong {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  letter-spacing: .01em;
}

/* =========================================================
   §3-3 文字サイズを 基準に合わせる（TOP）
   ---------------------------------------------------------
   基準
     本文 ............ 16px / 行間 1.8
     小見出し ........ 14〜20px / 700
     キャプション..... 12〜14px
     ボタン .......... 16px / 500
   きびだんご側は 9〜13px の指定が多く全体に小さかったため底上げする。
   ========================================================= */

/* --- ヒーロー --- */
.home .lp .lp-hero__title {
  /* 2026.08 に1.5倍 */
  font-size: clamp(45px, 5.85vw, 72px);
  line-height: 1.35;
}
.home .lp .lp-hero__desc {
  font-size: 16px;
  line-height: 1.8;
}

/* --- 本文 --- */
.home .lp .lp-note,
.home .lp .lp-ba__desc,
.home .lp .lp-price,
.home .lp .lp-card__list li,
.home .lp .lp-panel__list li,
.home .lp .lp-col__list li,
.home .lp .lp-faq__item,
.home .lp .lp-industry__cols li {
  font-size: 16px;
  line-height: 1.8;
}

/* --- 小見出し（14〜20px / 700） --- */
.home .lp .lp-card__title,
.home .lp .lp-panel__title,
.home .lp .lp-faq__title,
.home .lp .lp-ai__label {
  font-size: 16px;
  line-height: 1.6;
}
.home .lp .lp-col__title {
  font-size: 20px;
  line-height: 1.6;
}
.home .lp .lp-flow__name {
  font-size: 20px;
  line-height: 1.55;
}
.home .lp .lp-flow__desc {
  font-size: 16px;
  line-height: 1.8;
}

/* ゴールの円（74px固定のグラフィック要素）は字間を広げると
   円からはみ出すため、字間・文字サイズとも元のまま据え置く */
.home .lp .lp-flow__goal,
.home .lp .lp-flow__goal * {
  letter-spacing: normal;
  line-height: 1.35;
}

/* --- キャプション・メタ（12〜14px。9〜11px は底上げ） --- */
.home .lp .lp-lead {
  font-size: 14px;
}
.home .lp .lp-cta__sub,
.home .lp .lp-panel__tag,
.home .lp .lp-check,
.home .lp .lp-case__period,
.home .lp .lp-ai__name {
  font-size: 13px;
  line-height: 1.6;
}

/* --- 見出し --- */
.home .lp .lp-h2 {
  font-size: clamp(26px, 3.0vw, 36px);
}

/* --- ボタン（CTA 16px / 500） --- */
.home .lp .lp-cta__main {
  font-size: 16px;
  line-height: 1.5;
}
.home .lp .lp-btn {
  font-size: 15px;
}

/* --- 数値は大きく（数字を強調する） --- */
.home .lp .lp-case__num {
  font-size: 40px;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .home .lp .lp-note,
  .home .lp .lp-ba__desc,
  .home .lp .lp-price,
  .home .lp .lp-card__list li,
  .home .lp .lp-panel__list li,
  .home .lp .lp-col__list li,
  .home .lp .lp-faq__item,
  .home .lp .lp-industry__cols li,
  .home .lp .lp-hero__desc {
    font-size: 15px;
  }
  .home .lp .lp-col__title {
    font-size: 18px;
  }
  .home .lp .lp-case__num {
    font-size: 32px;
  }
  .home .lp .lp-flow__name {
    font-size: 17px;
  }
  .home .lp .lp-flow__desc {
    font-size: 15px;
  }
}

/* =========================================================
   §5 コンポーネント（TOP）
   ---------------------------------------------------------
   ・ボタン＝角丸 100px（完全ピル）
   ・タグ／チップ＝角丸 4px
   ・カード＝大きめ角丸＋色付きの柔らかい影
   ========================================================= */

/* --- ボタン：ピル形状 --- */
.home .lp .lp-btn {
  border-radius: 100px;
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: var(--lp-ls-body);
  transition: var(--lp-transit);
}

.home .lp .lp-cta {
  border-radius: 100px;
  padding: 18px 32px;
  transition: var(--lp-transit);
}

.home .lp .lp-btn--round,
.home .lp .lp-btn__circle {
  border-radius: 100px;
}

/* ヒーローの CTA は横並びを維持したいので、ピル化で増えた
   左右パディングを戻す（改行させない） */
.home .lp .lp-hero__cta .lp-cta {
  padding: 16px 26px;
  flex: 0 0 auto;
}
@media screen and (min-width: 1081px) {
  .home .lp .lp-hero__cta {
    flex-wrap: nowrap;
  }
  .home .lp .lp-cta__main,
  .home .lp .lp-cta__sub {
    white-space: nowrap;
  }
}

/* 実績スタッツは字間を詰めて折り返しを防ぐ。
   数値は Outfit で見せる（数字を強調する） */
.home .lp .lp-stats,
.home .lp .lp-stats * {
  letter-spacing: .01em;
}
.home .lp .lp-stat__value {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
}

/* --- タグ／チップ：角丸 4px --- */
.home .lp .lp-panel__tag,
.home .lp .lp-ai__label,
.home .lp .lp-orbit__badge {
  border-radius: 4px;
}

/* --- カード：角丸のみ。ぼかし影は使わず、境界は線と余白で出す --- */
.home .lp .lp-card,
.home .lp .lp-panel,
.home .lp .lp-ba__card,
.home .lp .lp-col,
.home .lp .lp-faq__item {
  border-radius: 20px;
  transition: var(--lp-transit);
}

.home .lp .lp-card,
.home .lp .lp-col {
  padding: 28px;
}

@media screen and (max-width: 767px) {
  .home .lp .lp-card,
  .home .lp .lp-col {
    padding: 20px;
  }
  .home .lp .lp-card,
  .home .lp .lp-panel,
  .home .lp .lp-ba__card,
  .home .lp .lp-col,
  .home .lp .lp-faq__item {
    border-radius: 16px;
  }
}

/* --- CTA セクション：上端の大きな角丸（CTAエリア） --- */
.home .lp .lp-closing {
  border-top-left-radius: 64px;
  border-top-right-radius: 64px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .home .lp .lp-closing {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}

/* =========================================================
   §7 モーション
   ---------------------------------------------------------
   ・基本イージング all .4s ease-out
   ・スクロールイン：.lp-anime → .is-inview でフェード＋上スライド
   ・ボタンホバー：暗くする＋矢印を右へ
   ・カードホバー：わずかに浮上
   ========================================================= */

/* --- スクロールイン --- */
.home .lp .lp-anime {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.home .lp .lp-anime.is-inview {
  opacity: 1;
  transform: none;
}

/* --- ボタンホバー --- */
.home .lp .lp-btn:hover,
.home .lp .lp-cta:hover {
  opacity: 1;
}
.home .lp .lp-btn--orange:hover,
.home .lp .lp-cta--orange:hover {
  background: var(--orange-d);
}
.home .lp .lp-btn--navy:hover,
.home .lp .lp-cta--navy:hover {
  background: #0d1a30;
}

/* 矢印を右へスライド */
.home .lp .lp-cta__arrow,
.home .lp .lp-btn__circle {
  transition: transform .2s ease-out;
}
.home .lp .lp-cta:hover .lp-cta__arrow,
.home .lp .lp-btn:hover .lp-btn__circle {
  transform: translateX(4px);
}

/* --- カードホバー：浮上 --- */
.home .lp .lp-card:hover,
.home .lp .lp-panel:hover,
.home .lp .lp-ba__card:hover,
.home .lp .lp-col:hover {
  transform: translateY(-4px);
}

/* --- モーション低減の設定を尊重 --- */
@media (prefers-reduced-motion: reduce) {
  .home .lp .lp-anime {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home .lp *,
  .home .lp *::before,
  .home .lp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* PCでの最小文字サイズを14pxにそろえる（2026.08）。スマホは元のサイズのまま */
@media (min-width: 768px) {
  .home .lp .lp-lead { font-size: 14px; }
  .home .lp .lp-cta__sub, .home .lp .lp-panel__tag, .home .lp .lp-check, .home .lp .lp-case__period, .home .lp .lp-ai__name { font-size: 14px; }
}

/* ===================================
  ヘッダー上部のサブメニュー（2026.08）
  ・グローバルメニューの上にグレーの細い帯を置き、小さい文字でリンクを並べる
  ・.header は absolute（SPはfixed）なので、帯の高さぶん body に上余白を足して相殺する
  ・.header.sub-header（スクロール後に出る固定ヘッダー）にも同じ帯を入れる
====================================== */
.header-top {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e6e6e6;
}
.header-top__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  height: 30px;
  padding: 0 40px 0 100px;
}
.header-top__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: #333333;
  letter-spacing: normal;
  transition: color .2s;
}
.header-top__link::after {
  content: "→";
  font-family: "Outfit", sans-serif;
  color: #f29600;
}
.header-top__link:hover {
  color: #f29600;
}
body {
  padding-top: 30px;
}
.header.sub-header {
  top: -140px;
}
@media screen and (max-width: 1199px) {
  .header {
    height: auto;
  }
  .header-top__inner {
    height: 26px;
    padding: 0 20px;
    gap: 20px;
  }
  .header-top__link {
    font-size: 10px;
  }
  body {
    padding-top: 26px;
  }
  .d-menu {
    top: 81px;
  }
}

/* グローバルメニューの文字は14px（2026.08.23 に16pxから戻した）。SPのドロワーは元のまま */
.header .g-nav .menu__link {
  font-size: 14px;
}

/* PCのヘッダー高さを 90px → 70px に（2026.08.23） */
@media (min-width: 1200px) {
  .header__inner {
    height: 70px;
  }
}

/* ファーストビューのアイソメトリック図は、JSの実測寸法と一致させる（PCのみ・2026.08） */
@media (min-width: 1200px) {
  .home .lp .lp-orbit {
    transform: none;
    transform-origin: center center;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* 分断・一気通貫のネイビー固定背景は廃止（2026.08.24、ぼかし写真背景 .lp-ba__bg に置き換え） */

/* 一気通貫の図：画像内の濃紺文字がネイビー背景で読めないため、白いパネルを敷く（2026.08.23） */
.home .lp .lp-ba .lp-flow__map--img {
  background: rgba(255, 255, 255, .96);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 40px);
  width: 100%;
  max-width: 700px;
}

/* サービスLPのヒーロー：h1の下に20pxの余白（2026.08.23）／文字色は赤（2026.08.24） */
.svlp-hero__h1 {
  margin-bottom: 20px;
  color: #bf3434;
}

/* 「一つのチームで担当」のタグと上のオレンジ線を削除（2026.08.23） */
.home .lp .lp-ba .lp-flow__result {
  border-top: 0;
  padding-top: 0;
}

/* 分断セクションの見出しと本文の配置（2026.08.23）
   見出しは大きく左寄せ、本文は右半分に下げて置く */
.home .lp .lp-ba .lp-ba__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.home .lp .lp-ba .lp-ba__title {
  grid-column: 1 / -1;
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
}
.home .lp .lp-ba .lp-ba__desc {
  grid-column: 2;
  max-width: 560px;
  margin: 36px 0 0;
}
@media (max-width: 900px) {
  .home .lp .lp-ba .lp-ba__intro {
    grid-template-columns: 1fr;
  }
  .home .lp .lp-ba .lp-ba__desc {
    grid-column: 1;
    max-width: none;
    margin-top: 24px;
  }
}

/* ヒーロー見出しのウェイトを500に（2026.08） */
.home .lp .lp-hero__title {
  font-weight: 500;
}

/* 会社情報メガメニュー下部の注記（2026.08.24） */
.mega__note {
  margin-top: 14px;
  font-size: 12px;
  color: #888888;
  text-align: right;
}