/* hero block. Page-specific declaration differences are scoped with data-page. */
.hero{padding:96px 0 0;}
.hero__grid{display:grid; grid-template-columns:minmax(0,1fr) 680px; gap:40px; align-items:center;}
.hero__copy{transform:translateY(-30px);}
.hero h1{width:max-content; position:relative; z-index:2;
      font-family:var(--display); font-size:40px; font-weight:700; letter-spacing:0.02em; line-height:1.6;
      text-shadow:0 0 14px rgba(255,255,255,0.95), 0 0 6px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.9);}
.hero h1 em{font-style:normal; color:var(--accent-deep);}
.hero__label{display:block; margin-top:24px; padding-left:20px; position:relative; z-index:2; font-size:19px; font-weight:500; letter-spacing:0.06em; line-height:1.8; color:var(--ink-soft);}
.hero__photo{position:relative; padding-right:110px;}
.hero__panda{position:absolute; left:-24px; bottom:-14px; width:200px; rotate:-3deg; z-index:3; pointer-events:none;}
.hero__entry{width:900px; margin:60px auto 0; display:flex; align-items:center; justify-content:center; gap:22px; text-align:center; font-size:20px; font-weight:500; letter-spacing:0.04em; line-height:1.9;}
.hero__actions{--cta-radius:22px; --cta-gold-inset:10px; position:relative;
      width:900px; margin:24px auto 0; padding:30px 44px 30px 52px;
      display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; align-items:center;
      border-radius:var(--cta-radius); background:rgba(255,255,255,0.94);
      box-shadow:0 18px 44px rgba(40,34,77,0.10), 0 2px 6px rgba(40,34,77,0.04);}
/* お問い合わせのCTAカードと同じ、内側の細い金の線。 */
.hero__actions::after{content:""; position:absolute; inset:var(--cta-gold-inset); pointer-events:none;
      border-radius:calc(var(--cta-radius) - var(--cta-gold-inset)); padding:1px;
      background:linear-gradient(135deg,
        rgba(201,169,97,0) 0%, rgba(201,169,97,.80) 16%, rgba(212,188,139,.28) 36%,
        rgba(201,169,97,.88) 56%, rgba(201,169,97,.22) 78%, rgba(201,169,97,0) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite:exclude;}

@media (max-width:960px){
  .hero__copy{transform:none;}
}