/*トップ画像のアニメーションCSS*/
.slideBox {
	height: 450px;
	overflow: hidden;
	position: relative;
	width: 100%;
  
}

/* imgのみ */
.item1 {
	opacity: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 30s 0s infinite;
	animation: anime 30s 0s infinite;
  
	}

.item1:nth-of-type(2) {
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
	
	}

.item1:nth-of-type(3) {
	-webkit-animation-delay: 20s;
	animation-delay: 20s;
	
	}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
	opacity: 0;
	
	}
  30% {
    opacity: 1;
    
	}
  35% {
    opacity: 1;
    
	}
  50% {
    opacity: 0;
    z-index: 9;
    
	}
  100% {
    opacity: 0;
    
	}
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
    
	}
  
  30% {
    opacity: 1;
    
	}
  
  35% {
    opacity: 1;
    
	}
  
  50% {
    opacity: 0;
    z-index: 9;
    
	}
  
  100% {
    opacity: 0;
    
	}
  
}


/* accessで追加するCSS */
.boxA:after{
	content:"";
	display:block:
	clear:both;

	}
	
.box1{
	float:right;
	width:20%;
	
	}
	
.box2{
	float:right;
	width:20%;
	
	}
	
.box3{
	float:right;
	width:20%;
	
	}
	
.box4{
	float:right;
	width:20%;
	
	}
	
.box5{
	float:right;
	width:20%;
	
	}
	
iframe{
	display:block;
	margin-left:auto;
	margin-right:auto;
	
	}
	
	
/*asidアニメーション*/
aside a {
	position: relative;
	z-index: 2;
	overflow: hidden;
	
	}
	
aside a:before, 
aside a:after {
	content: '';
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	background:linear-gradient(transparent 0%, #64F9C1 100%);
	transition: all 400ms linear;
	
	}
	
aside a:before {
	left: 0;
	
	}
	
aside a:after {
	right: 0;
	
	}
	
aside a:hover {
	color: #000;
	
	}
	
aside a:hover:before, 
aside a:hover:after {
	width: 50%;
	
	}

/*ボタンのCSS*/
/*button {
	color:red;
	border-bottom:5px solid #00008B;
	border-top: 1px solid #00008B;
	border-left: 1px solid #00008B;
	border-right: 2px solid #00008B;
	background-color:#DDFFFF;
	top: calc(50% - 5em);
	font-weight: bold;
	transform: translate3d(0, 4px, 0);
	
	}

button:hover {
	margin-top: 3px;
	border-bottom: 2px solid #00008B;
	transform: translate3d(0, 4px, 0);
	color:#00008B;
	
	}*/
	
button {
  background-color: #1e90ff;
  box-shadow: 0px 3px #000080;
  width: 120px;
  text-align: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 30px;
  border-radius: 50px;
  
	}

button:active {
  box-shadow: none;
  position: relative;
  top: 3px;
  
	}

button:hover{
color:#00008B;

	}