/* Let the hero span the viewport while retaining the existing content width. */
main{max-width:none;width:100%;padding:0}
main>.hero{width:100%;padding-inline:max(36px,calc((100% - 1216px)/2 + 36px))}
main>section{width:calc(100% - 64px);max-width:1068px;margin-inline:auto}
@media(max-width:720px){
  main>.hero{padding-inline:20px}
  main>section{width:calc(100% - 36px)}
}

/* Background artwork stays fully visible without determining hero height. */
main>.hero{position:relative;isolation:isolate;aspect-ratio:auto;min-height:360px;height:auto;padding-block:28px;display:flex;align-items:center;background:#08111e url("images/usbcam-hero.png") right center / contain no-repeat}
main>.hero:after{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,17,30,.96) 0%,rgba(8,17,30,.86) 40%,rgba(8,17,30,.12) 78%)}
main>.hero .hero-copy{position:relative;z-index:1;max-width:56%;text-shadow:0 1px 5px #0008}
main>.hero h1{font-size:clamp(26px,2.7vw,36px);line-height:1.4;margin:12px 0}
main>.hero p{font-size:16px;line-height:1.7;margin:0}
main>.hero .hero-link{margin-top:18px;min-height:44px;text-shadow:none}
main>.hero .hero-image{display:none}
@media(max-width:720px){
 main>.hero{min-height:360px;padding:24px 20px;align-items:flex-start;background-position:center bottom}
 main>.hero .hero-copy{max-width:none;width:100%;padding:0}
 main>.hero h1{font-size:clamp(24px,5.8vw,30px);line-height:1.35;margin:10px 0}
 main>.hero p{font-size:14px;line-height:1.6}
 main>.hero .hero-link{margin-top:14px}
 main>.hero:after{background:linear-gradient(180deg,rgba(8,17,30,.96),rgba(8,17,30,.84) 58%,rgba(8,17,30,.25))}
}

/* ポータルのナビ帯を親サイトと同じ中央寄せ1068pxに揃える。
   Next.jsが生成したCSSの nav{padding:13px 5%} は画面幅に比例するため、
   画面が広いほど親ヘッダーから左へ外れてしまう。生成物は直接触らずここで上書きする。 */
body > nav { padding-inline: max(20px, calc((100vw - 1068px) / 2)) !important; }