/* Mobile browser polish — iPhone / in-app browser safe layout. */
html,body{width:100%;overflow-x:clip}body{min-height:100svh;display:flex;flex-direction:column}.foot{margin-top:auto;padding-bottom:max(26px,env(safe-area-inset-bottom))}
button,a{-webkit-tap-highlight-color:transparent}

@media(max-width:860px){
  .wrap{padding-inline:clamp(20px,5.5vw,28px)}
  .page-index .hero-in{padding-inline:clamp(20px,5.5vw,28px)}
  .page-index .hero h1{white-space:normal!important;max-width:100%!important;font-size:clamp(34px,9vw,46px)!important;line-height:1.18;overflow-wrap:anywhere}
  .page-index .hero p.lead{font-size:clamp(16px,4.25vw,18px);line-height:1.8}
  .label{letter-spacing:.14em}
  .crumb,.banner .en{letter-spacing:.13em}
  .foot{padding-top:42px}
}

@media(max-width:560px){
  .brand-name{letter-spacing:.1em}
  .brand-sub{letter-spacing:.18em}
  .banner h1,.h-sec{overflow-wrap:anywhere}
  .foot-bar{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

/* The dialog keeps a stable height in Safari, LINE and Chrome; only its text scrolls. */
@media(max-width:860px){
  .news-modal{width:calc(100% - 24px);height:min(88svh,760px);max-height:calc(100svh - 24px);grid-template-rows:minmax(0,39%) minmax(0,1fr)}
  .news-modal>img{height:100%;max-height:none;object-fit:cover}
  .news-modal-body{padding:22px 22px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .news-modal h2{font-size:clamp(25px,7vw,34px);line-height:1.28}
  .news-modal-body>p:last-child{font-size:16px;line-height:1.8}
  .news-modal-close{top:10px;right:10px;width:40px;height:40px;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .news-modal-close:focus{outline:none}
}