@charset"utf-8";
@keyframes move {
  100% {
    margin-left: 1em;
  }
}
html {
  overflow-y: scroll;
}
body {
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.container {
  width: 1050px;
  padding: 0;
  font-size: 14px;
  line-height: 2em;
  margin-left: auto;
  margin-right: auto;
}
.side {
  float: left;
  width: 14em;
  margin-right: 1em;
  position: fixed;
  letter-spacing: 0;
  font-family: helvetica-neue-lt-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.side header {
  margin-top: 4em;
}
.side .category a:hover {
  background-color: #00f;
  color: #fff;
}
.side p {
  margin: 0;
  color: #000000;
  font-family: helvetica-neue-lt-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.side .category ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side .category a {
  color: #C0C0C0;
  text-decoration: none;
}
.main:after {
  content: "";
  display: block;
  clear: both;
}
#home .side {
  width: 10em;
  margin-right: 1em;
}
#home .main {
  float: left;
  margin-top: 4em;
  margin-left: 11em;
  width: 63em;
  height: auto;
  margin-bottom: 0.5em;
}
#home .main div {
  float: left;
  width: 17em;
  hight: 17em;
  margin-left: 4em;
  margin-bottom: 4em;
}
#home .main div img {
  float: left;
  width: 100%;
  hight: auto;
}
#home .main div a:hover {
  outline: 14px solid #00f;
  outline-offset: -14px;
}
/*#home .main div {
  background: #00f;
}
#home .main div a:hover {
  opacity: 0;
}*/
#design .main {
  float: left;
  margin-left: 15em;
  margin-right: 1em;
  width: 60em;
}
#design .main .content {
  margin-bottom: 20.5em;
}
#design .main .height_four_em {
  height: 4em;
}
#design .main p {
  margin-top: 0;
  margin-bottom: 1em;
  margin-right: 1em;
}
#design .main img {
  width: 59em;
  height: auto;
  margin-right: 1em;
  margin-bottom: 1em;
}
#design .main #book2020 {
  margin-bottom: 32.5em;
}
#design .carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 2em;
  width: 59em;
}
#design .carousel img {
  margin-bottom: 0;
}
#design .carousel .last-photo {
  margin-right: 0;
}
#design .carousel::-webkit-scrollbar {
  background: #fff;
  height: 1em;
}
#design .carousel::-webkit-scrollbar-thumb {
  background-color: #00f;
}
#about .main {
  float: left;
  margin-top: 4em;
  margin-left: 15em;
  margin-right: 1em;
  width: 59em;
}
#about .main p {
  margin: 0;
}
#about .main a {
  text-decoration: none;
  color: #000000;
}
#about .main a:hover {
  text-decoration: none;
  background-color: #00f;
  color: #fff;
}
#about .main .link {
  font-family: helvetica-neue-lt-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*#column article {
  margin-bottom: 4em;
}
#column article ul {
  margin: 0;
  padding-left: 2em;
  list-style: none;
}
#column article a {
  padding-left: 1em;
  text-decoration: none;
  color: #000000;
}
#column article a:hover {
  animation: move 400ms forwards;
}
#column article span, #column_0 .text span {
  margin: 0;
  padding: 0;
}
#column article .color, #column_0 .text .color {
  color: #00ff00;
   color: #00ccaa;
}
#column .main .references0 {
  margin-bottom: 8em;
}
#column_0 .category .bold {
  color: #000000;
}
#column_0 .text {
  width: 59em;
  margin-right: 1em;
  margin-bottom: 10em;
}
#column_0 .text a {
  text-decoration: none;
  color: #000000;
}
#column_0 .text a:hover {
  color: #00ff00;
}*/
/*#column .main .references {
  font-size: 10px;
  line-height: 1.6em;
  margin-top: 6px;
}*/
footer {
  margin-top: 16em;
  position: fixed;
  color: #000000;
  letter-spacing: normal;
  font-family: helvetica-neue-lt-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}
footer span {
  margin: 0;
  color: #c0c0c0;
  font-size: 12px;
}
@media (max-width: 44em) {
  .container {
    width: 100%;
  }
  .side {
    width: 100%;
    margin-top: 2em;
    position: fixed;
  }
  .side header {
    margin-top: 0;
    margin-left: 3%;
  }
  .side p {
    display: none;
  }
  .side .category {
    float: right;
    margin-top: -2em;
    margin-right: 7.5%;
  }
  .side .category li {
    display: inline;
    margin-left: 1em;
  }
  .side .category a:hover {
    animation: none;
  }
  .side header span, .side .category li {
    background-color: #ffffff;
  }
  /* .main {
    float: left;
    width: 100%;
    margin-top: 8em;
    margin-left: 4%;
  }*/
  .main:after {
    content: "";
    display: block;
    clear: both;
  }
  footer {
    margin-bottom: 2em;
  }
  #home .side {
    width: 100%;
  }
  #home .main {
    margin-top: 8em;
    margin-left: 3%;
    width: 100%;
  }
  #home .main div {
    width: 28%;
    margin-left: 0%;
    margin-right: 4%;
    margin-bottom: 4%;
  }
  #design .main {
    margin-left: 3%;
    width: 100%;
  }
  #design .main div {
    margin-right: 8%;
  }
  #design .carousel {
    width: 100%;
  }
  #design .carousel img {
    width: 100%;
  }
  #design .main .content {
    margin-bottom: 16.5em;
  }
  #design .main .height_four_em {
    height: 8em;
  }
  #about .main {
    width: 100%;
    margin-top: 8em;
    margin-left: 3%;
  }
  #about article {
    margin-right: 8%;
  }
  #about .profile br {
    display: none;
  }
  /*	 #about .profile {
    margin-bottom: 4em;
  }*/
  /*#column_0 .text {
    width: 100%;
  }
  #column_0 .text div {
    margin-right: 8%;
  }*/
  footer {
    float: left;
    margin-top: 4em;
    margin-left: 4%;
    position: relative
  }
}