@charset "utf-8";

/*----------------------------
* 全体スタイル
----------------------------*/
.pageVisual {
  position: relative;
  height: 80vh;
  margin-bottom: 180px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #E9E9E7;
}
@media screen and (min-width:768px) {
  .pageVisual {
    margin-bottom: 300px;
    background-attachment: fixed;
  }
}
.pageVisual::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(51, 51, 51, 0.5);
  content: "";
}

/*----------------------------
* 各ページのトップ画像
----------------------------*/
/* company */
.pageVisual-company {
  /*background: url('../img/company/bg-pageVisual.jpg') center 30%/cover no-repeat;*/
  background-image: url('../img/company/bg-pageVisual.jpg');
  background-position: right 20% bottom 10%;

}
@media screen and (min-width:768px) {
  .pageVisual-company {
    /*background: url('../img/company/bg-pageVisual.jpg') center 30%/cover no-repeat;*/
    background-position: center 30%;
  }
}
/* terms */
.pageVisual-terms {
  /*background: url('../img/terms/bg-pageVisual.jpg') center center/cover no-repeat;*/
  background-image: url('../img/terms/bg-pageVisual.jpg');
  background-position: center center;
}

/* privacy */
.pageVisual-privacy {
  /*background: url('../img/privacy/bg-pageVisual.jpg') center center/cover no-repeat;*/
  background-image: url('../img/privacy/bg-pageVisual.jpg');
  background-position: center center;
}

/* license */
.pageVisual-license {
  /*background: url('../img/license/bg-pageVisual.jpg') center center/cover no-repeat;*/
  background-image: url('../img/license/bg-pageVisual.jpg');
  background-position: center center;
}

/* contact */
.pageVisual-contact {
  /*background: url('../img/contact/bg-pageVisual.jpg') center center/cover no-repeat;*/
  background-image: url('../img/contact/bg-pageVisual.jpg');
  background-position: center center;
}

/*----------------------------
* コンテナ
----------------------------*/
.pageVisual_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  z-index: 100;
  padding: 1rem 2rem 0;
  bottom: -10px;
  background-color: #2a2a2a;
}
@media screen and (min-width:768px) {
  .pageVisual_container {
    padding: 2rem 5rem 0;
  }
}

/*----------------------------
* タイトル
----------------------------*/
.page-title {
  margin: 0;
  color: #C5C4C4;
  font-size: calc(60px + 20 * (100vw - 300px)/1620);
  letter-spacing: 0.1em;
}

.pageVisual_container h3 {
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  color: #C5C4C4;
  font-size: calc(16px + 4 * (100vw - 300px)/1620);
}

/*----------------------------
* スクロール
----------------------------*/
@media screen and (min-width:768px) {
  .scroll-box{
    position: absolute; /*block要素だけど、幅、高さがinline要素扱い*/
    right: 0; left: 0; /*親要素の幅高さに合わせる*/
    bottom: -10px;
    z-index: 100;
  }
  .scroll-box .circle-down{
    position: relative;
    width: 1px;
    height: 30px;
    margin: 0 auto;
    border-right: 2px solid #222;
    animation:requestScroll 1.5s ease-in-out infinite;
  }
  /* 矢印 */
  .scroll-box .circle-down::after{
    content: "";
    position: absolute; /*block要素だけど、幅、高さがinline要素扱い*/
    width: 15px;
    left: 1px;
    bottom: -0.5px;
    border-bottom: 2px solid #222;
    transform-origin: left bottom;
    transform: rotateZ(-45deg);
  }

  /* アニメーション start ---------------*/
  @keyframes requestScroll{
    0%{bottom:20px; opacity: 0;}
    30%{bottom:0;}
    40%{bottom:8px;}
    50%{bottom:0;}
    60%{bottom:8px;}
    70%{bottom:0; opacity: 1;}
    100%{bottom:0; opacity: 0;}
  }
  /* アニメーション end ---------------*/
}