:root { --color-canvas:#F4F1E9; --color-ink:#18231F; --color-navy:#24343B; --color-forest:#435A4B; --color-warm-surface:#E8E0D3; --color-signal:#A65332; --color-white:#FCFBF8; --content-max:1200px; --reading-max:720px; --radius-small:6px; --radius-medium:14px; --motion-fast:160ms; --motion-base:260ms; --motion-emphasis:520ms; --ease-enter:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--color-ink); background:var(--color-canvas); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; font-size:18px; line-height:1.9; letter-spacing:.04em; }
img { display:block; max-width:100%; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:500; line-height:1.45; letter-spacing:.08em; }
h1 { font-size:clamp(2.25rem,4.25vw,4.8rem); }
h2 { font-size:clamp(1.8rem,3vw,3.15rem); }
h3 { font-size:1.4rem; }
p + p { margin-top:1.25rem; }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:8px 14px; background:var(--color-white); transform:translateY(-150%); transition:transform var(--motion-fast); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:2; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; max-width:1440px; margin:auto; padding:28px clamp(24px,5vw,72px); }
.site-name { font-size:.92rem; font-weight:700; text-decoration:none; }
.header-cta { font-size:.84rem; font-weight:700; text-underline-offset:5px; }
.hero { min-height:92svh; display:grid; grid-template-columns:minmax(400px,44%) 1fr; align-items:stretch; background:var(--color-white); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:130px clamp(32px,7vw,120px) 72px; }
.eyebrow,.section-mark { color:var(--color-signal); font-size:1rem; font-weight:700; letter-spacing:.15em; }
.hero h1 { margin-top:22px; }
.hero-body { max-width:38em; margin-top:36px; font-size:clamp(1rem,1.08vw,1.12rem); }
.hero-name { margin-top:26px; font-size:1.06rem; font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:var(--radius-small); font:inherit; font-size:.94rem; font-weight:700; line-height:1.4; letter-spacing:.06em; text-decoration:none; cursor:pointer; transition:background var(--motion-base),color var(--motion-base),transform var(--motion-fast),border-color var(--motion-base); }
.button-primary { width:min(100%,340px); margin-top:26px; color:var(--color-white); background:var(--color-signal); }
.button:hover { transform:translateY(-2px); }
.button-primary:hover { background:#844024; }
.support-copy { max-width:28em; margin-top:16px; font-size:.76rem; line-height:1.7; }
.hero-visual { min-height:92svh; margin:0; overflow:hidden; background:var(--color-warm-surface); }
.hero-visual img { width:100%; height:100%; object-fit:cover; object-position:48% 34%; opacity:.96; animation:hero-photo var(--motion-emphasis) var(--ease-enter) forwards; }
@keyframes hero-photo { to { opacity:1; } }
.section { max-width:var(--content-max); margin:auto; padding:clamp(88px,12vw,176px) clamp(24px,5vw,72px); }
.reading-column { width:min(100%,var(--reading-max)); }
.reading-column h2,.section-heading h2,.process-intro h2,.experience h2,.profile h2,.consultation h2 { margin-top:16px; }
.letter { padding-left:clamp(24px,15vw,240px); }
.letter-body { margin-top:50px; font-size:1.05rem; }
.situations { border-top:1px solid rgba(24,35,31,.26); }
.section-heading { max-width:760px; }
.section-heading > p:last-child { margin-top:30px; }
.situation-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,8vw,130px); margin:56px 0 0; padding:0; list-style:none; }
.situation-list li { display:grid; grid-template-columns:58px 1fr; gap:16px; padding:28px 0 36px; border-top:1px solid rgba(24,35,31,.32); }
.situation-list-five li:nth-child(1) { grid-area:1/1; }
.situation-list-five li:nth-child(2) { grid-area:2/1; }
.situation-list-five li:nth-child(3) { grid-area:3/1; }
.situation-list-five li:nth-child(4) { grid-area:1/2; }
.situation-list-five li:nth-child(5) { grid-area:2/2; }
.situation-list-four li:nth-child(1) { grid-area:1/1; }
.situation-list-four li:nth-child(2) { grid-area:2/1; }
.situation-list-four li:nth-child(3) { grid-area:1/2; }
.situation-list-four li:nth-child(4) { grid-area:2/2; }
.situation-list span,.process-steps li>span { color:var(--color-signal); font-family:Georgia,serif; font-size:1.45rem; }
.situation-list p,.process-steps p,.capability-list p { margin-top:10px; font-size:1rem; line-height:1.85; }
.situations-image { width:min(100%,760px); margin:68px 0 0 auto; }.situations-image img { width:100%; aspect-ratio:3/2; object-fit:cover; }.situations-image figcaption { margin-top:12px; color:#53605b; font-size:.86rem; }
.section-closing { margin-top:28px; font-weight:700; }
.process { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(420px,1.2fr); gap:clamp(50px,10vw,150px); background:var(--color-warm-surface); max-width:none; padding-left:max(24px,calc((100% - var(--content-max))/2)); padding-right:max(24px,calc((100% - var(--content-max))/2)); }
.process-intro { max-width:32em; }
.process-intro h2 { margin-bottom:35px; }
.process-steps { position:relative; }
.process-steps ol { position:relative; display:grid; gap:34px; margin:0; padding:0; list-style:none; }
.process-steps li { display:grid; grid-template-columns:108px 1fr; gap:18px; min-height:100px; }
.process-line { position:absolute; top:10px; bottom:10px; left:60px; width:2px; height:calc(100% - 20px); overflow:visible; }
.process-line path { fill:none; stroke:var(--color-signal); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:540; stroke-dashoffset:540; }
.process-steps.is-visible .process-line path { animation:draw-line 1.2s var(--ease-enter) forwards; }
@keyframes draw-line { to { stroke-dashoffset:0; } }
.quiet-statement { background:var(--color-navy); color:var(--color-white); }
.quiet-statement .section-mark { color:#e6aa7f; }
.quiet-statement .reading-column>div { margin-top:42px; font-size:1.05rem; }
.emphasis { padding-left:18px; border-left:2px solid #d89062; font-weight:700; }
.experience { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(48px,10vw,150px); }
.experience-copy { max-width:740px; }
.experience-copy>p:not(.section-mark) { margin-top:24px; }
.experience ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 35px; margin:28px 0; padding:24px 0 24px 1.3em; border-block:1px solid rgba(24,35,31,.3); }
.facts { align-self:center; margin:0; border-top:1px solid var(--color-ink); }
.facts div { display:flex; justify-content:space-between; gap:18px; padding:20px 0; border-bottom:1px solid var(--color-ink); }
.facts dt { font-size:1rem; }.facts dd { margin:0; font-family:Georgia,serif; font-size:2rem; }
.capabilities { border-top:1px solid rgba(24,35,31,.3); }
.capability-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(25px,6vw,85px); margin-top:62px; }
.capability-list div { padding:27px 0 34px; border-top:1px solid rgba(24,35,31,.36); }
.capability-list div:nth-child(2),.capability-list div:nth-child(5) { transform:translateY(44px); }
.profile { display:grid; grid-template-columns:minmax(280px,.82fr) 1.18fr; gap:clamp(35px,8vw,110px); align-items:start; }
.profile figure { position:sticky; top:20px; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--color-warm-surface); }.profile figure img { width:100%; height:100%; object-fit:cover; object-position:52% center; }
.profile-copy>div:not(.profile-signature) { max-width:38em; margin-top:38px; }.profile-signature { margin-top:43px; padding-top:23px; border-top:1px solid rgba(24,35,31,.36); }.profile-signature p:first-child { font-weight:700; }.profile-signature p:nth-child(2) { margin-top:2px; font-size:.9rem; }.profile-signature small { display:block; margin-top:17px; line-height:1.85; }
.consultation { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,10vw,145px); background:var(--color-warm-surface); max-width:none; padding-left:max(24px,calc((100% - var(--content-max))/2)); padding-right:max(24px,calc((100% - var(--content-max))/2)); }.consultation-copy { max-width:35em; }.consultation-copy>p { margin-top:22px; }.consultation-copy h3 { margin-top:34px; font-size:1.12rem; }.consultation-copy ul { margin:14px 0 0; padding-left:1.3em; }.consultation-form { align-self:start; padding:clamp(32px,4vw,56px); background:var(--color-white); border-radius:var(--radius-medium); }.form-label { color:var(--color-forest); font-size:1.25rem; font-weight:700; }.form-redirect > p:not(:first-child) { margin-top:20px; }.form-redirect .button { margin-top:32px; }.form-note { color:#53605b; font-size:.86rem; }
.final-message { position:relative; overflow:hidden; padding:clamp(96px,14vw,190px) 24px; color:var(--color-white); background:var(--color-forest); }.final-message>div { position:relative; z-index:1; width:min(100%,var(--reading-max)); margin:auto; }.final-message h2 { margin-bottom:38px; }.final-message .final-name { margin-top:35px; font-weight:700; }.button-light { width:min(100%,340px); margin-top:27px; color:var(--color-forest); background:var(--color-white); }.button-light:hover { background:var(--color-canvas); }footer { display:flex; justify-content:space-between; gap:24px; padding:22px clamp(24px,5vw,72px); color:#e4ece7; background:var(--color-ink); font-size:.72rem; line-height:1.6; } footer p+p { margin:0; }
:focus-visible { outline:3px solid #d87047; outline-offset:3px; }
@media (max-width:1100px) { .situation-list { grid-template-columns:1fr; gap:0; margin-top:38px; }.situation-list-five li:nth-child(n),.situation-list-four li:nth-child(n) { grid-area:auto; } }
@media (max-width:800px) { .site-header { padding:20px 24px; }.header-cta { display:none; }.hero { grid-template-columns:1fr; }.hero-copy { order:2; padding:50px 24px 72px; }.hero-visual { order:1; min-height:52svh; margin-top:0; }.hero-visual img { object-position:50% 30%; }.hero h1 { font-size:clamp(2rem,9.5vw,3.1rem); }.hero-body { margin-top:27px; }.letter { padding-left:24px; }.process,.experience,.profile,.consultation { grid-template-columns:1fr; }.process { gap:55px; }.process-steps { max-width:620px; }.experience { gap:45px; }.facts { max-width:500px; }.capability-list { grid-template-columns:1fr 1fr; gap:0 28px; margin-top:38px; }.capability-list div:nth-child(2),.capability-list div:nth-child(5) { transform:none; }.profile figure { position:relative; top:auto; width:min(100%,500px); aspect-ratio:4/3; }.consultation-form { padding:28px 22px; } footer { display:block; } footer p+p { margin-top:8px; } }
@media (max-width:480px) { body { font-size:16px; }.section { padding:80px 24px; }.hero-visual { min-height:43svh; }.hero-copy { padding-top:39px; }.button,.button-primary,.button-light { width:100%; }.process-steps li { grid-template-columns:82px 1fr; }.process-line { left:53px; }.experience ul,.capability-list { grid-template-columns:1fr; }.consultation-copy ul { font-size:.98rem; }.profile-copy>div:not(.profile-signature) { margin-top:28px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.process-line path { stroke-dashoffset:0; } }