/*----------------------------
top-loading
----------------------------*/
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100;
  background:#cacaca;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:250px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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


/*----------------------------
Top-slide-decolation
----------------------------*/
.mainvisual {
  width: 100%;
	height: 100%;  /*縦の場合は100chに変更*/
  position: relative; /*main-visual-text用*/
}
.mainvisual #particles-js{ 
  position: relative;
	z-index: -5;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}



.mainvisual #particles-js::after{ 
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0px 0px 10px 10px #fff;
}

.mainvisual .fade li {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  /* 最初は3枚の画像を非表示にしておく */
  opacity: 0;
  /*
  アニメーションを実行
  fade：下で定義している「@keyframes fade」を実行
  15s：「@keyframes fade」の処理を15秒かけて実行
  infinite：アニメーションの処理を無限に繰り返す
  */
  animation: fade 9s infinite;
}
/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
.mainvisual .fade li:nth-child(1) {
  animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
.mainvisual .fade li:nth-child(2) {
  animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
.mainvisual .fade li:nth-child(3) {
  animation-delay: 10s;
}
.mainvisual .fade li img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -50;
}

/*
「box-shadow」で画像のまわりをぼかす
*/
.mainvisual .fade li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0px 0px 20px 20px #fff;
}
/*
アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。このアルゴリズムは有名。
*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*------------------------------------
mainvisual-text
----------------------------------*/
.mainvisual #mainvisual-text {
  position: absolute;
  top: 45%;
  left: 7%;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2 );
  font-family: 'ヒラギノ角ゴ,Hiragino Sans,ヒラギノ角ゴ ProN W3,HiraKakuProN-W3,ヒラギノ角ゴ Pro W3,HiraKakuPro-W3,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS Pgothic,Osaka,sans-serif,Helvetica,Helvetica Neue,Arial,Verdana;';
}

.mainvisual .mainvisual-title {
  font-size: 1.4rem;
  margin: 0;  
  font-weight: bold;
}

.mainvisual .mainvisual-title span {
  font-size: 2rem;
}

.mainvisual .mainvisual-sub-title {
  font-size: 0.9rem;
  font-weight: bold;
}

.btn-gradient-radius {
  display: inline-block;
  padding: 7px 80px;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  background-image: linear-gradient(45deg, #b451a4 0%, #5c5555 100%);
  transition: .4s;
}

.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #5c5555 0%, #b451a4 100%);
  box-shadow: 0 4px 12px rgb(255, 255, 255), 0 12px 24px -12px rgb(255, 255, 255);
  opacity: 1;
}

/*------------------------------------
scroll-down-menu
----------------------------------*/
.scrolldown{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:10px;
right:3%;
}

/*Scrollテキストの描写*/
.scrolldown span{
  /*描画位置*/
position: absolute;
right: 20%;
bottom:15px;
  /*テキストの形状*/
color: #eeeeee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 線の描写 */
.scrolldown:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:10px;
  left:3px;
    /*線の形状*/
  width: 1px;
  height: 40px;
  background:#eee;
}

/* 丸の描写 */
.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-2px;
  /*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
  0%{bottom:45px;}
 100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
  0%{opacity:0}
 50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}