:root { --paper:#f7f4ec; --ink:#29423d; --ink-soft:#52645e; --sage:#a9bba6; --line:rgba(41,66,61,.22); --serif:"DM Serif Display", Georgia, serif; --sans:"Noto Sans JP", "Hiragino Sans", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:400; line-height:2; letter-spacing:.03em; } body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); z-index:2; } a { color:inherit; text-decoration:none; } .container { width:min(1120px, calc(100% - 64px)); margin:auto; } .site-header { display:flex; justify-content:space-between; align-items:center; padding:28px 0; font-size:12px; position:relative; z-index:3; } .brand { font-family:var(--serif); font-size:23px; letter-spacing:.02em; } .header-contact { border-bottom:1px solid var(--sage); padding-bottom:2px; }
.hero { min-height:660px; padding:115px 0 66px; position:relative; } .eyebrow,.section-label { font-family:var(--serif); font-size:15px; color:var(--ink-soft); letter-spacing:.04em; margin:0; } .eyebrow::after { content:""; display:inline-block; width:42px; height:1px; margin:0 0 5px 14px; background:var(--sage); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(35px, 5vw, 63px); font-weight:500; letter-spacing:.06em; line-height:1.55; margin:48px 0 54px; max-width:1050px; } .hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:32px; } .intro { color:var(--ink-soft); margin:0; } .arrow-link { border-bottom:1px solid var(--ink); padding-bottom:5px; white-space:nowrap; } .arrow-link span,.email span { margin-left:12px; color:var(--sage); font-size:20px; } .hero-mark { display:flex; gap:5px; position:absolute; right:5%; bottom:85px; align-items:end; } .hero-mark span { display:block; width:4px; background:var(--sage); } .hero-mark span:nth-child(1){height:13px}.hero-mark span:nth-child(2){height:27px}.hero-mark span:nth-child(3){height:40px}
.section { padding:148px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:180px 1fr; gap:32px; } .section-content { grid-column:2; } h2 { font-family:var(--serif); font-size:clamp(34px,4vw,52px); font-weight:400; letter-spacing:.04em; line-height:1.4; margin-bottom:54px; } .about-layout { display:grid; grid-template-columns:minmax(250px,.85fr) minmax(300px,1fr); gap:85px; } .about-layout h2 { margin:0; } .about-layout p { color:var(--ink-soft); margin-bottom:22px; } .signature { margin-top:42px!important; color:var(--ink)!important; font-size:17px; } .signature span { margin-left:14px; color:var(--ink-soft); font-family:var(--serif); font-size:16px; }
.service { background:#e5e9de; border:0; display:block; } .service .container { display:grid; grid-template-columns:180px 1fr; gap:32px; } .lead { max-width:610px; color:var(--ink-soft); margin-bottom:66px; } .service-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); } .service-grid article { min-height:250px; padding:26px 28px 25px 0; border-bottom:1px solid var(--line); } .service-grid article:nth-child(odd) { border-right:1px solid var(--line); padding-right:36px; } .service-grid article:nth-child(even) { padding-left:36px; } .service-grid span,.strength-list>article>span { font-family:var(--serif); color:var(--ink-soft); font-size:14px; } h3 { font-size:20px; font-weight:500; letter-spacing:.05em; margin:19px 0 12px; } .service-grid p { font-size:14px; color:var(--ink-soft); line-height:1.9; } small { display:block; color:var(--ink-soft); line-height:1.75; font-size:11px; margin-top:20px; }
.strengths .section-content { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(350px,1fr); gap:85px; } .strengths h2 { margin:0; } .strength-list { border-top:1px solid var(--line); } .strength-list article { display:grid; grid-template-columns:50px 1fr; gap:16px; padding:25px 0; border-bottom:1px solid var(--line); } .strength-list h3 { margin:0 0 8px; font-size:18px; } .strength-list p { color:var(--ink-soft); font-size:14px; line-height:1.9; margin:0; }
.experience { background:var(--ink); color:var(--paper); padding:117px 0 110px; } .experience .section-label { color:#c5d1be; } .experience-inner { display:grid; grid-template-columns:180px 1fr; gap:32px; } .experience-stats { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } .experience-stats p { margin:0; display:flex; flex-direction:column; border-top:1px solid rgba(247,244,236,.4); padding-top:18px; } .experience-stats strong { font-family:var(--serif); font-weight:400; letter-spacing:.03em; font-size:clamp(29px,3.2vw,44px); margin-bottom:13px; } .experience-stats span,.experience-note { color:#d7ddd1; font-size:13px; line-height:1.8; } .experience-note { grid-column:2; max-width:650px; margin:38px 0 0; }
.contact { background:#d7e0d0; padding:145px 0; } .contact-inner { padding-left:212px; position:relative; } .contact .section-label { position:absolute; left:0; top:5px; } .contact h2 { margin-bottom:30px; } .contact p { color:var(--ink-soft); margin-bottom:40px; } .email { display:inline-block; font-family:var(--serif); font-size:clamp(19px,2.3vw,27px); border-bottom:1px solid var(--ink); padding-bottom:8px; letter-spacing:.03em; }.footer { display:flex; justify-content:space-between; padding:25px 0 29px; color:var(--ink-soft); font-size:11px; }
@media (max-width:720px) { body { font-size:14px; line-height:1.9; } .container { width:min(100% - 40px, 1120px); }.site-header { padding:21px 0; }.brand{font-size:20px}.hero { min-height:610px; padding:91px 0 50px; } h1 { font-size:34px; line-height:1.55; margin:36px 0 38px; } .hero-bottom { align-items:start; flex-direction:column; gap:27px; } .hero-mark{right:0;bottom:50px}.section,.service .container,.experience-inner { display:block; padding:83px 0; }.section-label { margin-bottom:34px; }.section-content { display:block; }.about-layout,.strengths .section-content { display:block; }.about-layout h2,.strengths h2 { margin-bottom:38px; } h2 { font-size:34px; margin-bottom:34px; }.lead{margin-bottom:45px}.service-grid { display:block; }.service-grid article,.service-grid article:nth-child(n) { min-height:0; padding:24px 0; border-right:0; }.service-grid article:last-child{border-bottom:0}.strength-list article { grid-template-columns:35px 1fr; gap:12px; }.experience { padding:83px 0; }.experience-stats { display:block; }.experience-stats p { margin-bottom:26px; }.experience-note { margin-top:28px; }.contact { padding:84px 0; }.contact-inner { padding:0; }.contact .section-label { position:static; }.footer{font-size:10px;}.email{font-size:18px;word-break:break-all;} }