:root  {

--bg:#f5f4f1;

--ink:#171717;

--muted:#777873;

--line:#d8d8d2;

--omoi:#ebe9e4;

--kizuna:#dce9ed;

--max:1240px

}

*  {

box-sizing:border-box

}

html  {

scroll-behavior:smooth

}

body  {

margin:0;

background:var(--bg);

color:var(--ink);

font-family:Arial,"Noto Sans JP",sans-serif;

font-size:15px;

line-height:1.7

}

a  {

color:inherit

}

button,a  {

font:inherit

}

.site-header,footer  {

width:min(calc(100% - 80px),var(--max));

margin:auto

}

.site-header  {

height:86px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid var(--line)

}

.brand  {

font-size:16px;

font-weight:700;

letter-spacing:-.03em;

text-decoration:none

}

.brand span  {

display:inline-grid;

width:22px;

height:22px;

margin-right:8px;

place-items:center;

border:1px solid var(--ink);

font-size:11px;

line-height:1

}

.site-header nav  {

display:flex;

gap:34px

}

.site-header nav a,footer a  {

font-size:12px;

color:var(--muted);

text-decoration:none

}

.site-header nav a:hover,footer a:hover  {

color:var(--ink)

}

sup  {

font-size:10px

}

.home-hero  {

width:min(calc(100% - 80px),var(--max));

min-height:690px;

margin:auto;

display:grid;

grid-template-columns:minmax(0,1.6fr) minmax(240px,.6fr);

gap:40px;

align-items:end;

padding:100px 0 120px

}

.kicker,.section-label  {

font-size:10px;

letter-spacing:.16em;

color:var(--muted)

}

.hero-copy h1  {

font-size:clamp(92px,15vw,190px);

font-weight:500;

letter-spacing:-.11em;

line-height:.86;

margin:28px 0 42px

}

.hero-copy h1 i  {

font-family:Georgia,serif;

font-weight:400;

letter-spacing:-.1em

}

.hero-summary  {

font-size:19px;

line-height:1.9;

margin:0

}

.hero-note  {

border-left:1px solid var(--ink);

padding:4px 0 4px 24px;

margin-bottom:12px

}

.hero-note span,.hero-note small  {

font-size:10px;

letter-spacing:.16em

}

.hero-note p  {

margin:34px 0 40px;

font-size:15px

}

.hero-note .rule  {

display:block;

width:100%;

border-top:1px solid var(--line);

margin-bottom:14px

}

.section  {

width:min(calc(100% - 80px),var(--max));

margin:0 auto;

padding:110px 0;

border-top:1px solid var(--line);

display:grid;

grid-template-columns:240px 1fr;

gap:80px

}

.section-label span  {

color:#b1b1ad;

padding:0 6px

}

.manifesto-content  {

max-width:760px

}

.manifesto h2  {

font-size:clamp(36px,5vw,64px);

line-height:1.22;

letter-spacing:-.08em;

font-weight:500;

margin:0 0 42px

}

.manifesto-content p  {

max-width:540px;

margin:0;

color:var(--muted);

font-size:16px

}

.project-list  {

border-top:1px solid var(--ink)

}

.project-item  {

display:grid;

grid-template-columns:70px 1fr 28px;

gap:20px;

align-items:center;

padding:30px 0;

border-bottom:1px solid var(--line);

text-decoration:none;

transition:padding .25s ease

}

.project-item:hover  {

padding-left:14px;

padding-right:14px

}

.project-number  {

align-self:start;

padding-top:8px;

font-size:11px;

color:var(--muted)

}

.project-item h2  {

font-size:clamp(34px,5vw,62px);

font-weight:500;

letter-spacing:-.08em;

line-height:1;

margin:0 0 14px

}

.project-item p  {

max-width:510px;

margin:0;

color:var(--muted)

}

.project-arrow  {

font-size:24px;

font-weight:300

}

.principle-grid  {

display:grid;

grid-template-columns:repeat(3,1fr);

border-top:1px solid var(--ink)

}

.principle-grid>div  {

min-height:200px;

padding:22px 28px 20px 0;

border-bottom:1px solid var(--line)

}

.principle-grid span  {

font-size:10px;

color:var(--muted)

}

.principle-grid h3  {

margin:34px 0 4px;

font-size:20px;

font-weight:500

}

.principle-grid p  {

margin:0;

color:var(--muted);

font-size:13px

}

footer  {

min-height:105px;

display:flex;

align-items:center;

justify-content:space-between;

border-top:1px solid var(--line)

}


@media(max-width:760px)  {

.site-header,footer,.home-hero,.section  {

width:calc(100% - 36px)

}

.site-header  {

height:72px

}

.site-header nav  {

gap:14px

}

.site-header nav a:nth-child(2)  {

display:none

}

.home-hero  {

min-height:670px;

display:block;

padding:110px 0 80px

}

.hero-copy h1  {

font-size:86px;

margin:28px 0 36px

}

.hero-summary  {

font-size:16px

}

.hero-note  {

margin-top:90px;

margin-left:28px

}

.section  {

display:block;

padding:80px 0

}

.section-label  {

margin-bottom:48px

}

.manifesto h2  {

font-size:42px

}

.project-item  {

grid-template-columns:38px 1fr 22px;

gap:12px;

padding:25px 0

}

.project-item h2  {

font-size:43px

}

.project-item p  {

font-size:13px

}

.principle-grid  {

grid-template-columns:1fr

}

.principle-grid>div  {

min-height:0;

padding:24px 0

}

.principle-grid h3  {

margin-top:22px

}



}