@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root{
--ink:#222a2e;
--ink-soft:#505d64;
--teal:#438b91;
--teal-dark:#326f75;
--teal-pale:#e9f3f4;
--blue-pale:#f4f8fa;
--line:#dce7e9;
--muted:#526269;
--white:#fff;
--warm:#e0aa6a;
--shadow:0 14px 38px rgba(28,70,83,.075);
--max:1160px;
--gutter:clamp(22px,5.5vw,70px);
--radius:6px}

*{
box-sizing:border-box}
html{
font-size:100%;
scroll-behavior:smooth;
scroll-padding-top:90px}
body{
margin:0;
color:var(--ink);
font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
letter-spacing:.015em;
background:#fff;
font-size:var(--text-body);
line-height:var(--line-body)}
a{
color:inherit;
text-decoration:none}
button,input,select,textarea{
font:inherit}

:root {

 --text-body: 1rem;

 --text-lead: 1.125rem;

 --text-note: .875rem;

 --text-label: .75rem;

 --text-card: 1.25rem;

 --text-section: clamp(1.5rem, 1.1rem + 1vw, 2rem);

 --text-compact-heading: 1.5rem;

 --text-hero: clamp(2rem, 1.2rem + 2.2vw, 2.9375rem);

 --line-body: 1.8;

 --line-heading: 1.6;

 --body-copy: #344d69;

 --muted: #435c76;

 --space-section: 4rem;

 --space-related: 3rem;

 --space-card: 1.5rem;

 --space-grid: 1.25rem;

 --measure-copy: 40em;

}


@media(max-width:760px){
:root{
--gutter:22px;
--text-card:1.125rem;
--text-compact-heading:1.5rem;
--space-section:3rem;
--space-related:3rem}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
transition:none!important}
}