/*
Theme Name: 株式会社us サイトリニューアル
*/

/* 使用フォント */
:root {
  --NotoSans: "Noto Sans JP", sans-serif;
  --Roboto: "Roboto", "Noto Sans JP", sans-serif;
  --BarlowCondensed: "Barlow Condensed", sans-serif;
}

/* 使用カラー */
:root {
  --White: #FFFFFF;
  --LightGray: #F8F8F8;
  --DarkGray:#545454;
  --Orange:#EA5414;
  --Black:#000000;
  --Swamp:#0F1111;
}


body {
  min-height: 100vh;
  font-family: var(--Roboto);
  position: relative;
  overflow-x: hidden;
}

html {
  font-size: calc(10 / 1440 * 100vw);
  /* 画面幅1440pxで10px*/
  /* overflow-y: overlay; */
  color: black;
  /* height: -webkit-fill-available; */
  scroll-behavior: smooth;
  scroll-padding-top: 8.7rem;
  /* スクロール対応 */

}

img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}


.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

/*fade表示関連*/

/* 動き用CSS */
.fade_in {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0, 0.42, 0.58, 1);
}

.fade_up {
  transform: translateY(2vw);
  opacity: 0;
  transition: all 1.2s cubic-bezier(0, 0.42, 0.58, 1);
}

.fade_in.show,
.fv_js.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fade_in,
.fv_js {
  opacity: 0;
  transition: .8s;
  transform: translateY(5rem);
}

.fade_up.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* 下層ヘッダー */

@media screen and (max-width: 699.98px) {
  html {
    font-size: calc(10 / 375 * 100vw);
    /* 画面幅375pxで10px*/
    scroll-padding-top: 5.7rem;
    /* スクロール対応 */
  }

  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }

  /* 動き用CSSSP */
  .js_fade_targets {
    animation-duration: 0.3s;
  }
}