#company-page .load-js-fadeUP {
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 1s, transform 1.2s; }
#company-page .load-js-fadeUP.on {
  opacity: 1;
  transform: translateY(0); }
#company-page .company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: calc(60/1440*100vw);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 767px) {
    #company-page .company-table {
      margin-top: calc(60/767*100vw); } }
  @media (max-width: 767px) {
    #company-page .company-table tr {
      display: block;
      padding: calc(40/767*100vw) 0; } }
  #company-page .company-table tr > * {
    padding: 0.5em 0;
    vertical-align: top;
    text-align: left;
    letter-spacing: 0.03em; }
    @media (max-width: 767px) {
      #company-page .company-table tr > * {
        display: block;
        padding: 0;
        width: 100% !important;
        border-bottom: none; } }
  #company-page .company-table tr th {
    width: 24%;
    font-weight: 500; }
    @media (max-width: 767px) {
      #company-page .company-table tr th {
        width: 100%; } }
  #company-page .company-table tr td {
    width: 76%; }
    @media (max-width: 767px) {
      #company-page .company-table tr td {
        width: 100%; } }
    #company-page .company-table tr td dl {
      display: flex;
      flex-wrap: wrap; }
      #company-page .company-table tr td dl dt {
        width: 9em; }
      #company-page .company-table tr td dl dd {
        width: calc(100% - 9em); }
    #company-page .company-table tr td .cap {
      color: #151515; }
#company-page .map-box {
  margin-top: 6.25em;
  width: 100%;
  height: auto;
  aspect-ratio: 800/285; }
  @media (max-width: 767px) {
    #company-page .map-box {
      aspect-ratio: 1/1; } }
  #company-page .map-box iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(1); }
#company-page #office {
  margin-top: calc(120/1440*100vw); }
  @media (max-width: 767px) {
    #company-page #office {
      margin-top: calc(200/767*100vw); } }
  #company-page #office .office-index-wrap {
    width: 100%;
    margin-top: calc(80/1440*100vw);
    display: flex;
    flex-wrap: wrap;
    gap: calc(48/1440*100vw); }
    @media (max-width: 767px) {
      #company-page #office .office-index-wrap {
        gap: calc(100/767*100vw); } }
    #company-page #office .office-index-wrap > .office-box {
      width: calc(50% - (48/1440*100vw)/2); }
      @media (max-width: 767px) {
        #company-page #office .office-index-wrap > .office-box {
          width: 100%; } }
    #company-page #office .office-index-wrap .txt h4.en {
      font-weight: 400;
      font-size: calc(64/1440*100vw);
      line-height: 1.2; }
      @media (max-width: 767px) {
        #company-page #office .office-index-wrap .txt h4.en {
          font-size: calc(56/767*100vw); } }
      #company-page #office .office-index-wrap .txt h4.en small {
        font-size: 31.25%; }
    #company-page #office .office-index-wrap .txt .spec {
      display: flex;
      font-size: 1rem;
      align-items: center;
      gap: calc(10/1440*100vw);
      margin-top: calc(10/1440*100vw); }
      @media (max-width: 767px) {
        #company-page #office .office-index-wrap .txt .spec {
          font-size: calc(24/767*100vw);
          gap: calc(20/767*100vw);
          margin-top: calc(20/767*100vw); } }
      #company-page #office .office-index-wrap .txt .spec p {
        line-height: 1.4; }
      #company-page #office .office-index-wrap .txt .spec .icon {
        display: flex;
        flex-flow: column;
        align-items: center;
        font-weight: 700;
        font-family: "Roboto", sans-serif; }
        @media (max-width: 767px) {
          #company-page #office .office-index-wrap .txt .spec .icon {
            line-height: 1; } }
        #company-page #office .office-index-wrap .txt .spec .icon::before {
          content: "";
          width: 20px;
          height: 24px;
          background: url(../img/pin_map.svg) no-repeat;
          background-size: contain; }
    #company-page #office .office-index-wrap .img {
      width: 100%;
      height: auto;
      aspect-ratio: 476/380;
      position: relative;
      margin-top: calc(10/1440*100vw);
      overflow: hidden; }
      @media (max-width: 767px) {
        #company-page #office .office-index-wrap .img {
          margin-top: calc(20/767*100vw); } }
      #company-page #office .office-index-wrap .img figure {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0; }
        #company-page #office .office-index-wrap .img figure img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
      #company-page #office .office-index-wrap .img .looptxt {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        align-items: center;
        width: 100%;
        height: 100%; }
        #company-page #office .office-index-wrap .img .looptxt span {
          color: #FFF;
          font-family: "Roboto", sans-serif; }
        #company-page #office .office-index-wrap .img .looptxt .loop {
          display: flex;
          gap: 40px;
          animation: loop 10s linear infinite;
          width: 100%; }
        #company-page #office .office-index-wrap .img .looptxt .loop2 {
          position: absolute;
          left: 0;
          animation: loop 10s -5s linear infinite; }

@keyframes loop {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(-100%); } }
.bgextend, .bgappear {
  opacity: 0; }

.on .bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0; }
.on .bgappear {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }
.on .bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0F0F0F; }
.on .looptxt {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-delay: .5s;
  animation-fill-mode: forwards; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }