/* ============================================================
   KABUKI components.css
   ボタン・ヘッダー・SP メニュー・フッター・CTA 帯
   色・フォント値は必ず tokens.css の var() を参照する。
   ============================================================ */

/* ================================================
   c-btn（共通ボタン）
   ================================================ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-jp);
  border-radius: var(--radius-pill); /* Figma の各 CTA は高さの半分以上の角丸＝実質ピル形状 */
  text-align: center;
  white-space: nowrap;
}

.c-btn--cta {
  background-color: var(--color-red);
  color: var(--color-white);
}

/* ================================================
   c-site-header（ヘッダー / PC ナビゲーション）
   Figma: node 443:2033（Navigation, 1440x93）/ node 129:354（SP_navi, 393x56）
   ================================================ */
.c-site-header {
  /* 追跡型（スクロール追従）ヘッダー。SOTA希望 2026-07-29 */
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
}

.c-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px; /* SP: 実測値未取得のため 56px 高さから逆算した近似値 */
  /* ヘッダーは本文(l-container=1200)より広く、設計幅1440まで（左右40pxパディング＝内容約1360px）。
     確定版 node 443:2033/640:3274 実測でナビがほぼ全幅。SOTA指摘 2026-07-29。l-container の max-width:1200 を上書き。 */
  max-width: var(--design-width-pc);
}

@media (min-width: 768px) {
  .c-site-header__inner {
    padding-block: 24px; /* PC: Figma Navigation py-[24px] 実測 */
  }
}

.c-site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-logo); /* インライン SVG（currentColor）をロゴインク色に着色 */
}

.c-site-header__logo-icon {
  display: inline-flex;
  width: 130px; /* SP: 近似値。PC 実測 156x28 から一回り縮小 */
}

.c-site-header__logo-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .c-site-header__logo-icon {
    width: 156px; /* PC: Figma kabuki_logo 実測 156x28 */
  }
}

.c-site-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .c-site-header__nav {
    display: flex;
    align-items: center;
    gap: 100px; /* Figma: gnav-wrapper gap-[100px] 実測 */
  }
}

.c-site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 40px; /* Figma: gnav-list gap-[40px] 実測 */
}

.c-site-header__nav-link {
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-jp);
  color: var(--color-black);
  white-space: nowrap;
}

/* Figma に current 状態のバリアントはないため、太字化は判断による追加（報告参照） */
.c-site-header__nav-link[aria-current="page"] {
  font-weight: var(--fw-bold);
}

.c-site-header__cta {
  width: 180px;
  height: 45px;
  padding-inline: 10px;
}

.c-site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-black);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .c-site-header__toggle {
    display: none;
  }
}

.c-site-header__toggle-icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.c-site-header__toggle-icon svg {
  width: 100%;
  height: 100%;
}

/* ================================================
   c-sp-menu（SP ハンバーガー展開画面）
   Figma: node 132:766（KABUKI_Menu_SP, 393x852）
   トランジションは静止デザインに具体指定がないため、
   右からのスライド+フェードとして実装（判断。報告参照）
   ================================================ */
.c-sp-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-white);
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.c-sp-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

@media (min-width: 768px) {
  .c-sp-menu {
    display: none;
  }
}

.c-sp-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-block: 16px 40px;
}

.c-sp-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-gray); /* Figma: menu_sp-11 罫線 */
}

.c-sp-menu__logo {
  color: var(--color-logo); /* インライン SVG（currentColor）をロゴインク色に着色 */
}

.c-sp-menu__logo-icon {
  display: inline-flex;
  width: 130px;
}

.c-sp-menu__logo-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.c-sp-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-black);
}

.c-sp-menu__list {
  display: flex;
  flex-direction: column;
}

.c-sp-menu__item {
  border-bottom: 1px dashed var(--color-gray); /* Figma: menu_sp-02 等の点線区切り */
}

.c-sp-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.c-sp-menu__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--color-gray);
  border-radius: 5px;
  color: var(--color-black);
  background-color: var(--color-white);
}

.c-sp-menu__link-icon svg {
  width: 14px;
  height: 10px;
}

.c-sp-menu__legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block: 32px;
}

.c-sp-menu__legal a {
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

.c-sp-menu__cta {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 30px; /* Figma: Frame 653 gap-[30px] 実測 */
  height: 84px;
  padding: 16px 40px 17px;
}

.c-sp-menu__cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.c-sp-menu__cta-label {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
}

.c-sp-menu__cta-en {
  font-size: var(--fs-24);
}

.c-sp-menu__cta-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.c-sp-menu__cta-icon svg {
  width: 100%;
  height: 100%;
}

/* ================================================
   c-site-footer
   Figma: node 443:2057（Component 10, 1440x196）/
   SP: TOP SP 内 Widget/SP-ContactBlock（node 132:761）

   PC は 黒帯（ロゴ+会社名 / 法定リンク）→ 白帯（住所 / コピーライト）の2段。
   SP は 白帯（法定リンク）→ 黒帯（ロゴ+会社名+住所+コピーライト）の2段で、
   帯の内容自体が入れ替わるため、.c-site-footer__sp / .c-site-footer__pc の
   2系統のマークアップをメディアクエリで排他的に表示する
   （テンプレート側コメント参照）。
   ================================================ */
/* 確定版フッター(node 640:3329 Component 10)は上端に1pxの黒線が乗る
   （get_design_context: Vector7 が bottom-full に配置＝コンポーネント最上端の罫線。
   ピクセルサンプルで rgb(0,0,0) を確認。2026-07-29追加）。
   SP/PC いずれの内訳マークアップも .c-site-footer 直下に来るため、共通の外枠に付与する。 */
.c-site-footer {
  border-top: 1px solid var(--color-black);
}

.c-site-footer__pc {
  display: none;
}

@media (min-width: 768px) {
  .c-site-footer__sp {
    display: none;
  }

  .c-site-footer__pc {
    display: block;
  }
}

/* ---- 帯共通 ---- */
.c-site-footer__band--legal-sp {
  background-color: var(--color-footer-bg);
}

/* 確定版フッターは白系背景1帯（旧443:2057の黒帯デザインから変更。SOTA指摘 2026-07-29）。
   クラス名は据え置き（--dark-* は旧命名の名残だが実体は白系背景）。
   2026-07-29 再修正: get_design_context で bg-[#f9f9f9] と判明（純白ではない）。--color-footer-bg に変更。 */
.c-site-footer__band--dark-sp,
.c-site-footer__band--dark-pc {
  background-color: var(--color-footer-bg);
}

.c-site-footer__band--light-pc {
  background-color: var(--color-footer-bg);
}

/* ---- SP: 白帯（法定リンク） ---- */
.c-site-footer__band--legal-sp .l-container {
  padding-block: 24px;
}

.c-site-footer__band--legal-sp .c-site-footer__legal {
  color: var(--color-black);
  /* 2026-07-30修正: get_design_context確認済み SP（132:764/132:676）はtext-center
     （旧align-items未指定＝左寄せはPC値の流用）。SP QA指摘。 */
  align-items: center;
  text-align: center;
}

/* ---- SP: 黒帯（ロゴ・会社名・住所・コピーライト） ---- */
.c-site-footer__dark-sp-inner {
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（132:757配下要素）は全てtext-center
     （旧flex-start＝左寄せはPC値の流用）。SP QA指摘。 */
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-block: 32px;
}

.c-site-footer__band--dark-sp .c-site-footer__company {
  color: var(--color-black);
}

.c-site-footer__band--dark-sp .c-site-footer__address,
.c-site-footer__band--dark-sp .c-site-footer__copyright {
  /* 2026-07-30修正: get_design_context確認済み SP（132:701/132:685）はtext-black
     （旧--color-gray-textはPC値の流用）。SP QA指摘。 */
  color: var(--color-black);
}

.c-site-footer__band--dark-sp .c-site-footer__logo {
  color: var(--color-logo);
}

/* ---- PC: 黒帯（ロゴ+会社名 / 法定リンク） ---- */
.c-site-footer__dark-pc-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-block: 40px;
}

.c-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-site-footer__band--dark-pc .c-site-footer__company {
  color: var(--color-black);
}

.c-site-footer__band--dark-pc .c-site-footer__logo {
  color: var(--color-logo);
}

.c-site-footer__band--dark-pc .c-site-footer__legal {
  display: flex;
  flex-direction: row;
  gap: 40px;
  color: var(--color-black);
}

/* ---- PC: 白帯（住所 / コピーライト） ---- */
.c-site-footer__light-pc-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-block: 24px;
}

.c-site-footer__band--light-pc .c-site-footer__address,
.c-site-footer__band--light-pc .c-site-footer__copyright {
  color: var(--color-black);
}

/* ---- テキスト要素共通 ---- */
.c-site-footer__logo-icon {
  display: inline-flex;
  width: 140px;
}

.c-site-footer__logo-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.c-site-footer__company {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}

.c-site-footer__address {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
}

.c-site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-site-footer__legal a {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: inherit;
}

.c-site-footer__copyright {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
}

/* ================================================
   c-cta-contact（お問い合わせ CTA 帯・ページ下部共通）
   Figma: 内容としては node 513:4128（Frame 659）を実装。詳細はテンプレート冒頭コメント参照
   ================================================ */
.c-cta-contact {
  background-color: var(--color-white);
}

.c-cta-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* SP: 田中さんFB 2026-07-31、下部お問い合わせCTAを中央揃えに変更（PCはメディアクエリで center を明示指定済みのため非破壊） */
  gap: 24px;
  padding-block: 40px;
}

@media (min-width: 768px) {
  .c-cta-contact__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 50px; /* Figma: Frame 659 py-[50px] 実測 */
  }
}

.c-cta-contact__text {
  font-size: var(--fs-22); /* SP: 実測未取得のため近似値（報告参照） */
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .c-cta-contact__text {
    font-size: var(--fs-32); /* PC: Figma 32px-Bold 実測 */
  }
}

.c-btn.c-btn--cta.c-cta-contact__button {
  /* 田中さんFB 2026-07-31: お問い合わせCTAボタンをBold化。他の c-btn--cta（ヘッダー/SPメニューCTA）への
     波及を避けるため、このコンポーネント専用のセレクタに限定 */
  font-weight: var(--fw-bold);
}

.c-cta-contact__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 30px; /* Figma: Frame 653 gap-[30px] 実測 */
  height: 84px;
  padding: 16px 40px 17px;
}

.c-cta-contact__button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-cta-contact__button-label {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
}

.c-cta-contact__button-en {
  font-size: var(--fs-24);
}

.c-cta-contact__button-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.c-cta-contact__button-icon svg {
  width: 100%;
  height: 100%;
}