/*
Template:easel
Theme Name:canvas on EASEL
Version: 1.1.0
*/

/* ここから下に書いたCSSが、親テーマCSSに上書きされます。 */

.pagination a {
	position: relative;
	color: #aeb0b3;
	border: 1px solid;
}

.pagination a:hover, .pagination a:focus {
    color: #d10e3c;
	background-color: #fff;
}

.nav-links {
	display: flex;
}

.hentry {
    padding-bottom: 0;
}

.sidebar {
    margin-top: 0;
}

#main-nav, #main-nav ul, #main-nav li  {
  height: 500px;
}
#main-nav ul {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  padding: 0 0;
}
#main-nav li {
  background: #8b0000;
  width: 100%;
  display: -webkit-flex;
  display: flex;
}
#main-nav .bigli{
  width: 500%;
}
@media screen and (min-width: 960px) {
  #main-nav li {
    -webkit-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
  }
  #main-nav .bigli:hover {
    width: 800%;
  }
  #main-nav li:hover {
    width: 150%;
  }
}

@media screen and (max-width: 480px) {
  #main-nav, #main-nav ul, #main-nav li  {
    height: 300px;
  }
  #main-nav .bigli{
    width: 200%;
  }
}

#main-nav li:nth-child(2) {
  background: #a9a9a9;
}
#main-nav li:nth-child(3) {
  background: #dcdcdc;
}
#main-nav a {
  display: flex;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  color: #fff;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 100%;
  justify-content: center;
  align-items: center;
}
#main-nav a:hover {
  background: rgba(255,255,255,.2);
}