/* Base */
body {
  color: #333;
  background-color: #d4dff0;
  margin: 0;
}
.download_count {
  color: #d4dff0;
}
a {
  text-decoration: underline;
  color: #000938;
}
a:hover {
  color: red;
}
img {
  max-width: 100%;
}
#top-logo {
  line-height: 0;
  display: block;
}
#board {
  position: relative;
  background-color: #000938;
}
#board .display {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/head.png");
  background-size: cover;
  max-width: 691px;
  margin: auto;
  opacity: 0;
}
#board .hide {
  display: none;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}
#board .animate-bounce {
  animation: bounce 1s infinite ease-in-out;
}
.flow {
  position: absolute;
  bottom: 20px;
  font-size: 50px;
  width: 100%;
  left: 0;
  cursor: pointer;
  text-align: center;
  color: #eef5f5;
}
.flow:hover {
  opacity: 0.8;
}
#main {
  background-color: #d4dff0;
}
#main article {
  overflow: hidden;
}
#main iframe {
  max-width: 100%;
}
#layout {
  padding-left: 250px;
  /* "left col (nav + list)" width */
  position: relative;
}
#list {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}
#menu {
  background: #000938;
  text-align: center;
}
#menu ul {
  border-top: none;
  left: -10000px;
  list-style: none;
  margin: 0;
  padding: 0;
  top: -10000px;
  z-index: 1;
}
#menu ul li {
  position: relative;
  margin: 0 0 5px;
}
#menu ul li a {
  display: block;
  width: 190px;
  height: 0;
  background-color: transparent;
  background-position: left 4px;
  background-repeat: no-repeat;
  overflow: hidden;
  line-height: 35px;
  padding: 35px 20px 5px 20px;
  opacity: 0.8;
  transition: opacity 0.7s ease;
}
#menu ul li a:hover,
#menu ul li a.active {
  background-position: left -46px;
  background-color: transparent !important;
  opacity: 1;
}
#menu ul li.nav-about a {
  background-image: url(../img/menu/about.png);
}
#menu ul li.nav-accessibility a {
  background-image: url(../img/menu/accessibility.png);
}
#menu ul li.nav-support a {
  background-image: url(../img/menu/support.png);
}
#menu ul li.nav-blog a {
  background-image: url(../img/menu/blog.png);
}
#menu ul li.nav-contact a {
  background-image: url(../img/menu/contact.png);
}
#menu ul li.nav-entry a {
  background-image: url(../img/menu/entry.png);
}
#menu ul li.nav-works a {
  background-image: url(../img/menu/works.png);
}
#menu ul li.nav-event a {
  background-image: url(../img/menu/event.png);
}
#menu ul li.nav-news a {
  background-image: url(../img/menu/news.png);
}
#menu ul li.nav-association a {
  background-image: url(../img/menu/association.png);
}
#menu ul li.nav-sns a {
  background-image: url(../img/menu/sns.png);
}
#menu ul li.nav-newsletter a {
  background-image: url(../img/menu/newsletter.png);
}
#menu ul li.nav-symposium a {
  background-image: url(../img/menu/symposium.png);
}
#c-active ul {
  margin: 0;
  padding: 0;
}
#c-active ul li {
  list-style: none;
  margin: 0 0 20px 0;
  background: #b6bfec;
  padding: 5px 10px;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
footer {
  background-color: #000938;
  border-top: 1px solid #000938;
  font-size: 0.9em;
}
.btn-entry {
  display: block;
  background: url("../img/btn_entry.png") no-repeat;
  padding: 69px 0 0 0;
  width: 207px;
  height: 0;
  background-position: center 15px;
  overflow: hidden;
  margin: auto;
}
.btn-entry:hover {
  background-position: center -45px;
}
/* Content Styles */
.entry-header,
.entry-body,
.entry-footer {
  padding: 1em 2em;
}
.entry-header {
  border-bottom: 1px solid #ddd;
}
.entry-title {
  margin: 0.5em 0 0;
  background-color: #000938;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  padding: 0.5em 1em;
  border-radius: 0.6em;
}
.pure-img-responsive {
  max-width: 100%;
  height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
  position: relative;
  left: 0;
  padding-left: 0;
}
#layout.active #menu {
  left: 250px;
  width: 250px;
}
#layout.active .menu-link {
  left: 250px;
}
.content {
  margin: 0 auto;
  padding: 0 2em;
  max-width: 800px;
  margin-bottom: 50px;
  line-height: 1.6em;
}
.header {
  margin: 0;
  color: #333;
  text-align: center;
  padding: 2.5em 2em 0;
  border-bottom: 1px solid #eee;
}
.header h1 {
  margin: 0.2em 0;
  font-size: 3em;
  font-weight: 300;
}
.header h2 {
  font-weight: 300;
  color: #ccc;
  padding: 0;
  margin-top: 0;
}
.content-subhead {
  margin: 50px 0 20px 0;
  font-weight: 300;
  color: #888;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
  margin-left: -250px;
  /* "#menu" width */
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  /* so the menu or its navicon stays above all content */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/*
    Remove all background/borders, since we are applying them to #menu.
    */
#menu .pure-menu,
#menu .pure-menu ul {
  border: none;
  background: transparent;
}
/*
    This styles the menu heading.
    */
#menu .pure-menu-heading {
  font-size: 110%;
  color: #fff;
  margin: 0;
}
.menu-link {
  position: fixed;
  display: block;
  /* show this only on small screens */
  top: 0;
  left: 0;
  /* "#menu width" */
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  font-size: 10px;
  /* change this value to increase/decrease button size */
  z-index: 10;
  width: 50px;
  height: auto;
  padding: 25px 15px;
}
.menu-link:hover,
.menu-link:focus {
  background: #000;
}
.menu-link span {
  position: relative;
  display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
  background-color: #fff;
  width: 20px;
  height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
  position: absolute;
  margin-top: -0.6em;
  content: " ";
}
.menu-link span:after {
  margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
  .header,
  .content {
    padding-left: 2em;
    padding-right: 2em;
  }
  #layout {
    padding-left: 250px;
    /* left col width "#menu" */
    left: 0;
  }
  #menu {
    left: 250px;
  }
  .menu-link {
    position: fixed;
    left: 250px;
    display: none;
  }
  #layout.active .menu-link {
    left: 250px;
  }
}
@media (max-width: 48em) {
  /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
  #layout.active {
    position: relative;
    left: 250px;
  }
}
.sns-icons {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}
.sns-icon {
  font-size: 24px;
  margin: 0 10px;
  color: #fff;
  transition: color 0.3s ease;
}
.sns-icon:hover {
  color: #ccc;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}