@charset "utf-8";

/*----------------------------
* 全体スタイル
----------------------------*/
.page-mainVisual{
  position: relative;
  margin-bottom: 10rem;
  opacity: 0.9;
  box-shadow: inset 0 0 10px 15px #000;
  background: url('../img/bg-main.jpg') left center no-repeat;
  background-size: cover;
  animation: fadeIn 2s ease 0s 1 normal;
}
@media screen and (min-width:900px) {
  .page-mainVisual {
    margin-bottom: 200px;
    padding: 0 10px 20px;
  }
}

.page-mainVisual::after {
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  content: '';
}

/*----------------------------
* コンテナ
----------------------------*/
.mainVisual_container {
  display: flex;
  flex-direction: row-reverse;
  z-index: 10;
  height: 100vh;
  margin: 0 auto;
  padding: 1rem 2rem;
}
@media screen and (min-width:900px) {
  .mainVisual_container{
    flex-direction: row;
    max-width: 1340px;
    height: calc(100vh - 10px);
    margin: 0 auto;
    padding: 60px 1rem 0;
  }
}

/*----------------------------
* インナー
----------------------------*/
.mainVisual_inner {
  position: absolute;
  z-index: 20;
  bottom: 70px;
  left: 5%;
}
@media screen and (min-width:900px) {
  .mainVisual_inner{
    position: relative;
    top: 200px;
  }
}

/*----------------------------
* タイトル
----------------------------*/
.main-title{
  padding: 1rem 1rem 0;
  color: #fffffb;
  font-size: 60px;
  letter-spacing: 0.2em;
  text-align: left;
}
@media screen and (min-width:900px) {
  .main-title {
    margin-top: 120px;
    padding: 0 1rem 0;
  }
}

/*----------------------------
* キャッチコピー
----------------------------*/
.catch-copy {
  margin-right: 0;
  padding: 1rem 1rem 0;
  text-align: left;
}
@media screen and (min-width:900px) {
  .catch-copy {
    width: 100%;
  }
}
.catch-copy h3 {
  position: relative;
  width: 100%;
  padding-right: 1rem;
}
/* 矢印 */
.catch-copy h3 span::after {
  position: absolute;
  right: 0;
  bottom:0;
  height: 1rem;
  content: "";
}
/* サブキャッチコピー */
.catch-copy h3 span {
  display: inline-block;
  position: relative;
  padding-right: 40px;
  color: #d4b46c;
  font-size: 1.2rem;
  text-align: right;
}

/*----------------------------
* 画像
----------------------------*/
.main-pic {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 480px;
  margin: 40px 0 auto;
  transition: all 0.5s;
}
@media screen and (min-width:900px) {
  .main-pic {
    top: 30px;
    margin: 0 auto;
  }
}

/*----------------------------
* スクロール
----------------------------*/
@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: 50px;
  margin: 0 auto;
  border-right: 2px solid #fff;
	animation:requestScroll 1.5s ease-in-out infinite;
}
/* 矢印 */
.scroll-box .circle-down::before{
  content: "";
  position: absolute; /*block要素だけど、幅、高さがinline要素扱い*/
  width: 15px;
  left: 1px;
  /*bottom: -0.5px;
  border-bottom: 2px solid #fff;*/
  transform-origin: left bottom;
  transform: rotateZ(-45deg);
}
.circle-down_inner {
  position: absolute;
  top: -40px;
  padding-left: 15px;
  color: #fffffb;
  font-size: 12px;
  writing-mode: vertical-rl;
}

/* アニメーション 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 ---------------*/
}