* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #f3f3f3;
}

html {
  scroll-behavior: smooth;
}

body {
  padding-top: min(5.338vw, 82px);
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.fixed-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: min(5.338vw, 82px);
  background: #fff;
  overflow: hidden;
}

.header-board,
.artboard {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.header-board,
.page-frame:not(.page-square) .artboard {
  max-width: 1536px;
}

.page-square .artboard {
  max-width: 1254px;
}

.page-square {
  margin-top: clamp(16px, 2.5vw, 32px);
}

.header-board img,
.page-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.site-pages,
.page-frame {
  width: 100%;
}

.page-frame {
  background: #fff;
  line-height: 0;
}

.anchor-marker {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: min(6.2vw, 96px);
}

.top-anchor { top: 0; }
.business-anchor { top: 56.1%; }
.ceo-anchor { top: 58%; }
.company-anchor { top: 43%; }

.hotspots,
.contact-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot,
.field,
.send-button {
  position: absolute;
  pointer-events: auto;
}

.hotspot {
  display: block;
  background: transparent;
}

.header-hotspots .logo-link { left: 2.9%; top: 18%; width: 12.7%; height: 68%; }
.header-hotspots .nav-about { left: 39.5%; top: 38%; width: 4.4%; height: 44%; }
.header-hotspots .nav-business { left: 45.6%; top: 38%; width: 5.8%; height: 44%; }
.header-hotspots .nav-portfolio { left: 52.4%; top: 38%; width: 6.8%; height: 44%; }
.header-hotspots .nav-history { left: 60.5%; top: 38%; width: 5.6%; height: 44%; }
.header-hotspots .nav-ceo { left: 67.5%; top: 38%; width: 3.6%; height: 44%; }
.header-hotspots .nav-company { left: 72.8%; top: 38%; width: 6.2%; height: 44%; }
.header-hotspots .nav-news { left: 79.9%; top: 38%; width: 4.2%; height: 44%; }
.header-hotspots .nav-contact { left: 84.9%; top: 22%; width: 7.3%; height: 64%; }

/* Page 1 body is cropped by 82px from the original 1536x1024 page. */
.home-scroll { left: 3.9%; top: 32.7%; width: 7.6%; height: 5.4%; }
.exit-read { left: 3.6%; top: 44.2%; width: 14.2%; height: 9.5%; }
.business-investment { left: 3.8%; top: 71.6%; width: 20.2%; height: 25.0%; }
.business-development { left: 26.2%; top: 71.6%; width: 20.8%; height: 25.0%; }
.business-ma { left: 49.1%; top: 71.6%; width: 20.1%; height: 25.0%; }
.business-consulting { left: 71.6%; top: 71.6%; width: 21.0%; height: 25.0%; }

/* Page 2 body is cropped by 82px from the original 1536x1024 page. */
.portfolio-card-1 { left: 2.4%; top: 19.1%; width: 22.1%; height: 37.9%; }
.portfolio-card-2 { left: 25.0%; top: 19.1%; width: 24.0%; height: 37.9%; }
.portfolio-card-3 { left: 49.6%; top: 19.1%; width: 24.2%; height: 37.9%; }
.portfolio-card-4 { left: 74.4%; top: 19.1%; width: 22.8%; height: 37.9%; }
.ceo-read { left: 4.6%; top: 86.5%; width: 10.2%; height: 4.6%; }

/* Page 3 top segment is cropped at CONTACT. */
.ir-history-link {
  position: absolute;
  left: 58.8%;
  top: 39.4%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e60012;
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
}

.ir-history-link:hover {
  opacity: 0.72;
}

.ir-icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 16px;
  border: 2px solid #e60012;
}

.ir-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #e60012;
  border-right: 2px solid #e60012;
}

.news-board {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

/* Contact/footer coordinates are relative to the cropped contact image. */
.footer-about { left: 32.0%; top: 85.8%; width: 4.0%; height: 6.9%; }
.footer-business { left: 38.0%; top: 85.8%; width: 5.0%; height: 6.9%; }
.footer-portfolio { left: 45.0%; top: 85.8%; width: 5.8%; height: 6.9%; }
.footer-history { left: 53.3%; top: 85.8%; width: 4.8%; height: 6.9%; }
.footer-ceo { left: 60.1%; top: 85.8%; width: 3.0%; height: 6.9%; }
.footer-company { left: 65.0%; top: 85.8%; width: 5.6%; height: 6.9%; }
.footer-news { left: 72.5%; top: 85.8%; width: 4.1%; height: 6.9%; }
.footer-contact { left: 78.1%; top: 85.8%; width: 5.1%; height: 6.9%; }

.field {
  border: 0;
  outline: 0;
  background: transparent;
  color: #111;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 500;
  line-height: 1.35;
  padding: 0.65% 0.8%;
  resize: none;
}

.field:focus {
  outline: 1px solid rgba(230, 0, 18, 0.35);
  background: rgba(255, 255, 255, 0.18);
}

.send-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.name-field { left: 4.4%; top: 32.2%; width: 21.0%; height: 11.2%; }
.company-field { left: 26.8%; top: 32.2%; width: 20.4%; height: 11.2%; }
.email-field { left: 48.8%; top: 32.2%; width: 20.9%; height: 11.2%; }
.tel-field { left: 71.1%; top: 32.2%; width: 24.2%; height: 11.2%; }
.message-field { left: 4.4%; top: 46.4%; width: 73.0%; height: 20.5%; }
.send-button { left: 80.4%; top: 53.6%; width: 14.8%; height: 12.9%; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}