@font-face {
  font-family: 'Hitachi Sans';
  src: url('/common/fonts/HitachiSans-Regular.woff2') format('woff2'),
       url('/common/fonts/HitachiSans-Regular.woff') format('woff'),
       url('/common/fonts/HitachiSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hitachi Sans';
  src: url('/common/fonts/HitachiSans-Italic.woff2') format('woff2'),
       url('/common/fonts/HitachiSans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Hitachi Sans';
  src: url('/common/fonts/HitachiSans-Bold.woff2') format('woff2'),
       url('/common/fonts/HitachiSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Hitachi Sans';
  src: url('/common/fonts/HitachiSans-BoldItalic.woff2') format('woff2'),
       url('/common/fonts/HitachiSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
html,
:host {
  line-height: 1.2;
}

:root {
  --letter-spacing: 0rem;
}

body {
	font-family: 'Hitachi Sans', 'Noto Sans', Arial, Helvetica, sans-serif;
}

a[href="#"], a[href="javascript:"] {
  cursor: pointer;
}

.Header__NavLogo:lang(en) {
    font-weight: 700;
    max-width: unset;
}

.TopHero__ScrollDownText {
  position: absolute;
  bottom: 3.75rem;
  left: 50%;
  color: white;
  font-size: 70%;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: var(--red-primary);
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce2 {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(10px);
  }
  60% {
    transform: translateX(-50%) translateY(5px);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px); /* distance to bounce */
  }
}

.TopHero__Background {
    height: calc(100vh - 10rem - (var(--header-nav-height) * 2));
}

.TopHero__Background.is-fixed {
    height: calc(100vh - 10rem - var(--header-nav-height));
}

.LinkTileProductEn__LinkListWrapper p {
    font-size: 0.85rem;
    color: var(--gray-100);
}

.LinkTileProductEn__Link:hover .LinkTileProductEn__LinkListWrapper p {
    display: none;
}

.LinkTileProductEn__LinkList li {
  white-space: nowrap;
}

.fui-row:not(.fui-row-empty):not(:last-child) {
  --fui-field-gutter: -1px !important;
}

.fui-label-left-input, .fui-label-right-input {
  border: 1px solid var(--gray-200) !important;
}

.fui-label-left-input:has(.Heading02) {
  border: 0 !important;
}

.fui-label-left-input .fui-field-container, .fui-label-right-input .fui-field-container,
.fui-label-left-input .fui-fieldset, .fui-label-right-input .fui-fieldset {
  display: block !important;
}

.fui-label-left-input .fui-label, .fui-label-left-input .fui-legend,
.fui-label-right-input .fui-label, .fui-label-right-input .fui-legend {
  flex: 0 0 100%;
  max-width: 100%;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  --fui-label-margin: 0;
  padding: 0.65rem 1rem;
  background-color: var(--gray-50);
}

.fui-label-left-input .fui-legend, .fui-label-right-input .fui-legend {
  width: 100%;
}

.fui-label-left-input .fui-input-wrapper,
.fui-label-right-input .fui-input-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  --fui-field-gutter: 0;
}

.fui-label-left-input .fui-fieldset > .fui-input-wrapper,
.fui-label-right-input .fui-fieldset > .fui-input-wrapper {
  --fui-input-padding: 1rem;
  padding: var(--fui-input-padding);
}

.fui-label-left-input .fui-fieldset > .fui-input-wrapper .fui-field-rows,
.fui-label-right-input .fui-fieldset > .fui-input-wrapper .fui-field-rows {
  margin: -1rem;
}

.fui-input, .fui-select {
  border: 0 !important;
  --fui-input-padding: 1rem;
  --fui-input-font-size: 1rem;
  font-weight: normal;
}

.fui-instructions-below-input .fui-instructions, .fui-limit-text {
  padding: 0.65rem 1rem;
  --fui-instructions-margin: 0;
}

.fui-row.fui-page-row + .fui-row.fui-page-row .Heading02 {
  padding-top: 2.5rem;
}

.fui-input-wrapper > .fui-checkbox {
  margin-top: 1.5rem;
}

@media screen and (min-width: 60em), print {
  .Header__MenuButton {
    font-size: 90%;
  }
  .TopHero {
    height: calc(100vh - var(--header-height) - 10rem);
  }
  .ImageColumn__Image {
    aspect-ratio: 752/400;
  }
  .ImageColumn__Contents {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  :not([class^=Heading]):not([class*=" Heading"]:not(.ImageColumn)) + .ImageColumn {
    margin-top: 3rem;
  }
  .Section.Section--h2:not(:first-child) {
    margin-top: 3rem;
  }
  .LinkTile02 .VideoModal__VideoPlayBack > span {
    width: 3rem;
    height: 3rem;
  }
  .LinkTile02 .VideoModal__VideoPlayBack > span::before {
    width: 3rem;
    height: 3rem;
  }
  .LinkTile02 .VideoModal__VideoPlayBack > span::after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .LinkTile02:has(.VideoModal) .LinkTile02__Link {
    padding: 0;
  }
  .LinkTile02 .VideoModal__Title {
    bottom: 1rem;
    margin-left: 1rem;
    font-size: 1rem;
  }
  .fui-label-left-input .fui-field-container, .fui-label-right-input .fui-field-container,
  .fui-label-left-input .fui-fieldset, .fui-label-right-input .fui-fieldset {
    position: relative;
    display: flex !important;
    align-items: stretch !important;
  }
  .fui-label-left-input .fui-label, .fui-label-left-input .fui-legend,
  .fui-label-right-input .fui-label, .fui-label-right-input .fui-legend {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 1.5rem;
    border-right: 1px solid var(--gray-200);
  }
  .fui-label-left-input .fui-legend, .fui-label-right-input .fui-legend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .fui-label-left-input > .fui-input-wrapper,
  .fui-label-right-input > .fui-input-wrapper {
    flex: 0 0 65%;
    max-width: 65%;
  }
  .fui-label-left-input .fui-fieldset > .fui-input-wrapper,
  .fui-label-right-input .fui-fieldset > .fui-input-wrapper {
    margin-left: 35%;
    --fui-input-padding: 1.5rem;
  }
  .fui-label-left-input .fui-fieldset > .fui-input-wrapper .fui-field-rows,
  .fui-label-right-input .fui-fieldset > .fui-input-wrapper .fui-field-rows {
    margin: -1.5rem;
  }

  .fui-input, .fui-select {
    --fui-input-padding: 1.5rem;
  }
  .fui-instructions-below-input .fui-instructions, .fui-limit-text {
    padding: 0.65rem 1.5rem;
  }
}