/* =========================================================
   components.css — 再利用コンポーネント
   依存: tokens.css / base.css

   P2: logo / btn(ピルボタン) / site-header / sp-menu / site-footer
   P3で追加: chip / section-head / table-row / case-card（CTASectionは廃止＝フッターに統合）
   ========================================================= */

/* =========================================================
   ロゴ「6 inc.」
   ========================================================= */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-primary);
}

.logo__six {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
}

.logo__inc {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.logo--inverse {
  color: var(--color-text-inverse);
}

/* =========================================================
   ピルボタン（Figma: Button 46:11 — Style=Dark/Light × Size=M/L）
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn--m {
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-button); /* 12.5px */
}

.btn--l {
  padding: var(--space-lg) var(--space-3xl);
  font-size: var(--text-label-l); /* 15px */
}

.btn--dark {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.btn--light {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* 外部リンク用アイコン付き（WPセンター等） */
.btn__ext-icon {
  width: 20px;
  height: 20px;
  margin-left: var(--space-sm);
}

/* =========================================================
   サイトヘッダー（Figma: Header 48:2 / Header SP 61:631）
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-md) var(--space-md) 0; /* 12px */
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: var(--space-3xl) var(--space-md); /* 左32 / 右12 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg); /* 10 */
  /* PCは幅100%（左右はsite-headerの12pxパディングのみ）。
     1440px超のワイドモニターでも帯が途切れない（2026-08-03決定） */
  width: 100%;
}

.site-header__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--color-text-primary);
}

.site-header__tagline-divider {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__nav-list {
  display: flex;
  gap: 36px;
}

.site-header__nav-list a {
  color: var(--color-text-primary);
}

/* ハンバーガー（SPのみ表示） */
.site-header__burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: var(--space-sm) 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-header__burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-primary);
}

.site-header__burger-bar--short {
  width: 14px;
}

/* =========================================================
   SP全画面メニュー（Figma: SP_00_Menu 71:1210）
   ========================================================= */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: var(--color-bg-inverse) url("../img/texture-dark-tall.png") center / cover;
}

.sp-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-lg) var(--space-xl) var(--space-3xl);
  color: var(--color-text-inverse);
}

.sp-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4xl);
}

.sp-menu__logo {
  color: var(--color-text-inverse);
}

.sp-menu__logo .logo__six { font-size: 22px; }
.sp-menu__logo .logo__inc { font-size: 13px; font-family: var(--font-body); }

.sp-menu__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 15px;
  cursor: pointer;
}

.sp-menu__nav > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sp-menu__item {
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
  padding-bottom: var(--space-md);
}

.sp-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-inverse);
}

.sp-menu__labels {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.sp-menu__en {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
}

.sp-menu__jp {
  font-size: var(--text-caption);
}

.sp-menu__arrow {
  font-size: 15px;
}

.sp-menu__subs {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) 0 0 var(--space-lg);
}

.sp-menu__subs a {
  color: var(--color-text-inverse);
  font-size: var(--text-body-s);
}

.sp-menu__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: auto;
  padding-top: var(--space-4xl);
}

.sp-menu__wpcenter {
  color: var(--color-text-inverse);
  font-size: var(--text-caption);
}

.sp-menu__copy {
  font-size: var(--text-tag);
  font-weight: 500;
}

/* メニュー展開中は背面スクロールを止める（navigation.jsが付与） */
body.sp-menu-open {
  overflow: hidden;
}

/* =========================================================
   サイトフッター（Figma: Footer 49:9 / Footer SP 62:637）
   ========================================================= */
/* 2026-08-03 刷新: 単色ダーク・角丸なし・全幅（テクスチャ／左右余白は廃止）
   ＋ 旧CTASectionをフッター冒頭に統合 */
.site-footer {
  /* フッターと直上コンテンツの間隔は88px（2026-08-03決定・全ページ共通） */
  margin-top: var(--space-section); /* 88 */
  background: var(--color-bg-footer);
  color: var(--color-text-inverse);
}

/* 404はNotFoundブロック自体が大きな上下余白を持つため間隔を詰める（Figma: FooterWrap padTop=0） */
body.error404 .site-footer {
  margin-top: 0;
}

.site-footer__inner {
  padding: var(--space-5xl) var(--space-5xl) 36px; /* 56 56 36 */
}

/* ---- フッター内CTA（Figma: Frame 3 — 右寄せ・見出し＋ボタン） ---- */
.site-footer__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xl); /* 24 */
  margin-bottom: var(--space-4xl); /* 48 */
}

.site-footer__cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-l); /* 64 */
  line-height: 1.2;
  color: var(--color-text-inverse);
}

/* ---- 区切り線（Figma: Vector 1 — 白1px） ---- */
.site-footer__divider {
  height: 0;
  margin: var(--space-4xl) 0 var(--space-4xl);
  border: 0;
  border-top: 1px solid var(--color-text-inverse);
}

.site-footer__cols {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

.site-footer__logo-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__logo-col .logo__inc {
  font-family: var(--font-body);
  font-weight: 700;
}

.site-footer__address {
  font-size: var(--text-body-s);
  line-height: 1.7;
}

.site-footer__links {
  display: flex;
  gap: var(--space-6xl);
}

.site-footer__col-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__col a {
  color: var(--color-text-inverse);
  font-size: var(--text-body-s);
}

.site-footer__copy {
  font-size: 11px;
}

/* =========================================================
   パンくず（PageTitle内「TOP ＞ …」— six_breadcrumb()）
   ========================================================= */
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb__sep {
  font-size: 10px;
}

/* =========================================================
   Chip（Figma: 47:2 — アウトラインタグ）
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md); /* 4 12 */
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-tag); /* 10.5 */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* =========================================================
   SectionHead（Figma: 47:4 — [JP太字] ✱ [ENラベル]）
   ========================================================= */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-md); /* 12 */
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.section-head__star {
  font-size: 16px;
  line-height: 1;
  color: var(--color-icon-default);
}

/* =========================================================
   TableRow（Figma: 47:7 PC横並び ／ 61:639 SP縦積み）
   dl.table でラップして使う: <dl class="table"> <div class="table-row">…
   ========================================================= */
.table {
  margin: 0;
}

.table-row {
  display: flex;
  border-top: 1px solid var(--color-border-default);
}

.table-row:last-child {
  border-bottom: 1px solid var(--color-border-default);
}

.table-row__key {
  flex: 0 0 240px;
  padding-block: var(--space-xl); /* 24 */
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  color: var(--color-text-primary);
}

.table-row__value {
  flex: 1;
  margin: 0;
  padding-block: var(--space-xl);
  font-size: var(--text-body); /* 14 */
  color: var(--color-text-secondary);
}

/* =========================================================
   CaseCard（Figma: 48:12 ／ SP 61:642）
   ========================================================= */
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 16 */
  padding: var(--space-lg) var(--space-lg) var(--space-xl); /* 16 16 24 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl); /* 12 */
  color: var(--color-text-primary);
}

.case-card__image {
  width: 100%;
  aspect-ratio: 408 / 230;
  object-fit: cover;
  border-radius: var(--radius-lg); /* 10 */
}

.case-card__image--empty {
  display: block;
  background: var(--color-border-default);
}

.case-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md); /* 12 */
  padding-inline: var(--space-sm); /* 8 */
}

.case-card__title {
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
}

.case-card__client {
  font-size: var(--text-caption); /* 11.5 */
  color: var(--color-text-secondary);
}


/* =========================================================
   TOPヒーロー（Figma: Hero 14:16 / HeroLeft 152:1403）
   2026-08-03: 領域を拡大（高さ350→500・下余白80px追加）
   ========================================================= */
.hero {
  position: relative;
  min-height: 500px; /* Figma: Hero h500 */
  padding: var(--space-md) var(--space-md) 80px; /* 12 / 12 / 80 */
}

.hero__inner {
  max-width: 860px; /* Figma: HeroLeft w860（左寄せ） */
  min-height: 405px; /* Figma: HeroLeft h405 */
  padding: var(--space-5xl) var(--space-5xl) var(--space-4xl); /* 56 / 56 / 48 */
}

.hero__title {
  position: relative;
  z-index: 1;
  line-height: 1.12; /* Figma: 112% */
  color: var(--color-text-primary);
}


/* =========================================================
   レスポンシブ（〜767px）
   ========================================================= */
@media (max-width: 1023px) {
  .site-header__tagline {
    display: none; /* タグラインはPCワイドのみ */
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: var(--space-sm) var(--space-sm) 0; /* 8px */
  }

  .site-header__bar {
    height: 56px;
    padding-inline: 20px 16px;
  }

  .site-header__nav,
  .site-header__contact {
    display: none; /* SPはハンバーガーメニューへ */
  }

  .site-header__burger {
    display: flex;
  }

  .site-footer__inner {
    padding: var(--space-3xl) var(--space-xl) var(--space-xl); /* 32 24 24 */
  }

  /* SPはCTAを縦積み・左寄せ（Figma SP Footer準拠） */
  .site-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg); /* 16 */
    margin-bottom: var(--space-3xl); /* 32 */
  }

  .site-footer__cta-title {
    font-size: var(--text-display-m); /* 44 */
  }

  .site-footer__divider {
    margin: var(--space-3xl) 0 var(--space-xl);
  }

  .site-footer__cols {
    flex-direction: column;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
  }

  .site-footer__links {
    flex-wrap: wrap;
    gap: var(--space-xl) 40px;
  }

  .site-footer__col {
    min-width: 40%;
  }

  .site-footer__copy {
    font-size: 10px;
  }

  /* ---- TableRow SP（縦積み 61:639） ---- */
  .table-row {
    flex-direction: column;
    gap: var(--space-xs); /* 4 */
    padding-block: 14px;
  }

  .table-row__key {
    flex: none;
    padding-block: 0;
    font-size: var(--text-label-s); /* 12 */
  }

  .table-row__value {
    padding-block: 0;
    font-size: var(--text-body-s); /* 12 */
  }

  /* ---- CaseCard SP（61:642） ---- */
  .case-card {
    gap: var(--space-md); /* 12 */
    padding: var(--space-md) var(--space-md) var(--space-lg); /* 12 12 16 */
  }

  .case-card__image {
    aspect-ratio: 319 / 180;
    border-radius: var(--radius-md); /* 7 */
  }

  .case-card__meta {
    gap: var(--space-sm); /* 8 */
    padding-inline: var(--space-xs); /* 4 */
  }

  .case-card__title {
    font-size: var(--text-label-s); /* 12 */
  }

  /* ---- ヒーローSP（Figma: HeroWrap h300 / HeroMain padding 48,16,56,16） ---- */
  .hero {
    min-height: 300px;
    padding: var(--space-sm) var(--space-sm) 0; /* 8 / 8 / 0 */
  }

  .hero__inner {
    max-width: none;
    min-height: 0;
    padding: var(--space-4xl) var(--space-lg) var(--space-5xl); /* 48 / 16 / 56 */
  }

  .hero__title {
    font-size: var(--text-display-s); /* 36（Figma: SP_01_TOP） */
    line-height: 1.25; /* Figma: 125% */
  }

}