@import "tailwindcss";

@theme {
  --font-sans: "YuGothic", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  --font-inter: "Inter", sans-serif;
  --color-beige: #f5f2ec;
  --color-brown: #807970;
  --color-brown-light: #adaca9;
  --color-green: #5a7069;
  --color-text: #404040;
  --color-text-light: #525252;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply text-text leading-[1.8] bg-white antialiased;
  }
}

@layer components {
  /* Section number label */
  .section-label {
    @apply font-inter font-bold text-base leading-[2.2] text-brown;
  }

  .section-title {
    @apply font-bold text-[26px] lg:text-3xl xl:text-4xl leading-[1.6] text-black;
  }

  .section-body {
    @apply text-sm md:text-base leading-loose md:leading-[2.2] text-text;
  }

  /* Step badge */
  .step-badge {
    @apply font-inter font-bold text-base leading-[2.2] text-white bg-green rounded-full px-5 py-0 whitespace-nowrap;
  }

  /* Check icon inline */
  .check-item {
    @apply flex items-start gap-2.5 font-bold leading-[1.8];
  }

  .check-item img {
    @apply w-4 h-3 mt-2 shrink-0;
  }

  /* CTA button bar */
  .cta-bar {
    @apply flex items-center justify-between gap-5 px-7.5 py-4.5 bg-black;
  }

  .cta-title {
    @apply text-base md:text-xl text-white font-bold;
  }

  .cta-title small {
    @apply text-sm;
  }

  .cta-arrow {
    @apply shrink-0 flex items-center gap-3.75;
  }

  .cta-arrow .border-line {
    @apply shrink-0 w-0.5 h-4 bg-[#7d7d7d];
  }

  .cta-arrow img {
    @apply size-7;
  }
}

@layer utilities {
  .font-inter {
    font-optical-sizing: auto;
    font-style: normal;
  }

  .my-trim {
    margin-block: calc((1em - 1lh) / 2);
  }
}