@charset "UTF-8";
/* =========================================================
   Wealthflow Home V1 — common.css
   PC基準 1440（1rem = 10px @1440 / 1024以上は等比・上限キャップなし）
   SP（〜1023）: 1rem = min(100vw/37.5, 10px)
   ========================================================= */

:root {
  /* color（Figma実fill） */
  --color-page: #f5f7f9;          /* Home V1 root / nav current / soft surfaces */
  --color-white: #ffffff;
  --color-text: #11141a;          /* heading / dark */
  --color-body: #404f63;          /* paragraph */
  --color-primary: #ff193b;       /* Primary Button */
  --color-navy: #0a215d;          /* hero base / newsletter card */
  --color-cta-navy: #001962;      /* account opening CTA base */
  --color-blue: #1946bb;          /* tag text / brix logo bg */
  --color-stats: #1845ba;         /* stats card */
  --color-tag-bg: #eaf4fe;        /* tag bg / stats label */
  --color-inactive: #b4c1cf;      /* business list inactive */
  --color-label: #8298ae;         /* Customer stories label */
  --color-border: #dbe1e8;        /* dividers / footer links */
  --color-footer: #11141a;        /* footer bg */
  --color-footer-line: rgba(159, 216, 244, 0.1);

  /* shadow: BS Cards */
  --shadow-card: 0 0.1345rem 0.1345rem rgba(165, 165, 165, 0.06), 0 0.5381rem 0.5381rem rgba(236, 236, 236, 0.06);

  /* typography */
  --font-base: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --ls-base: -0.03em;             /* Figma 全テキスト -3% */
  --fs-display: 6rem;             /* Display/9 hero */
  --fs-stat: 10rem;               /* 99% */
  --fs-h2: 4.8rem;                /* Display/8 section heading */
  --fs-h-lg: 3.6rem;              /* Display/7 quote / biz label */
  --fs-h-md: 3rem;                /* Display/6 card title */
  --fs-h-sm: 2.4rem;              /* Display/5 */
  --fs-h-xs: 2rem;                /* Display/4 */
  --fs-label: 2.4rem;             /* card labels (400) */
  --fs-logo: 2.6rem;
  --fs-body: 1.6rem;
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.5;

  /* layout */
  --w-wide: 138rem;               /* 1380 rounded panels */
  --w-inner: 114.6rem;            /* 1146 content */
  --space-page: 3rem;             /* 30 page gutter */
  --space-section: 14rem;         /* 140 between sections */
  --radius-panel: 4.8rem;
  --radius-card: 3.2rem;
  --radius-pill: 20rem;
}

html {
  font-size: calc(100vw / 144);
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 1023px) {
  html { font-size: min(calc(100vw / 37.5), 10px); }
  :root {
    --space-page: 1.2rem;
    --space-section: 8rem;
    --radius-panel: 3.2rem;
    --radius-card: 2.4rem;
    --fs-display: 4rem;
    --fs-stat: 7.2rem;
    --fs-h2: 3.2rem;
    --fs-h-lg: 2.4rem;
    --fs-h-md: 2.4rem;
    --fs-h-sm: 2rem;
    --fs-label: 2rem;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; letter-spacing: var(--ls-base); } /* -3% を各要素の font-size 基準で算出（継承だと親pxで固定される） */
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address, em, i, cite { font-style: normal; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; line-height: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

body {
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page {
  width: 100%;
  overflow-x: clip;
}

/* ---------- section heading ---------- */
.c-heading {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-text);
}

/* ---------- buttons (Primary / Secondary) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 1.2rem 3.2rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-white);
  white-space: nowrap;
  text-align: center;
  transition: opacity .2s;
}
.btn > span { display: block; padding-bottom: 0.2rem; }
.btn:hover { opacity: .88; }
.btn--primary { background: var(--color-primary); }
.btn--secondary {
  border: 1px solid var(--color-white);
  padding: calc(1.2rem - 1px) calc(3.2rem - 1px);
}

/* ---------- round icon button (62 / p24) ---------- */
.c-round-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-page);
  flex-shrink: 0;
}
.c-round-btn img { width: 1.4rem; height: 1.4rem; }
.c-round-btn--white { background: var(--color-white); box-shadow: var(--shadow-card); }

/* ---------- tag / date ---------- */
.c-tag {
  display: inline-flex;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-tag-bg);
  color: var(--color-blue);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.c-tag > span { display: block; padding-bottom: 0.2rem; }
.c-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.c-date img { width: 1.6rem; height: 1.6rem; }
.c-date time { display: block; padding-bottom: 0.2rem; }

/* ---------- divider (Figma: height 0 / stroke 1px) ---------- */
.c-divider {
  position: relative;
  height: 0;
  width: 100%;
}
.c-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -0.5px;
  height: 1px;
  background: var(--color-border);
}

/* =========================================================
   Header（Hero 内インスタンス 15779:6617）
   ========================================================= */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 1.6rem 0;
}
.header__inner {
  width: 114.7rem;
  margin-left: 14.65rem;       /* (1440-1147)/2 - hero x30 + 30 = 146.5 (hero local) */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.6501rem;
  color: var(--color-white);
}
.header__logo-icon { width: 2.6573rem; height: 2.6573rem; }
.header__logo-text {
  font-size: var(--fs-logo);
  font-weight: 600;
  line-height: var(--lh-heading);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.header__menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
}
.gnav__list {
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.gnav__link {
  display: flex;
  padding: 1.2rem 1.6rem;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.gnav__link > span { display: block; padding-bottom: 0.2rem; }
.gnav__link.is-current { background: var(--color-page); padding-inline: 2.4rem; }
.gnav__link:not(.is-current):hover { color: var(--color-body); }
.header__toggle { display: none; }

@media (max-width: 1023px) {
  .header { padding: 1.6rem 0; }
  .header__inner {
    width: auto;
    margin: 0 1.6rem 0 2rem;
    position: relative;
  }
  .header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    position: relative;
    z-index: 2;
  }
  .header__toggle span {
    display: block;
    width: 1.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform .25s, opacity .25s;
  }
  .header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }
  .header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }
  .header__menu {
    position: absolute;
    top: calc(100% + 1.2rem);
    right: 0;
    width: min(28rem, calc(100vw - 5.6rem));
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: 2.4rem;
    box-shadow: 0 0.8rem 2.4rem rgba(10, 33, 93, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.8rem);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .header__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .gnav__list { flex-direction: column; align-items: stretch; border-radius: 0; overflow: visible; }
  .gnav__link, .gnav__link.is-current { padding: 1.2rem 1.6rem; }
  .header__menu .btn { width: 100%; }
}

/* =========================================================
   Footer（15519:375 → 15510:391）
   ========================================================= */
.footer {
  margin: 3.2rem var(--space-page) 0;
  padding-bottom: 3rem;
}
.footer__inner {
  height: 71.7rem;
  padding: 8.2rem 0 0 11.65rem;
  border-radius: var(--radius-panel);
  background: var(--color-footer);
  color: var(--color-white);
  overflow: hidden;
  display: flex;               /* 高さ0の区切り線でマージンが相殺されないよう flex 化 */
  flex-direction: column;
  align-items: flex-start;
}
.footer__top {
  width: 114.45rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__brand {
  width: 11.6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.footer__logo img { width: 6.3rem; height: 6.3rem; }
.footer__sns { display: flex; align-items: center; gap: 1.2rem; }
.footer__sns a, .footer__sns img { display: block; width: 2rem; height: 2rem; }
.footer__subscribe {
  width: 44.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.footer__subscribe-title {
  font-size: var(--fs-h-md);
  font-weight: 600;
  line-height: var(--lh-heading);
}
.footer__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8rem;
  padding: 0.8rem 0.8rem 0.8rem 2.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
}
.footer__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  padding: 0;
}
.footer__input::placeholder,
.newsletter-card__input::placeholder { color: var(--color-body); opacity: 1; }
.footer__line {
  position: relative;
  width: 114.6rem;
  height: 0;
  margin-top: 7rem;
}
.footer__line::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -0.5px;
  height: 1px;
  background: var(--color-footer-line);
}
.footer__line--2 { margin-top: 5.9rem; }
.footer__links {
  width: 114.6rem;
  margin-top: 7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__group--main { width: 56.9rem; }
.footer__group--sub { width: 13.7rem; }
.footer__group-title {
  font-size: var(--fs-h-xs);
  font-weight: 600;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.footer__cols { display: flex; align-items: flex-start; gap: 4rem; }
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: 2.4rem;
}
.footer__cols > .footer__col:nth-child(1) { width: 10.4rem; }
.footer__cols > .footer__col:nth-child(2) { width: 7.9rem; }
.footer__cols > .footer__col:nth-child(3) { width: 14.4rem; }
.footer__cols > .footer__col:nth-child(4) { width: 12.2rem; }
.footer__col a {
  display: block;
  padding-bottom: 0.2rem;
  color: var(--color-border);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  white-space: nowrap;
  transition: color .2s;
}
.footer__col a:hover { color: var(--color-white); }
.footer__col a.is-strong { color: var(--color-white); font-weight: 600; }
.footer__bottom {
  width: 114.4rem;
  margin-top: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  color: var(--color-border);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
}
.footer__copy .is-white { color: var(--color-white); }
.footer__brix {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
  white-space: nowrap;
}
.footer__brix img { width: 2.8rem; height: 2.8rem; }
.footer__brix span { display: block; padding-bottom: 0.2rem; }

@media (max-width: 1023px) {
  .footer { margin-top: 2.4rem; padding-bottom: var(--space-page); }
  .footer__inner { height: auto; padding: 4.8rem 2rem 3.2rem; align-items: stretch; }
  .footer__top { width: 100%; flex-direction: column; gap: 4rem; }
  .footer__subscribe { width: 100%; }
  .footer__subscribe-title { font-size: 2.4rem; }
  .footer__line, .footer__links, .footer__bottom { width: 100%; }
  .footer__line { margin-top: 4rem; }
  .footer__line--2 { margin-top: 4rem; }
  .footer__links {
    margin-top: 4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
  }
  .footer__group--main, .footer__group--sub { width: 100%; }
  .footer__cols > .footer__col:nth-child(n) { width: auto; }
  .footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
  .footer__col a { white-space: normal; }
  .footer__bottom {
    margin-top: 2.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
}

/* =========================================================
   PC（1024〜）: auto-width 部品の Figma 実寸を min-width で担保
   Figma は Hug 幅を整数へ切上げ、Chrome の Figtree は約1px細いため
   テキスト幅だけで決まる枠が 1〜1.5px 狭くなる → Figma metadata の幅を下限に。
   ========================================================= */
@media (min-width: 1024px) {
  /* gnav（I15779:6617;15575:39637/39639/39641/39645） */
  .gnav__list > li:nth-child(1) .gnav__link { min-width: 9.1rem; }
  .gnav__list > li:nth-child(2) .gnav__link { min-width: 7.5rem; }
  .gnav__list > li:nth-child(3) .gnav__link { min-width: 7.3rem; }
  .gnav__list > li:nth-child(4) .gnav__link { min-width: 8.8rem; }
  /* Primary「Open account」162 / Secondary「Contact sales」158 / Subscribe 133 */
  .btn--primary { min-width: 16.2rem; }
  .btn--secondary { min-width: 15.8rem; }
  .btn--primary.footer__submit { min-width: 13.3rem; }
  /* footer（15518:10918） */
  .footer__brix { min-width: 21rem; }
  /* Figma 30px/1.25 テキストのノード高＝38px/行 */
  .footer__subscribe-title { line-height: 3.8rem; }
}