header {
	height: 70px;
	width: 100%;
	position:fixed;
	top:0;
	background-color:rgb(255, 255, 255);
	border-bottom: 1px solid black;
	z-index:100;
}



p {
	font-size: 16px;
}

.header-container {
    float: left;

}

.logo {
	mix-blend-mode: multiply;
	width:240px;
	height:70px;
	margin-right: 100px;
	
}


@media screen and (max-width: 768px) {
    .logo{
		 width:150px;
         margin-right: 0px;
	}
}	


.header-list{
	padding: 30px 15px;
	
}

.header-list a	{
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 80px;
	padding-right: 30px;
	color: #222121;
	font-weight:bold;
	text-decoration: none;
	
}

@media screen and (max-width: 768px) {
    .header-list a{
         font-size: 14px;
		 padding: 20px 10px;

	}
}	

a:hover	{
	color: orange; /*-- 文字色自由 --*/
}

/*--------------------------------------------------ここまでヘッダー*/

.top-container {
	height: 260px; 
	margin-top: 80px;
	padding-top: 150px;
	background-image: url(/image/1340016.jpg);
	background-size:cover
	
}

.top-container h1{
	color: #4d4747;
	margin: 0px;
	margin-left: 30px;
	font-size: 38px;
	width: 45ch;
	animation: typing 2s steps(23), effect .7s step-end infinite alternate;
	white-space: nowrap;
	overflow: hidden;
    /*border-right: 3px solid;　←必要な時にアクティブにする(カーソル点滅の有無を設定できる)*/ 
	font-family: monospace;
	z-index:10;
}

  @keyframes typing {
	from {
	  width: 0
	}
  }
	  
  @keyframes effect {
	50% {
	  border-color: transparent
	}
  }

.top-container p{
	font-size: 20px;
	color: #443e3e;
    margin: 8px;
	margin-left: 35px;
	animation-name:fadeLeftAnime;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
	z-index:10;
  }

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

  

.top-wrapper {
	margin: 100px;
}



.top-wrapper h2{
	margin: 0px 350px;
	font-size: 30px;
	text-align: center;
	border-bottom: 2px solid;
	border-image-slice: 1;
}

@media screen and (max-width: 768px) {
    .top-wrapper h2 {
		 text-align: center;
		 margin: 0px 0px;
	}
}	

.top-wrapper p {
	padding: 20px 60px;
    font-size: 18px; 
	text-align: center;
	/*border: 5px solid #090909;　*/ 
	/*↑要素のフレーム確認に必要な時に、コメントアウトを外す*/
}

.contents {
	height: 400px;
	width: auto;
	margin: 20px 0px 0px 0px; /*上、右、下、左の順*/
	position: relative;

}

.contents-wrapper{
	height: 370px;
	width: auto;
	margin-left: 20px;
}

@media screen and (max-width: 768px) {
    .contents-wrapper{
		 width:auto;
		 text-align: center;
	}
}	

.contents-item {
	float: left;
	margin-left: 160px;/*100%時のセンターとなる数値115px*/
	animation: fadeIn 1s ease 0.5s 1 normal backwards;
	/*↑フェードインアニメーション　必要な時に、コメントアウトを外す*/

	/*opacity: 0;  
	↑順番表示のためコード①*/
}

@media screen and (max-width: 768px) {
    .contents-item {
		 text-align: center;
		 margin: 0px 0px;
	}
}	





/*.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
    ↑順番表示のためコード②*/

  @keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: translateY(100px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  /*↑フェードインアニメーション　必要な時に、コメントアウトを外す*/

.contents-item h3 {
	padding-bottom: 10px;
	font-size: 18px;
}

/*.contents-text {
	height: 100px;
}

.contents-text p {
	float: left;
	margin-left: 150px;
}*/

.news-wrapper {
	height: 35px;
    width: auto;
	margin-bottom: 30px;
}

.news-wrapper h2 {
	margin: 0px 450px;
	font-size: 30px;
	text-align: center;
	border-bottom: 2px solid;
	border-image-slice: 1;
}


/*---------------------------------------------------------------ここからフッター*/


footer {
	height: 35px;
	background-color:#b4dbf5;
	
}

.footer-wrapper {
	height: 30px;
	color: #090909;
	text-align: center;
	padding-top: 10px;
	
}

small{
	font-size: 20px;
	
}