:root{--green:#27845f;--green-dark:#1d6348;--ink:#1d2925;--muted:#63716c;--line:#dfe8e3;--soft:#f4f8f6;--white:#fff;--max-width:1120px;--shadow:0 18px 48px rgba(29,55,44,.1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;color:var(--ink);background:var(--white);font-family:-apple-system,BlinkMacSystemFont,'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
.container{width:min(calc(100% - 40px),var(--max-width));margin-inline:auto}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:8px 14px;color:var(--white);background:var(--green-dark);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(223,232,227,.9);backdrop-filter:blur(14px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:24px}
.brand{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.brand-name{color:var(--green-dark);font-size:1.05rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.brand-name::first-letter{color:var(--green)}
.global-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,3vw,38px);min-width:0}
.global-nav a{position:relative;padding:8px 0;color:#3c4c46;font-size:.9rem;white-space:nowrap;transition:color .2s ease}
.global-nav a::after{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--green);content:'';transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
.global-nav a:hover,.global-nav a[aria-current=page]{color:var(--green-dark)}
.global-nav a:hover::after,.global-nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--white);cursor:pointer}
.menu-toggle span:not(.sr-only){display:block;width:22px;height:2px;margin:5px auto;background:var(--green-dark);transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(70px,10vw,130px) 0 clamp(76px,10vw,130px);background:linear-gradient(115deg,#f5faf7 0%,#fff 72%)}
.hero::before{position:absolute;z-index:-1;top:-180px;right:-110px;width:480px;height:480px;border:1px solid rgba(39,132,95,.12);border-radius:50%;content:''}
.hero::after{position:absolute;z-index:-1;right:12%;bottom:-220px;width:360px;height:360px;border:1px solid rgba(39,132,95,.08);border-radius:50%;content:''}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:center;gap:clamp(42px,8vw,110px)}
.eyebrow{margin:0 0 12px;color:var(--green);font-size:.74rem;font-weight:700;letter-spacing:.16em;line-height:1.5}
.hero h1{max-width:700px;margin:0 0 28px;font-size:clamp(2.7rem,6vw,5.5rem);font-weight:500;letter-spacing:.06em;line-height:1.2}
.hero h1 span{color:var(--green-dark)}
.lead{max-width:700px;margin:0;color:var(--muted);font-size:1rem}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 24px;border:1px solid transparent;border-radius:6px;font-size:.9rem;font-weight:700;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(29,55,44,.12)}
.button-primary{color:var(--white);background:var(--green)}
.button-primary:hover{background:var(--green-dark)}
.button-secondary{color:var(--green-dark);border-color:var(--green);background:var(--white)}
.button-secondary:hover{color:var(--white);background:var(--green)}
.button-light{color:var(--green-dark);background:var(--white)}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.hero-visual-frame{position:relative;z-index:1;width:min(100%,390px);padding:18px;border:1px solid rgba(39,132,95,.25);border-radius:4px;background:rgba(255,255,255,.88);box-shadow:0 24px 60px rgba(29,55,44,.14);transform:rotate(2deg)}
.hero-visual-frame::before{position:absolute;z-index:-1;inset:12px -12px -12px 12px;border:1px solid rgba(29,99,72,.16);content:''}
.hero-visual-frame img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.hero-line{position:absolute;width:120px;height:1px;background:var(--green);opacity:.55}
.hero-line-top{top:16%;right:3%;transform:rotate(35deg)}
.hero-line-bottom{bottom:12%;left:2%;transform:rotate(-35deg)}
.hero-panel{min-height:300px;padding:38px;border:1px solid #cfe2d8;background:var(--white);box-shadow:var(--shadow)}
.panel-number,.business-number,.service-index{color:var(--green);font-size:.85rem;font-weight:700;letter-spacing:.12em}
.hero-panel p{margin:58px 0 12px;color:var(--green-dark);font-size:clamp(1.8rem,4vw,3rem);font-weight:500;letter-spacing:.05em;line-height:1.25}
.hero-panel small{color:var(--muted)}
.section{padding:clamp(70px,9vw,112px) 0}
.section-soft{background:var(--soft)}
.section-heading{max-width:700px;margin-bottom:42px}
.section-heading h2,.split-content h2,.recruitment-box h2,.company-grid h2{margin:0 0 18px;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:500;letter-spacing:.04em;line-height:1.45}
.section-heading p:last-child,.split-content p,.recruitment-box p{margin:0;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{display:flex;min-width:0;min-height:310px;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--white);box-shadow:0 5px 18px rgba(29,55,44,.03);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.service-card:hover{border-color:#a9cdbb;box-shadow:var(--shadow);transform:translateY(-5px)}
.service-card h3{margin:24px 0 14px;font-size:1.3rem;font-weight:600;line-height:1.5}
.service-card p{margin:0;color:var(--muted);font-size:.92rem}
.text-link{display:inline-flex;align-items:center;gap:10px;width:fit-content;margin-top:auto;padding-top:24px;color:var(--green-dark);font-size:.9rem;font-weight:700}
.text-link span{transition:transform .2s ease}
.text-link:hover span{transform:translateX(5px)}
.trust-section{border-top:1px solid var(--line)}
.split-content{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start}
.split-content .text-link{margin-top:24px;padding-top:0}
.contact-band{padding:58px 0;color:var(--white);background:linear-gradient(120deg,var(--green-dark),#245c48)}
.contact-band-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.contact-band .eyebrow{color:#b7dfca}
.contact-band h2{margin:0;font-size:clamp(1.35rem,3vw,2rem);font-weight:500;line-height:1.4}
.page-hero{padding:clamp(60px,9vw,105px) 0;background:linear-gradient(120deg,var(--soft),#fff);border-bottom:1px solid var(--line)}
.page-hero h1{margin:0 0 14px;font-size:clamp(2rem,5vw,3.6rem);font-weight:500;letter-spacing:.06em;line-height:1.3}
.page-hero p:last-child{max-width:680px;margin:0;color:var(--muted)}
.business-list{padding:20px 0 70px}
.business-item{display:grid;grid-template-columns:90px minmax(0,1fr);gap:28px;padding:62px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.business-body{max-width:820px;min-width:0}
.business-body h2{margin:0 0 18px;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:500;line-height:1.45}
.business-body p:last-child{margin:0;color:var(--muted)}
.project-section{padding:0 0 90px;background:var(--white)}
.project-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.42fr);gap:48px;align-items:center;padding:42px;border:1px solid var(--line);border-radius:8px;background:#fbfcfb}
.project-copy{min-width:0}
.project-copy h2{margin:0 0 18px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500}
.project-copy p:not(.eyebrow):not(.project-note){margin:0;color:var(--muted)}
.project-note{margin:20px 0 0;color:var(--green-dark);font-size:.82rem}
.project-image{width:min(100%,280px);justify-self:end;opacity:.82;filter:saturate(.72) contrast(.96)}
.project-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.company-grid{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);gap:70px}
.company-table{margin:0;border-top:1px solid var(--line)}
.company-table>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.company-table dt{color:var(--muted);font-weight:700}
.company-table dd{margin:0;overflow-wrap:anywhere}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-card{display:flex;min-width:0;flex-direction:column;gap:8px;padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--white);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.contact-card:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-2px)}
.contact-label{color:var(--green);font-size:.75rem;font-weight:700;letter-spacing:.16em}
.contact-card strong{overflow-wrap:anywhere;color:var(--green-dark);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600}
.contact-card span:last-child{color:var(--muted);font-size:.82rem}
.recruitment-section{padding-top:0}
.recruitment-box{max-width:820px;padding:42px;border-left:4px solid var(--green);border-radius:0 8px 8px 0;background:var(--soft)}
.recruitment-box .button{margin-top:26px}
.site-footer{padding:42px 0 30px;color:#d9e8e0;background:#1c3028}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.footer-brand{color:var(--white);font-size:1.1rem;font-weight:700}
.footer-inner p{margin:8px 0 0;color:#a9c2b5;font-size:.84rem}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px 26px;font-size:.82rem}
.footer-links a{transition:color .2s ease}
.footer-links a:hover{color:var(--white)}
.copyright{grid-column:1/-1;margin-top:22px!important;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);text-align:right}
.reveal{animation:rise-in .7s ease both}
:focus-visible{outline:3px solid rgba(39,132,95,.45);outline-offset:4px}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){
.container{width:min(calc(100% - 32px),var(--max-width))}
.header-inner{min-height:74px}
.brand-name{font-size:.96rem}
.menu-toggle{display:block;flex:0 0 auto}
.global-nav{position:absolute;top:100%;right:16px;left:16px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px;border:1px solid var(--line);border-radius:8px;background:var(--white);box-shadow:var(--shadow)}
.global-nav.is-open{display:flex}
.global-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
.global-nav a:last-child{border-bottom:0}
.global-nav a::after{display:none}
.hero-grid,.split-content,.company-grid,.project-card{grid-template-columns:1fr}
.hero-visual{min-height:300px;margin-top:10px}
.hero-visual-frame{width:min(100%,340px)}
.hero-panel{min-height:240px}
.hero-panel p{margin-top:35px}
.service-grid{grid-template-columns:1fr}
.service-card{min-height:auto}
.contact-band-inner{align-items:flex-start;flex-direction:column}
.project-image{width:min(100%,280px);justify-self:start}
}
@media(max-width:560px){
  .container{
    width:min(calc(100% - 28px),var(--max-width))
  }

  .hero{
    padding-top:42px
  }

  .hero h1{
    font-size:clamp(2rem,9vw,2.8rem);
    line-height:1.15
  }

  .hero-panel p{
    margin-top:24px;
    font-size:1rem;
    line-height:1.9
  }

  .hero-visual{
    min-height:auto;
    margin-top:24px
  }

  .hero-visual-frame{
    width:min(92%,300px);
    margin-inline:auto
  }

  .hero-line{
    width:56px
  }

  .button-row,
  .button-row .button{
    width:100%
  }

  .service-grid{
    gap:18px
  }

  .service-card{
    min-height:auto;
    padding:28px 22px
  }

  .business-item{
    grid-template-columns:1fr;
    gap:8px;
    padding:28px 0
  }

  .business-number{
    order:-1
  }

  .project-card,
  .recruitment-box{
    padding:24px 20px
  }

  .company-table>div{
    grid-template-columns:1fr;
    gap:4px
  }

  .contact-grid{
    grid-template-columns:1fr
  }

  .contact-card{
    padding:22px 20px
  }

  .footer-inner{
    grid-template-columns:1fr;
    align-items:start
  }

  .footer-links{
    grid-column:1;
    
    flex-direction:column;
    gap:8px
  }

  .copyright{
    grid-column:auto;
    text-align:left
  }
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{animation:none}
*,*::before,*::after{transition-duration:.01ms!important}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(2rem,8vw,2.5rem);}
  .hero-panel p{margin-top:20px;font-size:1rem;line-height:1.7;}
  .hero-visual-frame{width:min(86%,260px);}
  .service-card{padding:28px 24px;}
}

@media (max-width:560px){
  body.company-page .hero h1{font-size:clamp(1.8rem,7vw,2.2rem);}
}
 @media (max-width:560px){body.company-page .hero h1{font-size:1.6rem;}}
@media (max-width:560px){body.company-page .page-hero h1{font-size:1.6rem;}}