/* Office 3D: the approved sample is visible in the opening section. */
.hero-office{padding-bottom:36px}
.office-hero-preview{min-width:0;margin-top:26px}
.office-hero-preview>a{position:relative;display:block;overflow:hidden;border-radius:8px;background:#303030;border:1px solid var(--line)}
.office-hero-preview img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
.office-hero-open{position:absolute;right:12px;bottom:12px;padding:10px 16px;background:#fff;color:var(--ink);border-radius:4px;font-size:13px;font-weight:700}
.office-hero-preview figcaption{margin-top:10px;color:var(--sub);font-size:12px;line-height:1.7}
.office-hero-preview a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(min-width:820px){.office-hero-preview{margin-top:0}.office-hero-preview img{aspect-ratio:4/3}.hero-office{padding-top:calc(var(--bar) + 42px);padding-bottom:48px}}
@media(max-width:819px){.hero-office{padding-top:calc(var(--bar) + 22px)}.hero-office .hero-cta{margin-top:20px}.hero-office .lead{font-size:14px;line-height:1.9;margin-top:14px}}

/* 2026-09-20 ヒーローを濃紺にして、3Dサンプルを本文より先に置く */
.hero-office.hero-dark{padding-bottom:42px}
.hero-office .office-hero-preview>a{border-color:rgba(217,223,231,.2);background:#0E1822;box-shadow:0 24px 54px rgba(0,0,0,.44)}
.hero-office .office-hero-preview figcaption{color:var(--onink-sub);margin-top:13px}
.hero-office .office-hero-open{
  right:11px;bottom:11px;padding:0 15px;height:31px;
  display:inline-flex;align-items:center;border-radius:999px;
  background:rgba(251,250,247,.95);font-size:11.5px;font-weight:800;letter-spacing:.08em;
}
.hero-office .office-hero-preview>a:hover .office-hero-open{background:#fff}
@media(max-width:819px){
  .hero-office .hero-cta{margin-top:24px}
  .hero-office .office-hero-preview{margin-top:24px}
}
@media(min-width:820px){
  /* パソコンは画面1枚ぶん。中身は本文と同じ幅の中で中央にそろえる */
  .hero-office.hero-dark{
    min-height:100svh;display:flex;align-items:center;
    padding-top:calc(var(--bar) + 28px);padding-bottom:34px;
  }
  .hero-office > .wrap{width:100%}
  .hero-office .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
  .hero-office .inner > div:first-child{order:1;max-width:100%}
  .hero-office .lead{max-width:46em;margin-left:auto;margin-right:auto}
  .hero-office .hero-cta{order:2;justify-content:center;margin-top:26px}
  .hero-office .office-hero-preview{order:3;width:100%;margin-top:32px}
  .hero-office .office-hero-preview>a{
    width:min(100%, calc((100svh - 480px) * 2));
    margin:0 auto;border-radius:10px;border:1px solid rgba(217,223,231,.2);
  }
  .hero-office .office-hero-preview img{aspect-ratio:2 / 1;object-position:50% 52%}
  .hero-office .office-hero-open{right:13px;bottom:13px}
  .hero-office .office-hero-preview figcaption{max-width:none;margin-left:0;text-align:center;margin-top:13px}
}