@charset "UTF-8";

:root {
  --blue: #168fe8;
  --white: #ffffff;
  --max-width: 1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-width:320px;min-height:100%;overflow-x:hidden;
  background:var(--blue);color:var(--white);
  font-family:"BIZ UDPGothic","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;
}
button,a{font:inherit}
.home{position:relative;width:100%;min-height:100svh;overflow:hidden;background:var(--blue)}
.hero-picture{position:absolute;inset:0;z-index:0}
.hero-picture img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center center
}
.home::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,91,178,.09) 0%,rgba(0,91,178,.03) 31%,rgba(0,0,0,0) 58%)
}
.hero-content{
  position:relative;z-index:2;width:min(calc(100% - 48px),var(--max-width));
  margin:0 auto;padding-top:clamp(38px,5.4vh,72px)
}
.hero-header{display:flex;justify-content:center}
.hospital-logo{
  display:block;width:clamp(300px,31vw,470px);height:auto;max-height:145px;object-fit:contain
}
.entrance-nav{
  width:min(100%,910px);margin:clamp(22px,3vh,38px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,20px)
}
.entrance-button{
  position:relative;appearance:none;min-height:58px;padding:12px 26px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid rgba(255,255,255,.98);border-radius:10px;
  background:rgba(16,126,221,.14);color:#fff;text-decoration:none;text-align:center;
  font-size:clamp(17px,1.35vw,22px);font-weight:700;letter-spacing:.02em;line-height:1.25;
  cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.04),inset 0 0 0 1px rgba(255,255,255,.03);
  transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease
}
.entrance-button:hover{
  color:#0877c9;background:rgba(255,255,255,.97);border-color:#fff;
  transform:translateY(-3px);box-shadow:0 9px 24px rgba(0,62,115,.20)
}
.entrance-button:focus-visible{
  color:#0877c9;background:#fff;outline:4px solid rgba(255,255,255,.45);
  outline-offset:4px;transform:translateY(-2px)
}
.entrance-button:active{transform:translateY(0)}
button.entrance-button{width:100%}
@media (max-width:900px){
  .hero-content{width:min(calc(100% - 32px),var(--max-width));padding-top:34px}
  .hospital-logo{width:min(440px,58vw)}
  .entrance-nav{width:min(100%,760px);gap:10px}
  .entrance-button{min-height:54px;padding-inline:12px;border-width:2px;font-size:16px}
}
@media (max-width:640px){
  .home{min-height:100svh}
  .hero-picture img{object-position:54% center}
  .hero-content{width:calc(100% - 28px);padding-top:26px}
  .hospital-logo{width:min(390px,86vw)}
  .entrance-nav{margin-top:20px;grid-template-columns:1fr;gap:10px}
  .entrance-button{min-height:52px;font-size:17px;background:rgba(10,113,202,.32)}
}
@media (prefers-reduced-motion:reduce){.entrance-button{transition:none}}