/* ACORNS: shared type roles for the corporate homepage. */
:root {
  --acorns-label: clamp(1.375rem, 2.4vw, 1.75rem);
  --acorns-headline: clamp(1.375rem, 2.2vw, 1.625rem);
  --acorns-body: 1rem;
  --acorns-meta: .875rem;
  --acorns-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --acorns-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
html body main :is(.news-heading h2, .manifesto-title > p, .chapter small,
  .display-title, .store-gateway-label > p, .company-title .lead,
  .contact > .eyebrow, .social-heading h2) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .065em;
  text-transform: uppercase;
}
html body main :is(.manifesto-title h2, .creation-head .vertical-title,
  .business-head h2, .brand-showcase-intro h2, .store-gateway-content h2,
  .company-title h2, .contact h2) {
  font-family: var(--acorns-serif);
  font-size: var(--acorns-headline);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .035em;
  text-wrap: pretty;
}
html body main :is(.manifesto-copy > p, .creation-body > p,
  .business-head > .business-overview, .store-gateway-content > p,
  .company-gateway-copy > p, .brand-showcase-intro > p,
  .brand-profile-info > p:not(.brand-profile-kicker), .contact > p:not(.eyebrow)) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .015em;
  text-wrap: pretty;
}
html body main #business .business-head > .business-overview,
html body main #business .business-item .item-copy > p {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .015em;
}
html body main .creation-head h2 {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .015em;
}
html body main :is(.creation-head .lead, .business-head > .lead,
  .brand-profile-kicker, .brand-profile-info dt, .news-date,
  .news-category, .news-filters button, .news-all) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-meta);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .025em;
}
html body main .creation-head .lead { letter-spacing: .06em; }
html body main .news-row h3 {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .015em;
}
html body main .brand-profile-info h3 {
  font-family: var(--acorns-sans);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .025em;
}
html body main #business .business-item .item-copy > small {
  font-family: var(--acorns-sans);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .035em;
}
html body main #business .business-item .item-copy > h3 {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.7;
}
html body main :is(.manifesto-copy, .creation-body) > p + p { margin-top: 1.5rem; }
html body main .manifesto-copy > .lead { margin: 0 0 1.5rem; }
html body main .manifesto-title h2 { margin-bottom: 0; }
html body main .creation-head .vertical-title { margin: 0 0 1.5rem; }
html body main .creation-head .lead { margin: 0 0 .75rem; }
html body main :is(#roots, #create, #business, #brands, #store, #news) {
  scroll-margin-top: 1rem;
}
/* An opaque reading area behind the fixed logo fades at its lower edge. */
html body .header::before {
  inset: 0 0 -36px;
  background: linear-gradient(to bottom, #fff 0, #fff 70%, rgba(255,255,255,.94) 79%, rgba(255,255,255,.45) 91%, transparent 100%);
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}
html body .header.scrolled::before { opacity: 1; }
html body .header.menu-active::before { opacity: 0; }
@media (max-width: 700px) {
  html body main :is(.manifesto.section, .creation.section) {
    padding-block: 64px;
    row-gap: 28px;
  }
  html body main .manifesto-title > p { margin-bottom: 24px; }
  html body main .creation > .chapter { margin: 0; }
  html body main :is(.manifesto-copy > p, .creation-body > p) {
    line-height: 1.9;
    letter-spacing: 0;
  }
  html body main .creation-head .phrase { display: inline; white-space: normal; }
}
/* The same roles apply to company, contact, news and policy documents. */
html body main :is(.page-kicker, .detail-label > small,
  .news-article-kicker, .policy-heading > h1) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .065em;
  text-transform: uppercase;
}
html body main :is(.company-page-hero > h1, .company-section-copy > h2,
  .contact-page-content > h1, .news-article-header > h1) {
  font-family: var(--acorns-serif);
  font-size: var(--acorns-headline);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .035em;
  text-wrap: pretty;
}
html body main :is(.policy-intro, .policy-body, .news-article-body,
  .company-section-copy, .contact-response-note, .company-page-hero) p,
html body main :is(.policy-body li, .policy-body dd, .company-page .profile dd,
  .company-page .business-outline .outline-grid p) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .015em;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
html body main .company-page-hero > .page-kicker {
  font-size: var(--acorns-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .065em;
}
html body main :is(.policy-body h2, .company-index b,
  .company-page .business-outline .outline-grid h3) {
  font-family: var(--acorns-sans);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .015em;
}
html body main :is(.policy-heading > p, .policy-intro .policy-review-note,
  .news-article-meta, .news-article-image figcaption, .company-index small,
  .profile dt, .company-section-copy > .lead, .contact-form .field-label,
  .contact-form .field-note, .contact-form .required-label) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-meta);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .025em;
}
html body main .contact-form :is(input, select, textarea) {
  font-family: var(--acorns-sans);
  font-size: var(--acorns-body);
  line-height: 1.6;
}
html body main .policy-heading > h1 { margin: 0 0 20px; }
html body main .policy-heading > p { margin-top: 0; }
html body main .policy-body .policy-section { margin-bottom: 36px; }
@media (max-width: 700px) {
  html body main :is(.policy-intro, .policy-body, .news-article-body,
    .company-section-copy, .contact-response-note, .company-page-hero) p,
  html body main :is(.policy-body li, .policy-body dd, .company-page .profile dd,
    .company-page .business-outline .outline-grid p) {
    line-height: 1.9;
    letter-spacing: 0;
  }
  html body main .company-page-hero > .page-kicker { line-height: 1.4; letter-spacing: .065em; }
  html body main .policy-intro .policy-review-note { font-size: var(--acorns-meta); }
}
html body[data-page="news"] main .news-article-header h1 {
  font-family: var(--acorns-serif);
  font-size: var(--acorns-headline);
  line-height: 1.8;
}

/* Anchor destinations retain focus without framing the entire content area. */
html body main[id][tabindex="-1"]:focus,
html body main :is(section, article)[id][tabindex="-1"]:focus {
  outline: none;
}
html body .brand-profile.navigation-target .brand-profile-info h3 {
  text-decoration: none;
}