html,body{margin:0;background:#fff}

.hroJ{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#fbf9f6;padding:clamp(56px,7vw,104px) 24px;overflow:hidden;
}
.hroJ__in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hroJ__title{margin:0;font-size:clamp(28px,4.4vw,48px);line-height:1.3;font-weight:800;letter-spacing:-.02em;color:#2b2118}
.hroJ__lead{margin:22px 0 0;font-size:15px;line-height:2;color:#5c5044;max-width:400px}
.hroJ__btn{
  margin-top:32px;display:inline-flex;align-items:center;height:54px;padding:0 32px;border-radius:99px;
  background:#2b2118;color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;transition:transform .16s;
}
.hroJ__btn:hover{transform:translateY(-2px)}
.hroJ__stack{position:relative;height:clamp(300px,34vw,400px)}
.hroJ__card{
  position:absolute;inset:0;margin:auto;width:min(74%,280px);aspect-ratio:3/4;border-radius:14px;
  display:grid;place-items:end center;padding-bottom:22px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;
  box-shadow:0 20px 44px -18px rgba(43,33,24,.55);transition:transform .3s ease;
}
.hroJ__card--1{background:linear-gradient(160deg,#c98b4b,#8d5a29);transform:rotate(4deg) translateX(6%)}
.hroJ__card--2{background:linear-gradient(160deg,#7f9a6d,#4b6440);transform:rotate(-5deg) translateX(-10%) translateY(-4%)}
.hroJ__card--3{background:linear-gradient(160deg,#8fa8bd,#4f6b83);transform:rotate(11deg) translateX(18%) translateY(4%)}
.hroJ__stack:hover .hroJ__card--1{transform:rotate(2deg) translateX(2%)}
.hroJ__stack:hover .hroJ__card--2{transform:rotate(-9deg) translateX(-18%) translateY(-6%)}
.hroJ__stack:hover .hroJ__card--3{transform:rotate(15deg) translateX(26%) translateY(6%)}
@media (max-width:800px){ .hroJ__in{grid-template-columns:1fr} .hroJ__stack{height:340px} }