:root {
  --navy: #102337;
  --navy-deep: #091725;
  --navy-soft: #19344d;
  --mint: #62d6bd;
  --mint-soft: #b9efe3;
  --paper: #f5f7f6;
  --white: #fff;
  --ink: #15212c;
  --muted: #68737c;
  --line: #d9dfdd;
  --serif: "Noto Serif JP", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.9; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 74px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; color: white; background: rgba(9,23,37,.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { display: flex; align-items: center; line-height: 1; }
.brand img { display: block; width: 184px; height: auto; }
nav { display: flex; align-items: center; gap: 2rem; font-size: .78rem; letter-spacing: .06em; }
nav a { transition: color .2s; }
nav a:hover { color: var(--mint); }
.nav-cta { border: 1px solid rgba(255,255,255,.4); padding: 10px 17px; }
.menu-button { display: none; background: none; border: 0; padding: 10px; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 6px 0; background: white; }
.section-dark { color: white; background: var(--navy); }
.section-light { background: var(--paper); }
.hero { min-height: 100svh; padding: 140px 7vw 0; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; width: 52vw; height: 52vw; right: -14vw; top: -20vw; border: 1px solid rgba(98,214,189,.17); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(98,214,189,.025), 0 0 0 16vw rgba(98,214,189,.018); }
.hero-grid { width: min(1180px,100%); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .74fr; gap: 8vw; align-items: center; }
.eyebrow { margin: 0 0 24px; color: var(--mint); font-size: .7rem; font-weight: 700; letter-spacing: .22em; }
.eyebrow.navy { color: var(--navy-soft); }
.eyebrow.mint { color: var(--mint); }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 28px; font: 600 clamp(2.7rem,5.7vw,5.6rem)/1.35 var(--serif); letter-spacing: -.04em; }
h1 em { color: var(--mint-soft); font-style: normal; }
.hero-lead { max-width: 640px; color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.button { display: inline-flex; gap: 40px; align-items: center; padding: 16px 22px; font-weight: 600; font-size: .9rem; }
.button-primary { color: var(--navy-deep); background: var(--mint); }
.text-link { font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.35); }
.text-link span { margin-left: 12px; }
.hero-portrait { position: relative; align-self: end; z-index: 1; }
.portrait-frame { background: #d8dddf; position: relative; overflow: hidden; box-shadow: 0 34px 80px rgba(0,0,0,.27); }
.portrait-frame img { width: 100%; aspect-ratio: .78; object-fit: cover; object-position: 50% 18%; filter: saturate(.78) contrast(1.04); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(9,23,37,.82)); }
.portrait-caption { position: absolute; z-index: 2; bottom: 26px; left: 28px; display: grid; color: white; }
.portrait-caption span { color: var(--mint); font-size: .6rem; letter-spacing: .16em; }
.portrait-caption strong { margin-top: 4px; font: 600 1.55rem var(--serif); letter-spacing: .06em; }
.portrait-caption small { font-size: .7rem; opacity: .7; letter-spacing: .08em; }
.seal { position: absolute; right: -31px; bottom: 62px; z-index: 3; width: 78px; height: 78px; border-radius: 50%; background: var(--mint); color: var(--navy); display: grid; place-content: center; text-align: center; box-shadow: 0 8px 25px rgba(0,0,0,.2); }
.seal span { font: 700 .76rem var(--serif); letter-spacing: .1em; }
.seal small { font-size: .55rem; }
.hero-foot { max-width: 1180px; margin: 70px auto 0; padding: 24px 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.14); }
.hero-foot p { margin: 0; padding: 0 28px; color: rgba(255,255,255,.68); font-size: .72rem; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.hero-foot p:last-child { border: 0; }
.intro,.office { padding: 130px 8vw; display: grid; grid-template-columns: .75fr 1.25fr; gap: 10vw; }
.section-heading h2 { font: 600 clamp(2rem,4vw,3.9rem)/1.45 var(--serif); letter-spacing: -.04em; }
.section-heading > p:last-child { color: var(--muted); }
.intro-body { max-width: 720px; }
.lead-copy { font: 500 1.32rem/2 var(--serif); }
.intro-body > p:not(.lead-copy) { color: var(--muted); }
.facts { margin: 44px 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 16px 0; display: grid; grid-template-columns: 100px 1fr; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: .78rem; }
.facts dd { margin: 0; font-size: .9rem; font-weight: 600; }
.practice { padding: 130px 8vw; background: white; }
.practice > .section-heading { display: grid; grid-template-columns: 1fr 1.4fr .8fr; gap: 5vw; align-items: end; }
.practice > .section-heading .eyebrow { align-self: start; }
.practice-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.practice-card { min-height: 290px; padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s, transform .25s; }
.practice-card:hover { background: #f2f8f6; transform: translateY(-3px); }
.practice-card.featured { color: white; background: var(--navy); }
.practice-card > span { color: var(--mint); font-size: .7rem; }
.practice-card h3 { margin: 46px 0 18px; font: 600 1.28rem var(--serif); }
.practice-card p { color: var(--muted); font-size: .88rem; line-height: 1.8; }
.practice-card.featured p { color: rgba(255,255,255,.67); }
.practice-card ul { padding: 0; list-style: none; color: var(--mint-soft); font-size: .76rem; line-height: 1.9; }
.support { padding: 130px 8vw; display: grid; grid-template-columns: .55fr 1.45fr; gap: 8vw; }
.support-index { color: rgba(255,255,255,.15); font: 600 clamp(3rem,7vw,7rem)/1 var(--serif); }
.support-index span { display: block; margin-top: 30px; color: var(--mint); font: 400 .7rem var(--sans); letter-spacing: .15em; }
.support-list { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.14); }
.support-list article { padding: 34px 0; display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid rgba(255,255,255,.14); }
.support-list article > span { color: var(--mint); font-size: .72rem; }
.support-list h3 { margin-bottom: 9px; font: 600 1.28rem var(--serif); }
.support-list p { max-width: 650px; margin: 0; color: rgba(255,255,255,.62); font-size: .9rem; }
.career { padding: 130px 8vw; }
.timeline { margin-top: 55px; border-top: 1px solid var(--ink); }
.timeline div { padding: 25px 0; display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid var(--line); }
.timeline time { color: var(--muted); font-size: .75rem; }
.timeline p { margin: 0; }
.timeline strong { font: 600 1.07rem var(--serif); }
.career-note { margin: 28px 0 0 130px; color: var(--muted); font-size: .82rem; }
.process { padding: 130px 8vw; background: #eaf0ee; }
.process-list { margin: 55px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #bac5c2; }
.process-list li { position: relative; padding: 28px 24px 0 0; border-right: 1px solid #bac5c2; }
.process-list li + li { padding-left: 24px; }
.process-list span { display: grid; place-items: center; width: 32px; height: 32px; margin-top: -45px; color: white; background: var(--navy); border-radius: 50%; font-size: .7rem; }
.process-list h3 { margin-top: 28px; font: 600 1.05rem var(--serif); }
.process-list p { color: var(--muted); font-size: .82rem; }
.contact { padding: 110px 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.contact-copy h2 { font: 600 clamp(2.2rem,4.4vw,4.2rem)/1.45 var(--serif); }
.contact-copy > p:last-child { color: rgba(255,255,255,.62); }
.contact-actions { border-top: 1px solid rgba(255,255,255,.25); }
.contact-row { padding: 26px 0; display: grid; grid-template-columns: 1fr auto 25px; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.25); }
.contact-row span { color: var(--mint); font-size: .7rem; }
.contact-row strong { font-size: 1rem; font-weight: 500; }
.contact-row i { color: var(--mint); font-style: normal; }
.office-name { display: flex; align-items: flex-start; }
.office-name img { width: min(100%, 350px); height: auto; }
address { font-style: normal; }
address dl { margin: 0; border-top: 1px solid var(--line); }
address dl div { padding: 18px 0; display: grid; grid-template-columns: 90px 1fr; border-bottom: 1px solid var(--line); }
address dt { color: var(--muted); font-size: .75rem; }
address dd { margin: 0; }
.map-link { display: inline-block; margin-top: 24px; color: var(--navy); font-size: .8rem; border-bottom: 1px solid var(--navy); }
footer { padding: 50px 8vw; color: rgba(255,255,255,.55); background: var(--navy-deep); display: grid; grid-template-columns: .6fr 1.5fr .6fr; gap: 5vw; align-items: end; font-size: .68rem; }
.footer-brand img { width: min(100%, 220px); }
footer p { margin: 0; }
footer > small { text-align: right; }
.floating-contact { display: none; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .site-header { height: 66px; padding: 0 22px; }
  .site-header .brand img { width: 154px; }
  .menu-button { display: block; }
  nav { display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 30px 22px; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy-deep); }
  nav.open { display: flex; }
  nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-cta { border: 0; }
  .hero { padding: 116px 22px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  h1 { font-size: clamp(2.5rem,11vw,4rem); }
  .hero-lead { font-size: .94rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-portrait { width: 87%; margin-left: auto; }
  .seal { width: 68px; height: 68px; right: -15px; }
  .hero-foot { margin-top: 42px; grid-template-columns: 1fr; }
  .hero-foot p { padding: 14px 0; text-align: left; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .intro,.office,.support,.contact { padding: 88px 22px; grid-template-columns: 1fr; gap: 46px; }
  .practice,.career,.process { padding: 88px 22px; }
  .section-heading h2 { font-size: 2.15rem; }
  .practice > .section-heading { grid-template-columns: 1fr; gap: 0; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-card { min-height: auto; }
  .support-index { display: none; }
  .timeline div { grid-template-columns: 78px 1fr; gap: 10px; }
  .career-note { margin-left: 88px; }
  .process-list { grid-template-columns: 1fr; border-top: 0; }
  .process-list li,.process-list li + li { padding: 22px 0; display: grid; grid-template-columns: 48px 1fr; border-right: 0; border-bottom: 1px solid #bac5c2; }
  .process-list span { margin: 0; }
  .process-list h3 { margin: 0 0 5px; }
  .process-list p { margin: 0; }
  .contact-row { grid-template-columns: 1fr 20px; }
  .contact-row span { grid-column: 1; }
  .contact-row strong { grid-column: 1; word-break: break-all; }
  .contact-row i { grid-column: 2; grid-row: 1 / span 2; }
  footer { padding: 48px 22px 90px; grid-template-columns: 1fr; align-items: start; }
  footer > small { text-align: left; }
  .floating-contact { position: fixed; z-index: 40; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 18px; padding: 13px 17px; color: var(--navy); background: var(--mint); box-shadow: 0 10px 35px rgba(0,0,0,.22); font-size: .8rem; font-weight: 700; }
  .floating-contact i { font-style: normal; }
}