@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0)
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0
}

body {
  -webkit-text-size-adjust: 100%
}

li {
  list-style: none
}

a, button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

caption, th {
  text-align: left
}

button {
  padding: 0;
  border-style: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1
}

input, select, textarea {
  padding: 0;
  border-style: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1
}

strong, em, b {
  font-weight: bold;
  font-style: normal
}

*, *::before, *::after {
  box-sizing: border-box
}

html {
  font-size: 62.5%
}

body {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  font-feature-settings: "palt";
  letter-spacing: .03em;
  line-height: 1
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem
  }
}

@media screen and (min-width: 768px) {
  .pc-hidden {
    display: none
  }
}

@media screen and (max-width: 767px) {
  .sp-hidden {
    display: none
  }
}

.mt0 {
  margin-top: 0px !important
}

.mt10 {
  margin-top: 10px !important
}

.mt20 {
  margin-top: 20px !important
}

.mt30 {
  margin-top: 30px !important
}

.mt40 {
  margin-top: 40px !important
}

.mt50 {
  margin-top: 50px !important
}

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

@media screen and (max-width: 767px) {
  .mt0 {
    margin-top: 0vw !important
  }

  .mt10 {
    margin-top: 2vw !important
  }

  .mt20 {
    margin-top: 4vw !important
  }

  .mt30 {
    margin-top: 6vw !important
  }

  .mt40 {
    margin-top: 8vw !important
  }

  .mt50 {
    margin-top: 10vw !important
  }

  .mt60 {
    margin-top: 12vw !important
  }

  .mt70 {
    margin-top: 14vw !important
  }

  .mt80 {
    margin-top: 16vw !important
  }

  .mt90 {
    margin-top: 18vw !important
  }

  .mt100 {
    margin-top: 20vw !important
  }

  .mt110 {
    margin-top: 22vw !important
  }

  .mt120 {
    margin-top: 24vw !important
  }

  .mt130 {
    margin-top: 26vw !important
  }

  .mt140 {
    margin-top: 28vw !important
  }

  .mt150 {
    margin-top: 30vw !important
  }
}

.bg-image {
  background-position: 50% 50%;
  background-size: cover
}

.bg-image img {
  display: none
}

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  opacity: 1;
  z-index: 1
}

.splide--rtl {
  direction: rtl
}

.splide__track--ttb>.splide__list {
  display: block
}

.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
  display: none
}

.splide__progress__bar {
  width: 0
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative
}

.splide__slide img {
  vertical-align: bottom
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

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

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0
}

.splide__progress {
  display: block;
  position: relative;
  height: 5px;
  background-color: #cfddec;
  overflow: hidden
}

.splide__progress .splide__bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 5px;
  background-color: #0f53a0;
  transition: left .3s ease-in-out
}

#business .splide__progress {
  display: none
}

@media screen and (max-width: 767px) {
  .splide__progress {
    margin: 30px 6.7vw 0
  }

  #business .splide__progress {
    display: block
  }
}

#project .controls {
  margin-top: 50px;
  padding: 0 80px
}

#project .controls>.inner {
  position: relative;
  max-width: 1064px;
  margin: 0 auto
}

#project .controls .splide__arrows {
  display: flex;
  justify-content: space-between
}

#project .controls .splide__arrows .splide__arrow {
  display: block;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: #0f53a0;
  overflow: hidden;
  text-indent: -400px;
  transition: background-color .2s ease-out
}

#project .controls .splide__arrows .splide__arrow:hover, #project .controls .splide__arrows .splide__arrow:active {
  background-color: #0a0a43
}

#project .controls .splide__arrows .splide__arrow:disabled {
  background-color: #cfddec;
  pointer-events: none
}

#project .controls .splide__arrows .splide__arrow.splide__arrow--prev::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: scale(1, 0.6) rotate(-45deg)
}

#project .controls .splide__arrows .splide__arrow.splide__arrow--next::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: scale(1, 0.6) rotate(45deg)
}

#project .controls .splide__progress {
  position: absolute;
  left: 85px;
  right: 85px;
  top: calc(50% - 2px)
}

@media screen and (max-width: 767px) {
  #project .controls {
    margin-top: 0;
    padding: 0
  }

  #project .controls>.inner {
    max-width: none;
    margin: 0
  }

  #project .controls .splide__arrows {
    display: none
  }

  #project .controls .splide__progress {
    position: relative;
    left: auto;
    right: auto;
    top: auto
  }
}

h2 {
  color: #0f53a0;
  font-size: 6.2rem;
  font-weight: bold;
  letter-spacing: -0.04em;
  line-height: 1.2
}

@media screen and (max-width: 767px) {
  h2 {
    font-size: 4.2rem
  }
}

.mv {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 37% 63%;
  position: relative;
  height: 100vh;
  margin-left: 188px
}

.mv .txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0 0 12vh 9%
}

.mv .txt img {
  display: block;
  width: min(35%, 65vh)
}

.mv .txt p {
  margin-top: 1.8em;
  color: #fff;
  font-size: max(1.53vw, 1.5rem);
  font-weight: bold;
  line-height: 1.7
}

.mv .img {
  position: relative;
  z-index: 1;
  overflow: hidden
}

.mv .img li {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  transition: opacity .7s cubic-bezier(0, 0.8, 0.56, 1), transform .5s cubic-bezier(0, 0.8, 0.56, 1)
}

.mv .img li:first-child {
  z-index: 2
}

.mv .img li.is-shown {
  opacity: 1;
  transform: translate(0, 0)
}

.mv .img_1 {
  grid-column: 1/2;
  grid-row: 1/3
}

.mv .img_1 li {
  opacity: 0;
  transform: translate(-12%, 0)
}

.mv .img_1 li:nth-child(1) {
  background-image: url(../images/pc/mv_1_1.jpg)
}

.mv .img_1 li:nth-child(2) {
  background-image: url(../images/pc/mv_1_2.jpg)
}

.mv .img_1 li:nth-child(3) {
  background-image: url(../images/pc/mv_1_3.jpg)
}

.mv .img_2 {
  grid-column: 2/3;
  grid-row: 1/2
}

.mv .img_2 li {
  opacity: 0;
  transform: translate(0, -20%)
}

.mv .img_2 li:nth-child(1) {
  background-image: url(../images/pc/mv_2_1.jpg)
}

.mv .img_2 li:nth-child(2) {
  background-image: url(../images/pc/mv_2_2.jpg)
}

.mv .img_2 li:nth-child(3) {
  background-image: url(../images/pc/mv_2_3.jpg)
}

.mv .img_3 {
  grid-column: 2/3;
  grid-row: 2/3
}

.mv .img_3 li {
  opacity: 0;
  transform: translate(0, 15%)
}

.mv .img_3 li:nth-child(1) {
  background-image: url(../images/pc/mv_3_1.jpg)
}

.mv .img_3 li:nth-child(2) {
  background-image: url(../images/pc/mv_3_2.jpg)
}

.mv .img_3 li:nth-child(3) {
  background-image: url(../images/pc/mv_3_3.jpg)
}

.mv .indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% - 160px);
  height: 5px;
  background-color: rgba(10, 10, 67, .35)
}

.mv .indicator span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0f53a0;
  transform-origin: 0 0;
  animation: mv-indicator 4s both linear infinite
}

.mv .language {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 160px;
  height: 60px;
  padding-left: 47px;
  background-color: #fff;
  background-image: url(../images/icon_global.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 22px 50%
}

.mv .language li {
  width: 32px;
  color: #0f53a0;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase
}

.mv .language li a {
  display: block;
  padding: 1em 0;
  color: #0f53a0;
  transition: color .3s
}

.mv .language li a:hover, .mv .language li a:active {
  color: #0a0a43
}

@media screen and (max-width: 899px) {
  .mv {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50% 25% 25%;
    height: 100svh;
    margin-left: 40px
  }

  .mv .txt {
    padding: 0 8% 100px 8%
  }

  .mv .txt img {
    width: min(94%, 45vh)
  }

  .mv .txt p {
    margin-top: 1.3em;
    font-size: min(5.87vw, 2.4rem)
  }

  .mv .txt p br {
    display: none
  }

  .mv .img_1 {
    grid-column: 1/2;
    grid-row: 1/2
  }

  .mv .img_1 li {
    transform: translate(-75%, 0);
    transition: opacity .7s 0s cubic-bezier(0, 0.8, 0.56, 1), transform .5s 0s cubic-bezier(0, 0.8, 0.56, 1)
  }

  .mv .img_1 li:nth-child(1) {
    background-image: url(../images/sp/mv_1_1.jpg)
  }

  .mv .img_1 li:nth-child(2) {
    background-image: url(../images/sp/mv_1_2.jpg)
  }

  .mv .img_1 li:nth-child(3) {
    background-image: url(../images/sp/mv_1_3.jpg)
  }

  .mv .img_2 {
    grid-column: 1/2;
    grid-row: 2/3
  }

  .mv .img_2 li {
    transform: translate(-75%, 0);
    transition: opacity .7s .1s cubic-bezier(0, 0.8, 0.56, 1), transform .5s .1s cubic-bezier(0, 0.8, 0.56, 1)
  }

  .mv .img_2 li:nth-child(1) {
    background-image: url(../images/sp/mv_2_1.jpg)
  }

  .mv .img_2 li:nth-child(2) {
    background-image: url(../images/sp/mv_2_2.jpg)
  }

  .mv .img_2 li:nth-child(3) {
    background-image: url(../images/sp/mv_2_3.jpg)
  }

  .mv .img_3 {
    grid-column: 1/2;
    grid-row: 3/4
  }

  .mv .img_3 li {
    transform: translate(-75%, 0);
    transition: opacity .7s .2s cubic-bezier(0, 0.8, 0.56, 1), transform .5s .2s cubic-bezier(0, 0.8, 0.56, 1)
  }

  .mv .img_3 li:nth-child(1) {
    background-image: url(../images/sp/mv_3_1.jpg)
  }

  .mv .img_3 li:nth-child(2) {
    background-image: url(../images/sp/mv_3_2.jpg)
  }

  .mv .img_3 li:nth-child(3) {
    background-image: url(../images/sp/mv_3_3.jpg)
  }
}

@keyframes mv-indicator {
  0% {
    opacity: 1;
    transform: scale(0, 100%)
  }

  95% {
    opacity: 1;
    transform: scale(100%, 100%)
  }

  100% {
    opacity: 0;
    transform: scale(100%, 100%)
  }
}

.facebook {
  margin-top: 250px;
  padding: 0 80px
}

.facebook a {
  display: flex;
  max-width: 1064px;
  margin: 0 auto
}

.facebook a .img {
  position: relative;
  width: 50%;
  background-image: url(../images/pc/img_facebook.jpg);
  background-size: cover;
  background-position: 50%
}

.facebook a .img::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #0f53a0;
  opacity: .2;
  transition: opacity .3s ease-out
}

.facebook a .txt {
  width: 50%;
  padding: 70px 45px 30px;
  background-color: #0f53a0;
  background-image: url(../images/icon_facebook.svg);
  background-repeat: no-repeat;
  background-size: 35px;
  background-position: top 30px right 30px;
  transition: background-color .3s ease-out
}

.facebook a .txt img {
  display: block;
  width: 190px
}

.facebook a .txt p {
  margin-top: 30px;
  color: #fff;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2
}

.facebook a:hover .img::after, .facebook a:active .img::after {
  opacity: 0
}

.facebook a:hover .txt, .facebook a:active .txt {
  background-color: #0a0a43
}

.facebook a:hover .txt p, .facebook a:active .txt p {
  color: #fff
}

@media screen and (max-width: 767px) {
  .facebook {
    margin-top: 40vw;
    padding: 0 6.7vw
  }

  .facebook a {
    display: block;
    max-width: none;
    margin: 0
  }

  .facebook a .img {
    width: 100%;
    aspect-ratio: 5/4;
    background-image: url(../images/sp/img_facebook.jpg)
  }

  .facebook a .img::after {
    content: none
  }

  .facebook a .txt {
    width: 100%;
    padding: 22vw 5.3vw 7vw;
    background-position: top 8vw right 8vw;
    transition: none
  }

  .facebook a .txt img {
    display: block;
    width: 190px
  }

  .facebook a .txt p {
    margin-top: 20px;
    font-size: 3.6rem;
    line-height: 1.3
  }

  .facebook a:hover .txt, .facebook a:active .txt {
    background-color: #0f53a0
  }
}

#about {
  margin-top: 190px;
  padding-left: max((100% - 1064px)/2, 80px)
}

#about .txt {
  position: relative;
  z-index: 2;
  padding: 0 80px 0 10%
}

#about .txt h2+p {
  margin-top: 55px;
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.6
}

#about .txt p:last-child {
  max-width: 800px;
  margin-top: 45px;
  font-size: 1.6rem;
  line-height: 2.3
}

#about .img {
  position: relative;
  z-index: 1;
  height: 480px;
  margin-top: -112px;
  background-image: url(../images/pc/img_about.jpg);
  background-size: cover;
  background-position: 50%
}

@media screen and (max-width: 1199px) {
  #about .txt {
    padding-left: 0
  }

  #about .txt h2+p {
    padding-left: 5%
  }

  #about .txt p:last-child {
    padding-left: 5%
  }
}

@media screen and (max-width: 767px) {
  #about {
    margin-top: 40vw;
    padding-left: 0
  }

  #about .txt {
    padding: 0 6.7vw
  }

  #about .txt h2+p {
    margin-top: 30px;
    padding-left: 0;
    font-size: 2.8rem
  }

  #about .txt p:last-child {
    max-width: none;
    margin-top: 30px;
    padding-left: 0;
    font-size: 1.6rem;
    line-height: 2.1
  }

  #about .img {
    height: 128vw;
    margin-top: -54vw;
    background-image: url(../images/sp/img_about.jpg)
  }
}

#business {
  padding: 250px 0 130px;
  background-image: url(../images/bg_business.jpg);
  background-size: auto 1200px;
  background-position: 50% 60px;
  background-repeat: no-repeat
}

#business .txt {
  padding-left: max((100% - 1064px)/2, 80px)
}

#business .txt .inner {
  display: flex;
  padding: 0 80px 0 10%
}

#business .txt p {
  max-width: 700px;
  margin-left: 30px;
  font-size: 1.6rem;
  line-height: 2.3
}

#business .companies {
  margin-top: 100px;
  padding: 0 80px
}

#business .companies>.inner {
  max-width: 1280px;
  margin: 0 auto
}

#business .companies ul {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 2%
}

#business .companies ul li {
  width: 23.5%;
  aspect-ratio: 3/4
}

#business .companies a:not(.map) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 100%;
  padding: 6.5% 7%;
  overflow: hidden
}

#business .companies a:not(.map)::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  transform: scale(1);
  transition: transform .3s ease-out
}

#business .companies a:not(.map)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 200%;
  background: linear-gradient(0deg, rgb(10, 10, 67) 0%, rgb(10, 10, 67) 50%, rgba(10, 10, 67, 0) 100%);
  opacity: .4;
  transform: translateY(0);
  transition: transform .2s ease-out
}

#business .companies a:not(.map) p:first-child {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 3.4rem;
  font-weight: bold
}

#business .companies a:not(.map) p:last-child {
  position: relative;
  z-index: 3;
  margin-top: 1em;
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: normal;
  line-height: 1.6
}

#business .companies a:not(.map) p:last-child::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 12px;
  background-image: url(../images/icon_arrow.svg);
  background-size: contain
}

#business .companies a:not(.map):hover::before, #business .companies a:not(.map):active::before {
  transform: scale(1.15)
}

#business .companies a:not(.map):hover::after, #business .companies a:not(.map):active::after {
  transform: translateY(-50%)
}

#business .companies li:nth-child(1) a::before {
  background-image: url(../images/img_company_1.jpg)
}

#business .companies li:nth-child(2) a::before {
  background-image: url(../images/img_company_2.jpg)
}

#business .companies li:nth-child(3) a::before {
  background-image: url(../images/img_company_3.jpg)
}

#business .companies li:nth-child(4) a::before {
  background-image: url(../images/img_company_4.jpg)
}

#business .companies li:nth-child(5) a::before {
  background-image: url(../images/img_company_5.jpg)
}

#business .companies li:nth-child(6) a::before {
  background-image: url(../images/img_company_6.jpg)
}

#business .companies li:nth-child(7) a::before {
  background-image: url(../images/img_company_7.jpg)
}

#business .companies a.map {
  display: block;
  position: relative;
  height: 100%
}

#business .companies a.map img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
}

#business .companies a.map img:first-child {
  z-index: 1
}

#business .companies a.map img:last-child {
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease-out
}

#business .companies a.map:hover img:last-child, #business .companies a.map:active img:last-child {
  opacity: 1
}

@media screen and (max-width: 1339px) {
  #business .companies a:not(.map) {
    padding: 6.5% 7% 15%
  }

  #business .companies a:not(.map) p:last-child::after {
    bottom: -20px
  }
}

@media screen and (max-width: 1199px) {
  #business .txt .inner {
    padding-left: 0
  }

  #business .companies ul {
    gap: 25px 3.5%
  }

  #business .companies ul li {
    width: 31%
  }

  #business .companies a:not(.map) {
    padding: 6.5% 7%
  }

  #business .companies a:not(.map) p:last-child::after {
    bottom: 0
  }
}

@media screen and (max-width: 819px) {
  #business .txt p {
    max-width: none
  }

  #business .txt p br {
    display: none
  }

  #business .companies ul {
    gap: 25px 4%
  }

  #business .companies ul li {
    width: 48%
  }
}

@media screen and (max-width: 767px) {
  #business {
    padding: 40vw 0;
    background-size: auto 310vw;
    background-position: 50% -10vw
  }

  #business .txt {
    padding-left: 0
  }

  #business .txt .inner {
    display: block;
    padding: 0 6.7vw
  }

  #business .txt p {
    margin: 30px 0 0;
    line-height: 2.1
  }

  #business .companies {
    margin-top: 30px;
    padding: 0
  }

  #business .companies>.inner {
    max-width: none;
    margin: 0
  }

  #business .companies ul {
    flex-wrap: nowrap;
    gap: normal
  }

  #business .companies ul li {
    width: auto
  }

  #business .companies a:not(.map)::before {
    transition: none
  }

  #business .companies a:not(.map)::after {
    transition: none
  }

  #business .companies a:not(.map):hover::before, #business .companies a:not(.map):active::before {
    transform: scale(1)
  }

  #business .companies a:not(.map):hover::after, #business .companies a:not(.map):active::after {
    transform: translateY(0)
  }

  #business .companies a.map img:last-child {
    transition: none
  }

  #business .companies a.map:hover img:last-child, #business .companies a.map:active img:last-child {
    opacity: 0
  }
}

#feature {
  position: relative;
  z-index: 1;
  height: 1000px;
  padding: 130px 80px 0
}

#feature .txt {
  position: relative;
  z-index: 1
}

#feature .txt h2 {
  color: #fff;
  letter-spacing: .02em;
  text-align: center
}

#feature .txt h2+p {
  margin-top: 50px;
  color: #fff;
  font-size: 1.8rem;
  text-align: center
}

#feature .txt h2+p br {
  display: none
}

#feature ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 50px auto 0
}

#feature ul li {
  width: 23.4%
}

#feature ul li img {
  display: block
}

#feature ul li:first-child img, #feature ul li:last-child img {
  margin-top: -20%
}

#feature .bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/pc/bg_feature.jpg);
  background-size: cover;
  background-position: 50% 100%
}

@media screen and (max-width: 767px) {
  #feature {
    height: auto;
    padding: 40vw 0
  }

  #feature .txt h2+p {
    margin-top: 40px;
    padding: 0 4vw;
    line-height: 1.9
  }

  #feature .txt h2+p br {
    display: inline
  }

  #feature ul {
    display: block;
    width: 300px;
    max-width: none;
    margin: 35px auto 0
  }

  #feature ul li {
    width: auto
  }

  #feature ul li:first-child img, #feature ul li:last-child img {
    margin-top: 0
  }

  #feature .bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/sp/bg_feature.jpg)
  }
}

#project {
  position: relative;
  z-index: 2;
  height: 1260px;
  margin-top: -140px;
  background-image: url(../images/bg_project.png);
  background-size: auto 1120px;
  background-position: 50% 130px;
  background-repeat: no-repeat
}

#project .txt {
  padding-left: max((100% - 1064px)/2, 80px)
}

#project .txt h2 {
  letter-spacing: .02em
}

#project .splide {
  margin-top: 60px
}

#project ul {
  display: flex
}

#project ul li {
  width: 300px
}

#project ul li a {
  display: block;
  position: relative;
  height: 100%;
  background-color: #fff
}

#project ul li a::before {
  content: "";
  display: block;
  position: absolute;
  right: 6.7%;
  bottom: 25px;
  width: 29px;
  height: 11px;
  background-image: url(../images/icon_arrow2_b.svg);
  background-size: contain;
  background-position: 50%;
  opacity: 1;
  transition: opacity .3s ease-out
}

#project ul li a::after {
  content: "";
  display: block;
  position: absolute;
  right: 6.7%;
  bottom: 25px;
  width: 29px;
  height: 11px;
  background-image: url(../images/icon_arrow2_db.svg);
  background-size: contain;
  background-position: 50%;
  opacity: 0;
  transition: opacity .3s ease-out
}

#project ul li a:hover::before, #project ul li a:active::before {
  opacity: 0
}

#project ul li a:hover::after, #project ul li a:active::after {
  opacity: 1
}

#project ul li a:hover .img img, #project ul li a:active .img img {
  transform: scale(1.15)
}

#project ul li a:hover .txt, #project ul li a:active .txt {
  color: #0f53a0
}

#project ul li a.disabled {
  pointer-events: none
}

#project ul li a.disabled::before, #project ul li a.disabled::after {
  content: none
}

#project ul li .img {
  aspect-ratio: 3/2;
  overflow: hidden
}

#project ul li .img img {
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1);
  transition: transform .3s ease-out
}

#project ul li .txt {
  padding: 25px 6.7% 75px;
  color: #0a0a43;
  transition: color .3s ease-out
}

#project ul li h3 {
  height: 110px;
  font-size: 3.4rem;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.2
}

#project ul li h3.long-txt {
  height: auto;
  padding-bottom: 30px;
  font-size: 2.7rem
}

#project ul li p {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.5
}

#project ul li p+p {
  margin-top: .8em;
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 2
}

#project ul li h3+p:last-child {
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 2
}

@media screen and (max-width: 767px) {
  #project {
    height: auto;
    margin-top: 10vw;
    padding-bottom: 50vw;
    background-size: auto 120%;
    background-position: 60% -50vw
  }

  #project .txt {
    padding: 0 6.7vw
  }

  #project .splide {
    margin-top: 15vw
  }
}

.cursor {
  position: absolute;
  top: -35px;
  left: -35px;
  z-index: 10;
  width: 70px;
  height: 70px;
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity .3s ease-in-out, transform .05s linear;
  pointer-events: none
}

.cursor img {
  display: block;
  width: 70px;
  transform-origin: 50%;
  transform: scale(0.8);
  transition: transform .3s ease-in-out
}

.cursor.is-shown {
  opacity: 1
}

.cursor.is-shown img {
  transform: scale(1)
}

@media(hover: none) {
  .cursor {
    display: none
  }
}

#career {
  position: relative;
  z-index: 1;
  margin-top: -220px
}

#career picture {
  display: block
}

#career .txt {
  padding: 100px 80px
}

#career .txt .inner {
  display: flex;
  max-width: 1064px;
  margin: 0 auto
}

#career .txt .inner div {
  margin-left: 30px
}

#career .txt h2 {
  letter-spacing: normal
}

#career .txt h3 {
  margin-top: 18px;
  color: #0a0a43;
  font-size: min(3.6rem, 3.7vw);
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.5
}

#career .txt h3 br {
  display: none
}

#career .txt p {
  max-width: 600px;
  margin-top: 40px;
  font-size: 1.6rem;
  letter-spacing: normal;
  line-height: 2.3
}

#career .txt p br {
  display: none
}

@media screen and (max-width: 767px) {
  #career {
    margin-top: 0
  }

  #career .txt {
    padding: 20vw 6.7vw
  }

  #career .txt .inner {
    display: block;
    max-width: none;
    margin: 0
  }

  #career .txt .inner div {
    margin-left: 0
  }

  #career .txt h3 {
    margin-top: 30px;
    font-size: 2.8rem;
    line-height: 1.6
  }

  #career .txt h3 br {
    display: inline
  }

  #career .txt p {
    max-width: none;
    margin-top: 20px;
    line-height: 2.1
  }

  #career .txt p br {
    display: inline
  }
}

#contact {
  display: block;
  position: relative;
  padding: 95px 0 135px;
  background-image: url(../images/bg_dots.png);
  color: #0f53a0;
  font-size: 4.6rem;
  font-weight: bold;
  text-align: center;
  transition: color .2s ease-out
}

#contact::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 12px);
  bottom: 92px;
  width: 24px;
  height: 20px;
  background-image: url(../images/icon_email_b.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .2s ease-out
}

#contact::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 12px);
  bottom: 92px;
  width: 24px;
  height: 20px;
  background-image: url(../images/icon_email_db.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .2s ease-out
}

#contact span {
  display: block;
  margin-top: 1em;
  padding: 0 6.7vw;
  font-size: 1.6rem;
  line-height: 1.6
}

#contact:hover, #contact:active {
  color: #0a0a43
}

#contact:hover::before, #contact:active::before {
  opacity: 0
}

#contact:hover::after, #contact:active::after {
  opacity: 1
}

#companies {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 201;
  width: 100%;
  min-height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s 0s ease-out
}

#companies h2 {
  display: none
}

#companies>.inner {
  position: relative;
  height: calc(100vh - 20px);
  max-height: 900px;
  min-height: 700px;
  aspect-ratio: 5/4;
  background-image: url(../images/map/map.png);
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden
}

#companies>.inner .txt {
  display: flex;
  justify-content: space-between;
  height: 100%;
  transform: scale(1);
  transition: transform .2s
}

#companies>.inner .txt ul {
  width: 300px;
  height: 100%;
  overflow: visible
}

#companies>.inner .txt ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid #cfddec;
  color: #0a0a43;
  cursor: pointer;
  transition: color .3s ease-out
}

#companies>.inner .txt ul li:hover, #companies>.inner .txt ul li.is-active {
  color: #0f53a0
}

#companies>.inner .txt ul li:first-child {
  border-top-style: none
}

#companies>.inner .txt ul li h3 {
  font-size: 2.8rem;
  font-weight: bold
}

#companies>.inner .txt ul li h3 span {
  padding-left: .7em;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: -0.05em
}

#companies>.inner .txt ul li h3+p {
  margin-top: .4em;
  font-size: 1.4rem;
  /* white-space: nowrap */
  line-height: 1.3;
}

#companies>.inner .txt ul li p:last-child {
  margin-top: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.46
}

#companies>.inner .txt ul li p:last-child span {
  display: inline-block
}

#companies>.inner .txt ul li p:last-child span::after {
  content: "/";
  display: inline-block;
  padding: 0 .3em;
  color: #cfddec !important;
  transform: scale(0.6)
}

#companies>.inner .txt ul li p:last-child span:last-child::after {
  content: none
}

#companies>.inner .txt ul li p:last-child .off {
  color: #cfddec !important
}

#companies>.inner .txt ul:first-child li:nth-child(1) {
  height: 22%;
  padding-top: 3%
}

#companies>.inner .txt ul:first-child li:nth-child(2) {
  height: 20%
}

#companies>.inner .txt ul:first-child li:nth-child(3) {
  height: 20%
}

#companies>.inner .txt ul:first-child li:nth-child(4) {
  height: 18%
}

#companies>.inner .txt ul:first-child li:nth-child(5) {
  height: 18%;
  border-top-style: dotted
}

#companies>.inner .txt ul:last-child {
  text-align: right
}

#companies>.inner .txt ul:last-child li:nth-child(1) {
  height: 22%;
  padding-top: 3%
}

#companies>.inner .txt ul:last-child li:nth-child(2) {
  height: 20%
}

#companies>.inner .txt ul:last-child li:nth-child(3) {
  height: 18%
}

#companies>.inner .txt ul:last-child li:nth-child(4) {
  height: 18%;
  border-top-style: dotted
}

#companies>.inner .map {
  position: absolute;
  left: 26.73%;
  top: 0;
  z-index: 1;
  width: 46.26%;
  height: 100%;
  overflow: hidden
}

#companies>.inner .map img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  opacity: 0;
  transition: opacity .4s ease-in-out
}

#companies>.inner .map img.is-shown {
  opacity: 1
}

#companies>.inner .map li {
  display: inline-block;
  position: absolute;
  z-index: 2;
  color: #0f53a0;
  font-size: 1.8rem;
  font-weight: bold;
  opacity: 1;
  transition: opacity .3s ease-out
}

#companies>.inner .map li.is-off {
  opacity: .2
}

#companies>.inner .map li::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: -0.6em;
  width: 1.2em;
  height: 1.5em;
  background-image: url(../images/map/pin.png);
  background-size: 100%;
  background-repeat: no-repeat
}

#companies>.inner .map li:nth-child(1) {
  left: 29.7%;
  top: 18.4%
}

#companies>.inner .map li:nth-child(1)::before {
  left: auto;
  right: -1.4em
}

#companies>.inner .map li:nth-child(2) {
  left: 51%;
  top: 19.3%
}

#companies>.inner .map li:nth-child(3) {
  left: 67%;
  top: 46.8%
}

#companies>.inner .map li:nth-child(4) {
  left: 62.2%;
  top: 79.5%
}

#companies>.inner .map li:nth-child(5) {
  left: 51.2%;
  top: 83.3%
}

#companies>.inner .map li:nth-child(5)::before {
  left: -0.1em;
  top: -1.6em
}

#companies>.inner .map li:nth-child(6) {
  left: 24%;
  top: 84.6%
}

#companies>.inner .map li:nth-child(6)::before {
  left: auto;
  right: -1.4em
}

#companies>.inner .map .default-pins {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url(../images/map/pin_none.png);
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .4s ease-in-out
}

#companies>.inner .map .default-pins.is-hidden {
  opacity: 0
}

#companies .splide {
  display: none
}

#companies .close {
  display: block;
  position: fixed;
  right: 40px;
  top: 40px;
  overflow: hidden;
  width: 40px;
  height: 40px;
  text-indent: -400px
}

#companies .close::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon_close.png);
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .2s
}

#companies .close::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon_close_on.png);
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .2s
}

#companies .close:hover::before, #companies .close:active::before {
  opacity: 0
}

#companies .close:hover::after, #companies .close:active::after {
  opacity: 1
}

#companies.is-shown {
  position: relative;
  pointer-events: auto;
  opacity: 1;
  transition: opacity .7s .2s ease-out
}

@media screen and (min-width: 768px)and (max-aspect-ratio: 3/2) {
  #companies>.inner {
    width: calc(100% - 200px);
    max-width: 1440px;
    height: auto;
    max-height: none;
    min-height: auto
  }
}

@media screen and (max-width: 1079px) {
  #companies {
    display: block
  }

  #companies>.inner {
    display: none
  }

  #companies .splide {
    display: block;
    position: relative;
    min-height: 100vh;
    padding: 65px 0 30px
  }

  #companies .splide .txt {
    height: 200px;
    padding: 0 7vw;
    color: #0a0a43
  }

  #companies .splide .txt h3 {
    font-size: 3.2rem;
    font-weight: bold
  }

  #companies .splide .txt h3 span {
    margin-left: .7em;
    font-size: 1.4rem;
    font-weight: normal
  }

  #companies .splide .txt p {
    margin-top: 8px;
    font-size: 2.2rem;
    line-height: 1.4
  }

  #companies .splide .txt p+h3 {
    margin-top: 18px;
    font-size: 2.8rem
  }

  #companies .splide .map {
    height: calc(100vh - 315px);
    background-image: url(../images/map/map.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50%
  }

  #companies .splide .map ul {
    position: relative;
    height: 100%;
    aspect-ratio: 49/85;
    margin: 0 auto
  }

  #companies .splide .map ul li {
    display: inline-block;
    position: absolute;
    z-index: 2;
    color: #0f53a0;
    font-size: calc((100vh - 315px)*.04);
    font-weight: bold;
    opacity: 1
  }

  #companies .splide .map ul li.is-off {
    opacity: .2
  }

  #companies .splide .map ul li::before {
    content: "";
    position: absolute;
    left: -0.8em;
    top: -0.5em;
    width: .8em;
    height: 1em;
    background-image: url(../images/map/pin.png);
    background-size: 100%;
    background-repeat: no-repeat
  }

  #companies .splide .map ul li:nth-child(1) {
    left: 20%;
    top: 17%
  }

  #companies .splide .map ul li:nth-child(1)::before {
    left: auto;
    right: -0.8em
  }

  #companies .splide .map ul li:nth-child(2) {
    left: 52%;
    top: 19%
  }

  #companies .splide .map ul li:nth-child(3) {
    left: 67%;
    top: 47%
  }

  #companies .splide .map ul li:nth-child(4) {
    left: 62%;
    top: 79%
  }

  #companies .splide .map ul li:nth-child(5) {
    left: 49%;
    top: 84%
  }

  #companies .splide .map ul li:nth-child(5)::before {
    left: .1em;
    top: -1em
  }

  #companies .splide .map ul li:nth-child(6) {
    left: 8%;
    top: 85%
  }

  #companies .splide .map ul li:nth-child(6)::before {
    left: auto;
    right: -0.8em
  }

  #companies .splide .splide__arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: calc((100% - 200px)*.595 + 180px);
    width: 100%;
    padding: 0 24px
  }

  #companies .splide .splide__arrows .splide__arrow {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0f53a0;
    overflow: hidden;
    text-indent: -400px;
    transition: background-color .2s ease-out
  }

  #companies .splide .splide__arrows .splide__arrow:disabled {
    background-color: #cfddec;
    pointer-events: none
  }

  #companies .splide .splide__arrows .splide__arrow.splide__arrow--prev::before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 3px);
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: scale(1, 0.6) rotate(-45deg)
  }

  #companies .splide .splide__arrows .splide__arrow.splide__arrow--next::before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: scale(1, 0.6) rotate(45deg)
  }

  #companies .splide .splide__progress {
    margin: 15px 7vw 0
  }

  #companies .close {
    right: 24px;
    top: 28px
  }

  #companies .close::after {
    content: none
  }

  #companies .close:hover::before, #companies .close:active::before {
    opacity: 1
  }
}

.companies-cover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-out, transform .3s ease-out
}

.companies-cover.is-shown {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1)
}

html[lang=en] .mv .txt {
  padding: 0 0 10vh 9%
}

html[lang=en] .mv .txt img {
  width: min(55%, 90vh)
}

html[lang=en] .mv .txt p {
  max-width: 70%;
  font-size: min(1.5vw, 2.6rem);
  line-height: 1.6
}

html[lang=en] #about .txt h2+p {
  font-size: 3rem;
  letter-spacing: .01em
}

html[lang=en] #feature ul {
  margin-top: 80px
}

html[lang=en] #career .txt h3 {
  margin-top: 21px
}

html[lang=en] #companies>.inner .map li:nth-child(1) {
  left: 26%
}

html[lang=en] #companies>.inner .txt ul li p:last-child {
  font-size: 1.4rem
}

@media screen and (max-width: 1079px) {
  html[lang=en] #companies .splide .map ul li:nth-child(1) {
    left: 15%
  }
}

@media screen and (max-width: 899px) {
  html[lang=en] .mv .txt img {
    width: min(92%, 50vh)
  }

  html[lang=en] .mv .txt p {
    max-width: 95%;
    font-size: min(5.4vw, 3rem);
    letter-spacing: normal
  }
}

@media screen and (max-width: 767px) {
  html[lang=en] #about .txt h2+p {
    font-size: 2.2rem;
    line-height: 1.5
  }

  html[lang=en] #feature ul {
    margin-top: 35px
  }
}

html[lang=vi] .mv .txt {
  padding: 0 0 10vh 9%
}

html[lang=vi] .mv .txt img {
  width: min(44%, 85vh)
}

html[lang=vi] .mv .txt p {
  max-width: 64%;
  font-size: min(1.5vw, 2.6rem);
  line-height: 1.6
}

html[lang=vi] #about .txt h2+p {
  font-size: 3rem;
  letter-spacing: .01em
}

html[lang=vi] #business .txt .inner {
  display: block
}

html[lang=vi] #business .txt .inner p {
  max-width: 800px;
  margin: 40px 0 0
}

html[lang=vi] #feature ul {
  margin-top: 80px
}

html[lang=vi] #career .txt h2 {
  line-height: 1.3;
  white-space: nowrap
}

html[lang=vi] #career .txt h3 {
  margin-top: 50px
}

html[lang=vi] #companies>.inner .map li:nth-child(1) {
  left: 26%
}

html[lang=vi] #companies>.inner .txt ul li p:last-child {
  font-size: 1.4rem
}

@media screen and (max-width: 1079px) {
  html[lang=vi] #companies .splide .map ul li:nth-child(1) {
    left: 15%
  }
}

@media screen and (max-width: 899px) {
  html[lang=vi] .mv .txt img {
    width: min(92%, 50vh)
  }

  html[lang=vi] .mv .txt p {
    max-width: 95%;
    font-size: min(5.4vw, 3rem);
    letter-spacing: normal
  }
}

@media screen and (max-width: 767px) {
  html[lang=vi] #about .txt h2+p {
    font-size: 2.2rem;
    line-height: 1.5
  }

  html[lang=vi] #feature .txt h2 {
    letter-spacing: normal
  }

  html[lang=vi] #feature ul {
    margin-top: 35px
  }

  html[lang=vi] #contact {
    font-size: 4.2rem;
    letter-spacing: -0.03em
  }
}

body {
  position: relative;
  color: #000;
  background-color: #fff;
  overflow-y: scroll
}

a {
  color: #0f53a0;
  text-decoration: none
}

a:link, a:visited {
  color: #0f53a0
}

a:hover, a:active {
  text-decoration: none
}

.global-container {
  width: 100%
}

h1 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  width: 270px;
  height: 110px;
  background-color: #fff;
  transition: background-color .2s .2s ease-out
}

h1 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

h1 span {
  display: block;
  position: relative;
  width: 45px;
  height: 45px;
  transform: translateX(0);
  transition: transform .4s 0s ease-out
}

h1 span img:first-child {
  display: block;
  width: 100%;
  opacity: 1;
  transition: opacity .2s
}

h1 span img:last-child {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .2s
}

h1 a>img {
  display: block;
  width: 132px;
  margin-left: 8px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .2s .2s ease-out, transform .2s .2s ease-out
}

h1.is-compact {
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
  transition: background-color .2s 0s ease-in
}

h1.is-compact span {
  transform: translateX(clamp(-25px, ((100vw - 1280px) / 2 - 45px) / 2 - 42.5px, -8.5px));
  pointer-events: auto;
  transition: transform .4s 0s ease-out
}

h1.is-compact a>img {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .2s 0s ease-in, transform .2s 0s ease-in
}

h1.is-white span img:first-child {
  opacity: 0
}

h1.is-white span img:last-child {
  opacity: 1
}

.is-hamburger-open h1 {
  background-color: rgba(255, 255, 255, 0)
}

.is-hamburger-open h1 span img:first-child {
  opacity: 1 !important
}

.is-hamburger-open h1 span img:last-child {
  opacity: 0 !important
}

@media screen and (max-width: 767px) {
  h1 {
    width: 230px;
    height: 80px
  }

  h1.is-compact span {
    transform: translateX(-10px)
  }
}

nav {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  padding: 0 0 40px 50px;
  opacity: 1;
  transition: opacity .2s ease-out
}

nav li {
  margin-bottom: 5px
}

nav li:last-child {
  margin-bottom: 0
}

nav li a {
  display: inline-block;
  padding: 10px 0;
  color: #0f53a0;
  font-size: 1.4rem;
  letter-spacing: .02em;
  transition: color .3s
}

nav li a:hover, nav li a:active {
  color: #0a0a43
}

nav.is-hidden {
  opacity: 0;
  pointer-events: none
}

.is-hamburger-open nav {
  opacity: 0;
  pointer-events: none
}

@media screen and (max-width: 899px) {
  nav {
    display: none
  }
}

.scroll {
  position: fixed;
  left: 50px;
  bottom: 300px;
  z-index: 100;
  width: 1px;
  height: 124px;
  opacity: 1;
  transition: opacity .2s ease-out
}

.scroll span:first-child {
  position: absolute;
  left: -0.5em;
  top: -1em;
  color: #0f53a0;
  font-size: 1.2rem;
  transform-origin: 0 0;
  transform: rotate(-90deg)
}

.scroll span:last-child {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.scroll span:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #0f53a0;
  animation: scroll-anim 2.4s infinite both
}

.scroll.is-hidden {
  opacity: 0;
  pointer-events: none
}

.is-hamburger-open .scroll {
  opacity: 0;
  pointer-events: none
}

@media screen and (max-width: 899px) {
  .scroll {
    left: 20px;
    bottom: 70px
  }
}

@keyframes scroll-anim {
  0% {
    opacity: 0;
    transform: translateY(-100%)
  }

  25% {
    opacity: .3
  }

  50% {
    opacity: 1
  }

  80% {
    opacity: .3
  }

  100% {
    opacity: 0;
    transform: translateY(100%)
  }
}

.pagetop {
  display: block;
  position: relative;
  width: 100px;
  margin: 70px auto;
  padding-top: 38px;
  color: #0f53a0;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: .02em;
  text-align: center
}

.pagetop::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 1px;
  height: 28px;
  background-color: #0f53a0;
  transition: height .2s ease-in-out, background-color .2s
}

.pagetop::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 13px;
  height: 13px;
  margin-left: -6px;
  border-left: 1px solid #0f53a0;
  border-top: 1px solid #0f53a0;
  transform: scale(0.6, 1) rotate(45deg);
  transition: bottom .2s ease-in-out, border-color .2s
}

.pagetop:hover, .pagetop:active {
  color: #0a0a43
}

.pagetop:hover::before, .pagetop:active::before {
  height: 38px;
  background-color: #0a0a43
}

.pagetop:hover::after, .pagetop:active::after {
  bottom: 46px;
  border-color: #0a0a43
}

.global-container>footer {
  padding: 90px 0;
  background: linear-gradient(0deg, rgb(1, 27, 100) 0%, rgb(15, 83, 159) 100%);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7;
  text-align: center
}

#js-siteid-compact {
  position: absolute;
  left: 0;
  top: 150vh;
  bottom: 0;
  z-index: -100;
  width: 1px;
  pointer-events: none
}

#js-siteid-white {
  position: absolute;
  left: 0;
  top: calc(100vh - 65px);
  z-index: -100;
  width: 1px;
  height: 1px;
  pointer-events: none
}

#js-hamburger-white {
  position: absolute;
  left: 0;
  top: 50px;
  z-index: -100;
  width: 1px;
  height: 1px;
  pointer-events: none
}

@media screen and (max-width: 767px) {
  #js-siteid-white, #js-hamburger-white {
    height: 100vh
  }
}

.hamburger-button {
  display: block;
  position: fixed;
  left: clamp(17.5px, ((100vw - 1280px)/2 - 45px)/2, 34px);
  bottom: 32px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #0f53a0;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity .3s ease-out, transform .3s ease-out
}

.hamburger-button.is-shown {
  opacity: 1;
  transform: translateY(0)
}

.hamburger-button span {
  display: block;
  position: absolute;
  left: 9px;
  top: 50%;
  width: 22px;
  height: 1px;
  background-color: #fff;
  overflow: hidden;
  text-indent: -400px;
  transform-origin: 100% 50%;
  transform: scale(0.8, 1);
  transition: transform .2s
}

.hamburger-button::before {
  content: "";
  display: block;
  position: absolute;
  left: 9px;
  top: 50%;
  width: 22px;
  height: 1px;
  background-color: #fff;
  transform: translateY(-7px)
}

.hamburger-button::after {
  content: "";
  display: block;
  position: absolute;
  left: 9px;
  top: 50%;
  width: 22px;
  height: 1px;
  background-color: #fff;
  transform-origin: 100% 50%;
  transform: translateY(7px) scale(0.6, 1);
  transition: transform .3s
}

.hamburger-button:hover span {
  transform: scale(1)
}

.hamburger-button:hover::after {
  transform: translateY(7px) scale(1)
}

.hamburger-button.is-white {
  background-color: #fff
}

.hamburger-button.is-white span {
  background-color: #0f53a0
}

.hamburger-button.is-white::before {
  background-color: #0f53a0
}

.hamburger-button.is-white::after {
  background-color: #0f53a0
}

@media screen and (max-width: 899px) {
  .hamburger-button {
    left: 12px;
    bottom: 15px;
    opacity: 1;
    transform: translateY(0)
  }
}

#hamburger-body {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 102;
  width: 300px;
  height: 100vh;
  padding: 30px 50px;
  background-color: #fff
}

#hamburger-body.is-show {
  display: flex;
  animation: hamburger-body-show .4s cubic-bezier(0.08, 0.56, 0.2, 1) both
}

#hamburger-body.is-hide {
  animation: hamburger-body-hide .2s cubic-bezier(0.58, 0.24, 0.4, 1) both
}

#hamburger-body ul:first-child li {
  margin-bottom: 5px
}

#hamburger-body ul:first-child li:last-child {
  margin-bottom: 0
}

#hamburger-body ul:first-child li a {
  display: inline-block;
  padding: 10px 0;
  color: #0f53a0;
  font-size: 1.4rem;
  letter-spacing: .02em;
  transition: color .3s
}

#hamburger-body ul:first-child li a:hover, #hamburger-body ul:first-child li a:active {
  color: #0a0a43
}

#hamburger-body .language {
  display: flex;
  align-items: center;
  width: 138px;
  height: 60px;
  margin-top: 25px;
  padding-left: 25px;
  background-color: #fff;
  background-image: url(../images/icon_global.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 0 50%
}

#hamburger-body .language li {
  width: 32px;
  color: #0f53a0;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase
}

#hamburger-body .language li a {
  display: block;
  padding: 1em 0;
  color: #0f53a0;
  transition: color .3s
}

#hamburger-body .language li a:hover, #hamburger-body .language li a:active {
  color: #0a0a43
}

@media screen and (max-width: 767px) {
  #hamburger-body {
    width: 230px;
    padding: 10px 40px
  }
}

@keyframes hamburger-body-show {
  0% {
    opacity: 0;
    transform: translateX(-100%)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes hamburger-body-hide {
  0% {
    opacity: 1;
    transform: translateX(0)
  }

  100% {
    opacity: 0;
    transform: translateX(-100%)
  }
}

#hamburger-cover {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 101;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 40, 90, .8)
}

#hamburger-cover.is-show {
  display: block;
  animation: hamburger-cover-show .3s cubic-bezier(0.08, 0.56, 0.2, 1) both
}

#hamburger-cover.is-hide {
  animation: hamburger-cover-hide .4s cubic-bezier(0.58, 0.24, 0.4, 1) both
}

@keyframes hamburger-cover-show {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes hamburger-cover-hide {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.fade {
  opacity: 0;
  transform: translateY(200px);
  transition: opacity .6s cubic-bezier(0.08, 0.56, 0.2, 1), transform 1s cubic-bezier(0.64, 0, 1, 0.5)
}

.fade.fade-short {
  transform: translateY(90px)
}

.fade.is-shown {
  opacity: 1;
  transform: translateY(0) !important;
  transition: opacity 2s cubic-bezier(0.08, 0.56, 0.2, 1), transform 2s cubic-bezier(0.08, 0.56, 0.2, 1)
}

@media screen and (max-width: 767px) {
  .fade {
    transform: translateY(20vw);
    transition: opacity .5s cubic-bezier(0.08, 0.56, 0.2, 1), transform .5s cubic-bezier(0.64, 0, 1, 0.5)
  }

  .fade.fade-short {
    transform: translateY(10vw)
  }
}