/*----------------------------------------
株式会社アルターの共通CSS
common.css
----------------------------------------*/

/* 変数 */
:root {
  --main-bg-color: #E8F3FA;
  --pc-mwidth: 1280px; 
  --head-color: #fff;
  --sub-bg-color: #f7931e;
  --header-bg-color: #fff;
  --footer-bg-color: #666666;
  --pc-contents-width: 1080px;
  --main-font-color: #000;
}
/* ボックスサイジングとフォントサイズ */
html {
  font-size: 62.5%;
  box-sizing: border-box;
  /* ダブルタップでの拡大を無効化 */
  touch-action: manipulation;
}
/* フォント */
body {
  font-family:
    "Noto Sans JP",
    "Be Vietnam Pro",
    sans-serif;
    overflow-x: hidden;
    font-feature-settings: "palt";
}
main {
    /* width: 100%; */
    overflow-x: hidden;
}

/* リセット */
h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  opacity: 0.6;
}

/* 改行 */
.br-sp {
  display: block;
}
.br-pc {
  display: none;
}
/* pc */
@media screen and (min-width: 768px) {
  .br-sp {
      display: none;
  }
  .br-pc {
      display: block;
  }        
}




/* アニメーション  クリップパス（左から右） */
.cp_anime {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s ease-out;
}
.cp_anime.animate {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s ease-out;
}
.cp_anime.animation-complete {
  clip-path: none;
}

/* アニメーション フェードイン（上）*/
.fd_anime_up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fd_anime_up.animate {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション フェードイン（下）*/
.fd_anime_down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fd_anime_down.animate {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション完了後のスタイル */
/* .cp_anime.animation-complete { */
  /* 例：影を追加 */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  /* 例：境界線を追加 */
  /* border-left: 4px solid #007acc; */
  /* 例：背景色を変更 */
  /* background-color: rgba(0, 122, 204, 0.05); */
/* } */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*----------------------------------------
    Animation
----------------------------------------*/

.js-fade-in, .js-fade-up, .js-fade-down, .js-fade-left, .js-fade-right {
    opacity: 0;
}

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */
.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */
.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}





.delay01 {
    animation-delay: 0.1s;
}

.delay02 {
    animation-delay: 0.2s;
}

.delay03 {
    animation-delay: 0.3s;
}

.delay04 {
    animation-delay: 0.4s;
}

.delay05 {
    animation-delay: 0.5s;
}

.delay06 {
    animation-delay: 0.6s;
}

.delay07 {
    animation-delay: 0.7s;
}

.delay08 {
    animation-delay: 0.8s;
}

.delay09 {
    animation-delay: 0.9s;
}


.tdelay01 {
    transition-delay: 0.1s;
}

.tdelay02 {
    transition-delay: 0.2s;
}

.tdelay03 {
    transition-delay: 0.3s;
}

.tdelay04 {
    transition-delay: 0.4s;
}

.tdelay05 {
    transition-delay: 0.5s;
}

.tdelay06 {
    transition-delay: 0.6s;
}

.tdelay07 {
    transition-delay: 0.7s;
}

.tdelay08 {
    transition-delay: 0.8s;
}

.tdelay09 {
    transition-delay: 0.9s;
}




.duration1 {
    animation-duration: 1s;
}

.duration2 {
    animation-duration: 2s;
}

.duration3 {
    animation-duration: 3s;
}

.duration4 {
    animation-duration: 4s;
}

.duration5 {
    animation-duration: 5s;
}

.duration6 {
    animation-duration: 6s;
}

.duration7 {
    animation-duration: 7s;
}

.duration8 {
    animation-duration: 8s;
}

.cp_anime.animate.tdelay1 {
    transition-delay: 0.1s;

}

.cp_anime.animate.tdelay2 {
    transition-delay: 0.3s;
}

.cp_anime.animate.tdelay3 {
    transition-delay: 0.35s;
}