@charset "utf-8";

/*↓画像アニメーション*/

.top_image img {
	width: 20%;
	height: auto;
  object-fit:cover;
	margin-top: 50px;
}

.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.zoomin {
  animation-name: zoomin;
  animation-direction: normal;
}

@keyframes zoomin {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*↑画像アニメーション*/
html,body {
  height: 100%
}

body:after {/*擬似要素をつくる*/
  position: fixed;/*固定配置*/
	z-index: -1;
  top: 0; left: 0;/*左上に固定*/
  width: 100%; height: 100%;/*画面全体を覆う*/
  content: "";
  background: #f89174;/*保険用*/
    background: -moz-linear-gradient(top, #3159bd 0%,#31ffbd 100%);/*古いFireFox向け*/
  background: -webkit-linear-gradient(top, #3159bd 0%,#31ffbd 100%);/*古いSafari・Chrome向け*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbcacb', endColorstr='#3159bd',GradientType=0 );/*IE9以下への対応*/
  background: linear-gradient(to bottom, #3159bd 0%, #31ffbd 100%);/*正規のプロパティ*/
    }

.top{
	width: 100%;
	height: 100%;
 align-items: center;
}

.top_image{
	width: 100%;
	white-space: nowrap;
}

.top_p{
	width: 90%;
	text-align: center;
	margin: 100px auto 0;
	flex-wrap: no-wrap;
text-shadow: 1px 1px 2px #223357;
}

.copy{
	width: 90%;
	margin: 0 auto;
	font-size: 12pt;
	font-family: "源暎ゴシックP H-KL";
	font-weight: bold;
	color: #fff;
	text-align: center;
}

/*↓タイピングアニメーション*/


/*タイピング*/
.typing {
  font-size: 12pt;
  letter-spacing: 0.05em;
  word-break : break-all;
	color: #fff;
	font-weight: bold;
}

/*jsで生成されるspanタグ*/
.typing span{
    display: none;
}

/*|カーソルを表示*/
.typing:after {
  content: "|";
  animation: typingCursor .8s ease infinite;
}

@keyframes typingCursor {
  from　{
    opacity:0;
  }
  to{
    opacity:1
  }
}
/*↑タイピングアニメーション*/

.site{
	width: 80%;
	margin: 30px auto;
	text-align: center;
	font-size: 10pt;
	font-family: "源暎ゴシックP H-KL";
	font-weight: bold;
	padding: 24px 20px;
	border: 1px solid #fff;
	color: #fff;
}

/*↓コピーライト*/

.copy_top{
	width: 90%;
	margin: 50px auto 0px;
	font-size: 8pt;
	text-align: center;
	color: #fff;
}

/*↑コピーライト*/