@charset "UTF-8";

:root {

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --font-en: "Inter", var(--font-jp);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-heading: 1.45;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  --c-text: #232323;
  --c-text-nav: #1f1f1f;
  --c-text-muted: #767676;
  --c-text-strong: #141414;
  --c-text-ink: #121212;
  --c-text-soft: #292929;
  --c-text-faint: #a7a7a7;
  --c-text-gray: #6b6b6b;
  --c-text-gray-light: #737373;
  --c-white: #fff;

  --c-green: #038e6b;
  --c-green-dark: #2f715f;
  --c-green-mid: #43b287;
  --c-green-accent: #048766;
  --c-green-step: #038c6a;
  --c-green-step-2: #038565;
  --c-green-alt: #048968;
  --c-green-band: #16a984;

  --c-orange: #ff683e;
  --c-orange-shadow: #a54521;
  --c-orange-line: #ef6c47;
  --c-line-bubble: #86e24f;

  --c-border: #e0e0e0;
  --c-hairline: #dcdddd;
  --c-divider: #d1d1d1;
  --c-rule: #c7c7c7;
  --c-rule-gray: #b8b8b8;
  --c-rule-gray-dark: #adadad;

  --bg-mint-25: #f8fffc;
  --bg-mint-50: #f0fffb;
  --bg-mint-100: #eef7f3;
  --bg-mint-150: #e6f2ee;
  --bg-mint-200: #e4f7ef;
  --bg-mint-250: #def1e9;
  --bg-mint-300: #d9f1e7;
  --bg-mint-350: #d8f9eb;
  --bg-gray-025: #fbfbfb;
  --bg-gray-050: #f5f5f5;
  --bg-gray-070: #f1f1f1;
  --bg-gray-075: #f0f0f0;
  --bg-gray-100: #f6f6f6;
  --bg-gray-200: #ececec;
  --bg-gray-300: #d9d9d9;
  --bg-line: #cedff7;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 20px;
  --r-pill: 999px;

  --shadow-card: 4px 4px 10px rgba(0, 0, 0, 0.16);
  --shadow-card-wide: 2px 2px 15px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.16);
  --shadow-float: 0 6px 14px rgba(0, 0, 0, 0.28);

  --container-max: 1200px;
  --gutter: 20px;

  --section-py-sm: 72px;
  --section-py-md: 80px;
  --section-py-lg: 88px;
  --section-py-xl: 96px;

  --u: 0.2564103vw;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --u: min(0.0694445vw, 1px);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
  }
}

@media (min-width: 1440px) {
  :root {

    --gutter: 0px;
  }
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

/* Button hover: keep layout transforms (such as FV centering) intact. */
:is(
  .header__cta,
  .header__drawer-cta,
  .fv__cta,
  .mid-cta__cta,
  .last-cta__cta,
  .column__cta,
  .faq__more,
  .wp-block-button__link
) {
  transform-origin: center;
  scale: 1;
  transition:
    scale 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .header__cta,
    .header__drawer-cta,
    .fv__cta,
    .mid-cta__cta,
    .last-cta__cta,
    .column__cta,
    .faq__more,
    .wp-block-button__link
  ):hover {
    scale: 1.02;
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }

  :is(
    .header__cta,
    .header__drawer-cta,
    .fv__cta,
    .mid-cta__cta,
    .last-cta__cta,
    .column__cta,
    .faq__more,
    .wp-block-button__link
  ) {
    transition: none;
  }
}

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

@media (max-width: 767px) {
  .u-pc-only {
    display: none;
  }
}

.u-picture {
  display: contents;
}

.u-source {
  display: none;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-scroll-locked {
  position: fixed;
  left: 0;
  top: calc(-1 * var(--scroll-y, 0px));
  width: 100%;
}