:root{--jade:#0b755a;--jade2:#38a786;--deep:#06110d;--paper:#f7f8f5;--ink:#111815;--muted:#66706b;--line:#dfe5e1;--side:clamp(20px,5vw,76px);--header:68px;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(calc(100% - var(--side)*2),var(--max));margin:auto}.eyebrow{margin:0 0 17px;color:var(--jade);font-size:12px;font-weight:700;letter-spacing:.22em}.section{padding:clamp(76px,9vw,132px) 0}.section-title{margin:0;font-family:"Noto Sans JP",sans-serif;font-size:clamp(38px,5vw,70px);font-weight:500;line-height:1.12;letter-spacing:-.03em}.section-copy{color:#525d57;font-size:15px;line-height:2;max-width:620px}.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}.reveal.on{opacity:1;transform:none}

/* small-label reveal: left-to-right rising characters */
.label-reveal{display:block}
.label-char-wrap{display:inline-block;overflow:hidden;vertical-align:bottom}
.label-char{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  text-shadow:none;
  will-change:opacity,transform;
}
.label-reveal:not(.is-visible) .label-char{
  animation:none!important;
  opacity:0;
  transform:translateY(14px);
  text-shadow:none;
}
.label-reveal.is-visible .label-char{
  animation:labelRiseIn .58s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--char-delay,0s);
}
@keyframes labelRiseIn{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}

/* header */
.header{position:fixed;inset:0 0 auto;z-index:1000;height:var(--header);background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.05)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:92px;height:auto;object-fit:contain}.nav{display:flex;gap:34px;font-size:11px;font-weight:700;letter-spacing:.12em}.nav a{opacity:.65;transition:.3s}.nav a:hover{opacity:1;color:var(--jade)}.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer}.menu-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:18px}.menu-icon span{display:block;width:22px;height:2px;border-radius:999px;background:#111815;transition:transform .28s ease,opacity .2s ease,background .2s ease}.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0}.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{display:none}
/* hero */
.hero{
  position:relative;
  min-height:100svh;
  background:#eef1ef;
  color:#111815;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:calc(var(--header) + 44px) 0 56px;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:url("assets/hero-bg.jpg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,249,248,.74) 0%,rgba(248,249,248,.54) 36%,rgba(248,249,248,.18) 70%,rgba(248,249,248,.06) 100%)}
/* 旧CSS背景演出は使用しない */
.hero-bg::before,.glass,.beam{display:none!important}
.hero::after{display:none}
.hero-content{position:relative;z-index:2;width:min(790px,70vw);padding:clamp(32px,4.2vw,52px);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,0),rgba(236,240,238,.26));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 20px 48px rgba(43,72,62,.09)}
.hero .eyebrow{color:#0d8f69;margin-bottom:22px;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hero h1{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  font-weight:500;
  font-size:clamp(46px,6vw,82px);
  line-height:1.14;
  letter-spacing:-.035em;
  color:#10211b;
  text-shadow:0 2px 22px rgba(255,255,255,.92);
}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .hero-lead{font-size:.76em;font-weight:500;letter-spacing:-.025em}
.hero h1 .hero-emphasis{margin-top:.18em;color:var(--jade);font-weight:600;text-shadow:0 2px 22px rgba(255,255,255,.88)}
.hero-sub{margin:22px 0 0;color:#31413a;font-size:12px;font-weight:700;letter-spacing:.23em;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:34px;
  margin-top:34px;
  border:1px solid var(--jade);
  border-radius:999px;
  padding:13px 24px;
  color:#fff;
  background:var(--jade);
  font-size:13px;
  transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(20,151,113,.18);
}
.hero-cta:hover{background:#075d48;border-color:#075d48;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,93,72,.24)}
.scroll-mark{position:absolute;right:var(--side);bottom:40px;z-index:2;color:#45524c;font-size:10px;letter-spacing:.2em;writing-mode:vertical-rl}
.scroll-mark:after{content:"";display:block;width:1px;height:54px;background:linear-gradient(var(--jade),transparent);margin:12px auto 0;animation:scrollLine 1.8s infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* about */
.about{
  position:relative;
  overflow:hidden;
  background-image:url("assets/about-bg.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.about .container{
  position:relative;
  z-index:1;
}
.about-grid{
  display:block;
}
.about-grid > .reveal{
  width:min(790px,72vw);
  padding:clamp(30px,4vw,44px);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,0),rgba(236,240,238,.28));
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  box-shadow:0 18px 42px rgba(43,72,62,.09);
}
.about-copy{
  margin-top:28px;
  max-width:620px;
}
.about .section-title{
  max-width:720px;
}
.about-title{line-height:1.12}
.about-title span{display:block;white-space:nowrap}
.about-title .about-lead,.about-title .about-mid{font-size:.58em;font-weight:500;color:#26332e;letter-spacing:-.02em;text-shadow:none}
.about-title .about-mid{margin-top:.12em}
.about-title .about-emphasis{margin-top:.22em;font-size:1em;font-weight:700;color:var(--jade);letter-spacing:-.035em;text-shadow:none}
.about .about-copy,.about .about-copy p{color:#36433d;text-shadow:none}
.about .reveal{
  opacity:1 !important;
  transform:none !important;
}
.about .eyebrow,
.about .section-title,
.about .about-copy,
.about .about-copy p{
  position:relative;
  z-index:3;
  opacity:1;
  visibility:visible;
}
.about .section-title{
  color:#111815;
}
.about .about-copy,
.about .about-copy p{
  color:#404a45;
}

/* services */
.services-title{line-height:1.12}
.services-title span{display:block;white-space:nowrap}
.services-title .services-lead{font-size:.58em;font-weight:500;color:#26332e;letter-spacing:-.02em}
.services-title .services-emphasis{margin-top:.22em;font-size:1em;font-weight:700;color:var(--jade);letter-spacing:-.035em}

.services{background:#f7f8f5}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}.service-card{min-height:390px;border:1px solid #dce4df;background:#fff;border-radius:8px;overflow:hidden;position:relative;padding:28px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.service-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(6,17,13,.09)}.service-art{height:210px;margin:-28px -28px 25px;position:relative;overflow:hidden;background-color:#edf1ef;background-size:cover;background-position:center;background-repeat:no-repeat}.service-art::before,.service-art::after{display:none}.plan-art{background-image:url("assets/service-plan.png")}.tech-art{background-image:url("assets/service-tech.png")}.op-art{background-image:url("assets/service-operation.png")}.service-num{color:var(--jade);font-size:12px;font-weight:700;letter-spacing:.18em}.service-card h3{font-family:"Noto Sans JP",sans-serif;margin:7px 0 4px;font-size:29px;font-weight:600;letter-spacing:.03em}.service-jp{font-size:14px;margin:0;color:#313a36;font-weight:500}.service-desc{margin:18px 0 0;color:#68726d;font-size:13px;line-height:1.9;letter-spacing:.01em}
/* projects title */
.projects-title{line-height:1.12}
.projects-title span{display:block;white-space:nowrap}
.projects-title .projects-lead{
  font-size:.58em;
  font-weight:500;
  color:#26332e;
  letter-spacing:-.02em;
}
.projects-title .projects-emphasis{
  margin-top:.22em;
  font-size:1em;
  font-weight:700;
  color:var(--jade);
  letter-spacing:-.035em;
}

/* works */
.works{position:relative;background:#fff;padding-top:32px;scroll-margin-top:var(--header)}
.works::before{content:none}
.works .container{position:relative;z-index:1}
@media(max-width:900px){
.about-grid > .reveal{width:min(92%,720px)}

  .works{padding-top:24px}
}
@media(max-width:560px){.projects-title .projects-lead{font-size:.54em}.projects-title .projects-emphasis{font-size:.88em}.services-title .services-lead{font-size:.54em}.services-title .services-emphasis{font-size:.88em}
.about-grid > .reveal{width:100%;padding:26px 20px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,0),rgba(236,240,238,.30))}

  .works{padding-top:18px}
}
.works-head{display:flex;align-items:end;justify-content:space-between;gap:40px}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.work-card{position:relative;height:360px;border-radius:7px;overflow:hidden;color:#fff;cursor:pointer;isolation:isolate;background:rgba(255,255,255,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.55);box-shadow:0 14px 34px rgba(7,93,72,.10)}
.work-art{position:absolute;inset:0;background-image:url("assets/project-bg.png");background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease,opacity .5s ease}
.work-art::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 24% 22%,rgba(255,255,255,.18),transparent 30%),linear-gradient(125deg,transparent 20%,rgba(255,255,255,.08) 48%,transparent 70%);transform:rotate(-8deg)}
.wa1,.wa2,.wa3,.wa4{background-image:url("assets/project-card.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.wa3:after{content:"";position:absolute;inset:-20%;border:0;border-radius:0;transform:rotate(-8deg);background:radial-gradient(circle at 24% 22%,rgba(255,255,255,.18),transparent 30%),linear-gradient(125deg,transparent 20%,rgba(255,255,255,.08) 48%,transparent 70%)}
.work-card:hover .work-art,.work-card.open .work-art{transform:scale(1.035);filter:brightness(.72)}
.work-reveal{position:absolute;inset:0;z-index:1;padding:30px 24px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(2,18,13,.04) 0%,rgba(2,18,13,.26) 50%,rgba(2,18,13,.72) 100%)}
.work-type{font-size:10px;letter-spacing:.18em;color:#dff6ef;margin-bottom:8px}
.work-reveal h3{font-family:"Noto Sans JP",sans-serif;font-size:25px;font-weight:600;margin:0;line-height:1.45;color:#fff;transition:transform .45s ease}
.work-reveal p{margin:16px 0 0;color:#eef7f3;font-size:12px;line-height:1.9;opacity:0;transform:translateY(12px);max-height:0;overflow:hidden;transition:opacity .4s ease,transform .45s ease,max-height .55s ease}
.work-card:hover .work-reveal p,.work-card.open .work-reveal p{opacity:1;transform:none;max-height:150px}
.work-card:hover .work-reveal h3,.work-card.open .work-reveal h3{transform:translateY(-2px)}
.work-card::after{content:"+";display:none}
.work-base,.works-hint{display:none!important}
/* clients */
.clients{background:#f7f8f5}.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:26px}.client{padding:22px 16px;border-bottom:1px solid var(--line);text-align:center;font-size:12px;color:#3d4742}.clients-note{text-align:right;color:#8a918e;font-size:10px;margin:14px 0 0}
/* company */
.company{background:#fff}.company-list{margin-top:30px;border-top:1px solid #ccd5d0}.company-row{display:grid;grid-template-columns:190px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid #e3e8e5}.company-key{font-size:10px;color:var(--jade);font-weight:700;letter-spacing:.16em}.company-value{font-size:13px;line-height:1.85}.company-value span{display:inline}.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:10px;padding:0;border:1px solid rgba(8,111,85,.22);border-radius:50%;background:#fff;color:var(--jade);cursor:pointer;vertical-align:middle;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.copy-btn svg{width:15px;height:15px;display:block}.copy-btn:hover{background:var(--jade);color:#fff;border-color:var(--jade);transform:translateY(-1px)}.copy-btn.copied{background:#075d48;color:#fff;border-color:#075d48}
/* contact */
.contact{position:relative;overflow:hidden;padding:80px 0 40px;background-image:linear-gradient(135deg,rgba(252,253,252,.30) 0%,rgba(246,249,248,.40) 100%),url("assets/contact-bg.png");background-position:center center;background-size:cover;background-repeat:no-repeat}.contact .container{position:relative;z-index:1}.contact-panel{position:relative;overflow:visible;background:transparent;border:none;padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;min-height:0}.contact-panel:before,.contact-panel:after{display:none}.contact-copy-wrap{position:relative;z-index:1;width:min(790px,72vw);padding:clamp(30px,4vw,44px);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0),rgba(236,240,238,.28));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:0 18px 42px rgba(43,72,62,.09)}.contact-title{font-family:"Noto Sans JP",sans-serif;font-size:clamp(38px,5vw,70px);line-height:1.12;margin:0;max-width:720px}.contact-title span{display:block;white-space:nowrap}.contact-title-small{display:block;font-size:.58em;font-weight:500;color:#26332e;letter-spacing:-.02em;line-height:1.14;text-shadow:none}.contact-title-accent{display:block;margin-top:.22em;font-size:1em;font-weight:700;color:var(--jade);letter-spacing:-.035em;line-height:1.06;text-shadow:none}.contact-btn{display:inline-flex;align-items:center;gap:34px;margin-top:34px;border:1px solid var(--jade);border-radius:999px;padding:13px 24px;color:#fff;background:var(--jade);font-size:13px;transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease;backdrop-filter:blur(6px);box-shadow:0 10px 26px rgba(20,151,113,.18)}.contact-btn:hover{background:#075d48;border-color:#075d48;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,93,72,.24)}.footer{text-align:center;font-family:"Noto Sans JP",sans-serif;font-size:11px;letter-spacing:.1em;color:#5f6964;padding:24px var(--side);background:#fff;border-top:1px solid #e4e9e6}.site-footer{width:100%}
@media(max-width:900px){:root{--header:60px;--side:24px}.nav{display:none}.menu-btn{display:inline-flex}.mobile-menu{position:fixed;inset:var(--header) 0 auto;z-index:999;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--side) 18px;display:none}.mobile-menu.open{display:grid}.mobile-menu a{padding:11px 0;font-size:12px;letter-spacing:.12em;border-bottom:1px solid #edf0ee}.hero-content{width:80%}.about-grid{grid-template-columns:1fr}.about-visual{height:280px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.service-art{height:230px}.work-grid{grid-template-columns:repeat(2,1fr)}.works-head{display:block}.works-note{margin-top:18px}.clients-grid{grid-template-columns:repeat(2,1fr)}.contact-panel{align-items:flex-start;flex-direction:column;gap:26px}.contact-copy-wrap{width:min(92%,720px)}.company-row{grid-template-columns:140px 1fr}}
@media(max-width:560px){.about-title .about-lead,.about-title .about-mid{font-size:.54em}.about-title .about-emphasis{font-size:.88em}:root{--side:18px}.brand img{width:76px}.menu-btn{width:40px;height:40px}.menu-icon{width:20px;height:16px;gap:4px}.menu-icon span{width:20px}.hero{min-height:100svh;padding:calc(var(--header) + 24px) 0 32px;align-items:center}.hero .container{width:calc(100% - 32px)}.hero-content{width:100%;max-width:none;padding:26px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(248,249,248,.94),rgba(248,249,248,.82))}.hero h1{font-size:clamp(30px,9vw,42px);line-height:1.12;letter-spacing:-.04em}.hero h1 .hero-lead{font-size:.76em;letter-spacing:-.03em}.hero h1 .hero-emphasis{margin-top:.20em;font-size:1em;letter-spacing:-.045em}.hero-sub{font-size:10px}.scroll-mark{display:none}.section{padding:72px 0}.section-title{font-size:39px}.about-visual{height:210px}.service-art{height:190px}.service-card h3{font-size:25px}.work-grid{grid-template-columns:1fr}.work-card{height:290px}.work-card::after{content:"+";display:flex;position:absolute;right:16px;bottom:16px;z-index:3;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--jade);font-size:24px;font-weight:400;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,.16);transition:transform .3s ease,background .3s ease,color .3s ease}.work-card.open::after{content:"−";background:var(--jade);color:#fff;transform:rotate(180deg)}.work-reveal{padding-right:66px}.works-hint{display:none}.clients-grid{grid-template-columns:1fr}.client{text-align:left}.company-row{grid-template-columns:1fr;gap:7px}.contact{padding-top:52px}.contact-panel{padding:0}.contact-copy-wrap{width:100%;padding:26px 20px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,0),rgba(236,240,238,.30))}.contact-title{font-size:39px}.contact-title .contact-title-small{font-size:.54em}.contact-title .contact-title-accent{font-size:.88em}.contact-btn{width:auto;justify-content:flex-start;margin-top:28px}.footer{font-size:10px;padding:20px var(--side)}}

@media(max-width:360px){
  .hero .container{width:calc(100% - 24px)}
  .hero-content{padding:24px 14px}
  .hero h1{font-size:29px}
  .hero-sub{letter-spacing:.16em}
}


/* PROJECTS mobile tap state: ignore sticky :hover and use .open only */
@media(max-width:900px){
  .work-card:hover .work-art{
    transform:none;
    filter:none;
  }
  .work-card:hover .work-reveal p{
    opacity:0;
    transform:translateY(12px);
    max-height:0;
  }
  .work-card:hover .work-reveal h3{
    transform:none;
  }
  .work-card.open .work-art,
  .work-card.open:hover .work-art{
    transform:scale(1.035);
    filter:brightness(.72);
  }
  .work-card.open .work-reveal p,
  .work-card.open:hover .work-reveal p{
    opacity:1;
    transform:none;
    max-height:150px;
  }
  .work-card.open .work-reveal h3,
  .work-card.open:hover .work-reveal h3{
    transform:translateY(-2px);
  }
}


/* subtle moving transparent / pale-gray readability panels */
.hero-content,
.about-grid > .reveal,
.contact-copy-wrap{
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0) 0 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 82% 70%, rgba(224,228,226,.34) 0 16%, rgba(224,228,226,0) 44%),
    linear-gradient(125deg, rgba(255,255,255,0), rgba(235,238,236,.42), rgba(255,255,255,0)) !important;
  background-size:220% 220%,240% 240%,200% 200% !important;
  animation:softPanelDrift 24s ease-in-out infinite;
}
.about-grid > .reveal{animation-duration:27s}
.contact-copy-wrap{animation-duration:31s;animation-delay:-9s}
@keyframes softPanelDrift{
  0%{
    background-position:8% 16%,92% 84%,0% 50%;
  }
  19%{
    background-position:42% 8%,68% 58%,28% 24%;
  }
  43%{
    background-position:78% 38%,22% 72%,70% 62%;
  }
  67%{
    background-position:34% 82%,84% 18%,42% 90%;
  }
  84%{
    background-position:12% 48%,48% 26%,92% 36%;
  }
  100%{
    background-position:8% 16%,92% 84%,0% 50%;
  }
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.beam,.scroll-mark:after{animation:none}.hero-content,.about-grid > .reveal,.contact-copy-wrap{animation:none!important}}

/* typography: Noto Sans JP only */
html,body,button,input,select,textarea,a,p,span,div,h1,h2,h3,h4,h5,h6,nav,footer{font-family:"Noto Sans JP",sans-serif!important;}
.bank-list{display:flex;flex-direction:column;gap:4px}.bank-list span{display:block}

.business-list{display:flex;flex-direction:column;gap:6px}