*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff}
body{font-family:Arial,"Noto Sans JP",sans-serif}

.app{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:18px 0;
  background:#fff;
}

.page{display:none;width:100%}
.page.active{display:flex;justify-content:center}

.panel{
  position:relative;
  width:min(96vw,1250px);
  aspect-ratio:3/2;
  overflow:hidden;
  background:#fff;
}

.panel-image,.home-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.home-layer{opacity:0}
#home.play .brand-layer{animation:fadeOnly .8s ease forwards}
#home.play .map-layer{animation:fadeOnly .7s ease .8s forwards}
#home.play .copy-layer{animation:fadeOnly .6s ease 1.5s forwards}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

.menu-zones{
  position:absolute;
  z-index:30;
  left:55%;
  right:1.5%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.normal-menu{top:1%;height:12%}
.wide-menu{top:0;height:18%}

.menu-zones button{
  border:0;
  background:transparent;
  cursor:default;
  padding:0;
}

.phone-zone,.mail-zone{
  position:absolute;
  z-index:35;
  left:18%;
  right:8%;
  height:18%;
  border-radius:12px;
  cursor:pointer;
}
.phone-zone{top:36%}
.mail-zone{top:54%}

.dynamic-copyright{
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  z-index:8;
  text-align:center;
  color:#fff;
  font:400 11px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:.02em;
  pointer-events:none;
}

@media(max-width:768px){
  .app{padding:0}
  .panel{width:100vw}
  .dynamic-copyright{bottom:4px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .home-layer{opacity:1!important;animation:none!important}
}