:root{
  --ink:#1F2A44; --paper:#F7F7F4; --green:#B08D4A; --muted:#6B6F7A; --text:#3A3F4C;
  --line:#D9DAD6; --line-dark:#36415C; --grey:#AEB3BE; --surface:#FFFFFF;
  --serif:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Noto Sans JP',"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
p{margin:0}
.container{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}

.eyebrow{display:block;font-size:12px;letter-spacing:.3em;color:var(--green)}
.eyebrow.light{color:var(--paper);opacity:.8}
.arrow{display:inline-block;margin-left:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 28px;border:1px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:.14em;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--green);border-color:var(--green)}
.btn-sm{min-height:40px;padding:0 22px;font-size:12px}
.btn-lg{min-height:56px;padding:0 36px}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--green)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}

/* placeholders (replace with real images) */
.placeholder{display:flex;align-items:flex-end;padding:20px;color:var(--muted);font-size:11px;letter-spacing:.2em;border-radius:4px}
.tone-a{background:#E9DDD0}.tone-b{background:#D5DDD6}.tone-c{background:#DAD6CC}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(247,247,244,.92);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;padding-bottom:24px}
.brand{display:flex;align-items:baseline;gap:14px}
.brand-ja{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.18em}
.brand-en{font-size:11px;letter-spacing:.22em;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:32px;font-size:13px;letter-spacing:.12em}
.nav a:not(.btn):hover{color:var(--green)}

/* hero */
.hero{display:flex;flex-wrap:wrap;gap:48px;padding-top:72px;padding-bottom:96px}
.hero-text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:32px}
.hero h1{font-size:56px;line-height:1.35;letter-spacing:.06em}
.lead{max-width:520px;font-size:15px;line-height:2.1;font-weight:300;color:var(--text)}
.hero-visual{flex:1 1 480px;min-width:0;min-height:520px;position:relative;display:flex}
.hero-image{flex:1;width:100%;min-height:520px;object-fit:cover;object-position:center 60%;border-radius:4px;display:block}
.hero-badge{position:absolute;left:-16px;bottom:-16px;width:220px;height:220px;padding:24px;border-radius:4px;background:var(--green);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between}
.badge-label{font-size:11px;letter-spacing:.22em}
.badge-year{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:.04em}
.badge-note{font-size:12px;line-height:1.7;opacity:.85}

/* numbers */
.numbers{background:var(--ink);color:var(--paper)}
.numbers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:56px;padding-bottom:56px}
.num{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line-dark);padding-left:28px}
.num-value{font-family:var(--serif);font-size:40px;line-height:1}
.num-value small{font-size:16px;margin-left:6px}
.num-label{font-size:13px;color:var(--grey);letter-spacing:.06em}

/* sections */
section h2{font-size:36px;letter-spacing:.08em;margin-top:14px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
.section-lead{max-width:480px;font-size:14px;line-height:2;font-weight:300;color:var(--text)}

/* business */
.business{padding-top:112px;padding-bottom:96px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.card{display:flex;flex-direction:column;background:var(--surface);border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(31,42,68,.08);transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card-image{height:220px;width:100%;object-fit:cover;border-radius:0;display:block}
.card-image-overlay{position:relative;overflow:hidden}
.card-image-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.card-image-copy{position:absolute;left:24px;top:24px;font-family:var(--serif);font-size:19px;line-height:1.6;letter-spacing:.08em;color:#fff;text-shadow:0 1px 10px rgba(40,30,10,.45)}
.card-body{display:flex;flex-direction:column;gap:16px;padding:32px 32px 36px}
.card-tag{font-size:11px;letter-spacing:.26em;color:var(--green)}
.card h3{font-size:24px;letter-spacing:.06em}
.card p{font-size:14px;line-height:2;font-weight:300;color:var(--text)}
.card-link{margin-top:8px;font-size:12px;letter-spacing:.12em}

/* message */
.message{background:var(--surface)}
.message-inner{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;padding-top:112px;padding-bottom:112px}
.message-side{flex:0 1 400px;min-width:0;display:flex;flex-direction:column}
.message-photo{margin-top:32px;width:100%;height:500px;object-fit:cover;object-position:center top;border-radius:4px;display:block}
.message-body{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px;padding-top:8px}
.message-title{font-family:var(--serif);font-size:26px;line-height:1.8;letter-spacing:.06em}
.message-body p:not(.message-title){font-size:15px;line-height:2.2;font-weight:300;color:var(--text)}
.signature{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.sig-role{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.sig-name{font-family:var(--serif);font-size:22px;letter-spacing:.16em}

/* company */
.company{display:flex;flex-wrap:wrap;gap:64px;padding-top:112px;padding-bottom:112px}
.company-side{flex:0 1 320px;min-width:0}
.company-table{flex:1 1 560px;min-width:0;margin:0;border-bottom:1px solid var(--line)}
.company-table>div{display:flex;flex-wrap:wrap;gap:8px 40px;padding:22px 0;border-top:1px solid var(--line)}
.company-table dt{flex:0 0 160px;font-size:13px;letter-spacing:.12em;color:var(--muted)}
.company-table dd a:hover{color:var(--green);text-decoration:underline}
.company-table dd{flex:1 1 300px;margin:0;font-size:15px;line-height:1.9}

/* contact */
.contact{background:var(--green);color:var(--paper)}
.contact-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px;padding-top:96px;padding-bottom:96px}
.contact-text{display:flex;flex-direction:column;gap:18px;max-width:640px}
.contact h2{font-size:34px;line-height:1.5;letter-spacing:.06em;margin-top:0}
.contact p{font-size:14px;line-height:2;font-weight:300;opacity:.9}

/* footer */
.site-footer{background:var(--ink);color:var(--paper)}
.footer-inner{display:flex;flex-direction:column;gap:48px;padding-top:64px;padding-bottom:40px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-addr{font-size:13px;color:var(--grey)}
.footer-cols{display:flex;flex-wrap:wrap;gap:64px}
.footer-col{display:flex;flex-direction:column;gap:14px;font-size:13px}
.footer-col a{color:var(--grey)}
.footer-col a:hover{color:var(--paper)}
.footer-head{font-size:11px;letter-spacing:.26em;color:var(--muted)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--line-dark);font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .numbers-grid,.cards{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  section h2{font-size:28px}
  .contact h2{font-size:24px}
}
@media (max-width:600px){
  .container{padding-left:20px;padding-right:20px}
  .hero{padding-top:40px;padding-bottom:72px;gap:32px}
  .hero-visual{min-height:320px}
  .hero-image{min-height:320px}
  .hero-badge{width:160px;height:160px;padding:16px;left:-4px;bottom:-12px}
  .badge-year{font-size:32px}
  .business,.message-inner,.company{padding-top:72px;padding-bottom:72px}
  .nav{gap:18px;font-size:12px}
  .brand-en{display:none}
  .message-photo{height:380px}
  .company-table dt{flex-basis:100%}
}