/* 共通部分のスタイル */

/* Google font */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

:root {
  /* scroll-behavior: smooth; */
  /* グラデーション */
  --main-color-gradient: linear-gradient(to right, #217dc3, #005fa7);
  /* メインカラー */
  --main-color: #0a5ca4;
  /* フォントサイズ */
  --font-body-size: 18px;
  --font-description-size: 26px;
  --font-headline-size: 80px;
  --font-headline-sub-size: 50px;
  --font-content-size: 15px;
  /* コンテンツ幅 */
  --content-width: 1100px;
  /* フォントの斜体 */
  --font-oblique: skewX(-7deg);
}
.pc {
  display: block;
}
.sp {
  display: none;
}

/* 共通アニメーション */

.fade-left,
.fade-right,
.fade-up {
  opacity: 0;
}
/* fade-left */
.fade-in-left {
  animation: fadeInLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 0.3s;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    translate: -80px 0;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
/* fade-right */
.fade-in-right {
  animation: fadeInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 0.6s;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    translate: 80px 0;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
/* fade-up */
.fade-in-up {
  animation: fadeInUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 0.5s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    translate: 0 50px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
/* right-move */
/*
.right-in-move .inner .right-move {
  position: relative;
  width: 0;
  animation: fadeIn forwards 0.5s 1 ease 0.5s normal;
}
  */
/* right-move */
.right-in-move .inner .right-move {
  clip-path: inset(0 100% 0 0);
}
@keyframes rightIn {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
/* タブレット表示 */
@media screen and (max-width: 1050px) {
  :root {
    /* フォントサイズ */
    --font-body-size: 16px;
    --font-description-size: 24px;
    --font-headline-size: 64px;
    --font-headline-sub-size: 40px;
    --font-content-size: 14px;
    /* コンテンツ幅 */
    --content-width: auto;
  }
}
/* スマホ表示 */
@media screen and (max-width: 760px) {
  :root {
    /* フォントサイズ */
    --font-body-size: 15px;
    --font-description-size: 20px;
    --font-headline-size: 54px;
    --font-headline-sub-size: 36px;
    --font-content-size: 13px;
    /* コンテンツ幅 */
    --content-width: auto;
  }
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  .fade-in-right {
    animation-delay: 0.3s;
  }
}