@charset "utf-8";

*{
    margin:0;
    padding:0;
}

img{
    border:none;
    vertical-align:bottom;
}

a{
    text-decoration:none;
}

li{
    list-style:none;
}


/*ここからheader*/

header {
	width:60%;
	line-height: 1.5;
	margin: 0 auto;
	display:flex;
}



h1 {
	width:20%;
	/*text-align:center;*/
	height: auto;
	margin:0 auto;
}

h1 img {
	width:80%;


}


nav {
       width:80%;
       background-color:#fff;
}


nav ul{
      display:flex;
      justify-content: space-evenly;
      /*line-height: 100px;
      margin:0 auto; */
}


nav ul li {
    width: 25%;
    text-align: center;
}


nav ul li a {
    display: block;
    color: #333;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 153) 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: .3s;
    
}

nav ul {
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
}


a:hover{
  background-position: -100% 0;
  color: #fff;
}


ul li {
  line-height: 2;
  padding: 0.5em 0;
}

/*ここまでheader*/

/*ここからmain*/

.wrapper {
	box-sizing: border-box;/*全て含めてmin-height:100vhに*/
}

main {
	width:100%;
	/*height: 90vh;*/
	margin:0 auto;
}

.container {
	width:40%;
	margin:0 auto;
}

.mainimg {
	width: 100%;
	height: 300px;
}

.image {
	position: relative;
	width: 100%;
	height: 300px;
	object-fit: cover;

	animation: change-img-anim 20s infinite;
}

/*.image:nth-of-type(1) {
	animation-delay: 0s;
}
.image:nth-of-type(2) {
	animation-delay: 10s;
}
.image:nth-of-type(3) {
	animation-delay: 20s;
}*/

/*@keyframes change-img-anim {
	0%{ opacity: 1;}
	10%{ opacity: 1;}
	90%{ opacity: 1;}
	100%{ opacity: 1;}
}*/




/*ここまでmain*/





/*ここからfooter*/

footer {
	width:100%;
	background-color: #000080;
	text-align: center;
	padding:20px 0px;
	position: fixed;
	bottom: 0;
	color:#fff;
}


/*ここまでfooter*/