#header {
  display: flex;
  justify-content: space-between;
  padding: 30px 50px 30px 50px;
  align-items: center;
  position: static; }
  #header #mobile-menu-opener:hover {
    cursor: pointer; }
  #header nav#top-menu {
    display: none; }
    #header nav#top-menu #mobile-menu-closer {
      display: none; }
    #header nav#top-menu #social-icon {
      display: none; }
    #header nav#top-menu.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background: #8a909a;
      z-index: 100; }
      #header nav#top-menu.open .nav-list {
        flex-grow: 1; }
      #header nav#top-menu.open #mobile-menu-closer {
        display: flex;
        justify-content: end;
        --line-size: 32px;
        --half-line-size: calc(var(--line-size) / 2); }
        #header nav#top-menu.open #mobile-menu-closer .button {
          width: var(--line-size);
          height: var(--line-size);
          position: relative;
          margin: 20px 20px; }
          #header nav#top-menu.open #mobile-menu-closer .button .line {
            position: absolute;
            width: var(--line-size);
            height: 0.5px;
            background: white;
            transform-origin: left top; }
          #header nav#top-menu.open #mobile-menu-closer .button:active .line {
            background: grey; }
          #header nav#top-menu.open #mobile-menu-closer .button .line:first-child {
            transform: translate(var(--half-line-size), var(--half-line-size)) rotate(45deg) translateX(calc(-1 * var(--half-line-size))); }
          #header nav#top-menu.open #mobile-menu-closer .button .line:last-child {
            transform: translate(var(--half-line-size), var(--half-line-size)) rotate(-45deg) translateX(calc(-1 * var(--half-line-size))); }
      #header nav#top-menu.open #social-icon {
        display: flex;
        margin: 40px;
        gap: 10px; }
        #header nav#top-menu.open #social-icon img {
          width: 35px; }
      #header nav#top-menu.open ol, #header nav#top-menu.open ul {
        list-style: none;
        margin: 50px 0; }
      #header nav#top-menu.open .nav-item {
        color: white;
        display: block;
        padding: 0 0 24px;
        margin: 0; }
        #header nav#top-menu.open .nav-item a {
          text-decoration: none;
          color: white; }
  @media screen and (min-width: 600px) {
    #header #mobile-menu-opener {
      display: none; }
    #header nav#top-menu {
      display: block; }
      #header nav#top-menu ol, #header nav#top-menu ul {
        list-style: none;
        display: flex;
        gap: 20px; }
      #header nav#top-menu .nav-item {
        position: relative;
        color: #37383C;
        font-size: 12px;
        font-family: "hiragino-kaku-gothic-pron", sans-serif;
        font-weight: 600;
        font-style: normal; }
        #header nav#top-menu .nav-item a {
          text-decoration: none;
          color: #333333; }
        #header nav#top-menu .nav-item a::after {
          position: absolute;
          left: 0;
          content: '';
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, #64AD80, transparent);
          bottom: -1px;
          transform: scale(0, 1);
          transform-origin: left top;
          transition: transform 0.3s; }
        #header nav#top-menu .nav-item a:hover::after {
          transform: scale(1, 1); }
      #header nav#top-menu .nav-item:last-of-type:after {
        content: "";
        width: 1px;
        height: 23px;
        background-color: #E5E5E5;
        position: absolute;
        left: -10px;
        top: -3px; } }

#footer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%; }
#footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto; }
  #footer nav a {
    color: #333333;
    font-size: 10px; }
  #footer nav ol, #footer nav ul {
    list-style: none;
    display: flex;
    gap: 10px; }
  #footer nav img {
    width: 25px; }

@media screen and (min-width: 600px) {
  #footer img {
    width: 50%; }
  #footer a {
    font-size: 10px; }
  #footer nav {
    justify-content: right;
    margin: 0 120px 0 0; }
    #footer nav img {
      width: 30px; } }
#project header#our-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px; }
  #project header#our-project #project-top-img img {
    width: 40vw; }
  #project header#our-project .page-title-box {
    position: static;
    left: auto;
    top: auto;
    width: 50vw;
    flex-grow: 0; }
#project #project-presentation {
  display: grid;
  grid-template-columns: 100%;
  gap: 20px; }
  #project #project-presentation article, #project #project-presentation .img-cell {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  #project #project-presentation article {
    align-items: center;
    position: relative;
    gap: 10px; }
    #project #project-presentation article p, #project #project-presentation article header {
      width: 85%;
      margin: 0 auto;
      line-height: 2; }
    #project #project-presentation article:nth-of-type(2n+1) p, #project #project-presentation article:nth-of-type(2n+1) header {
      margin-left: 5%;
      margin-right: 10%; }
    #project #project-presentation article:nth-of-type(2n) p, #project #project-presentation article:nth-of-type(2n) header {
      margin-left: 10%;
      margin-right: 5%; }
    #project #project-presentation article p a {
      display: block;
      text-align: center;
      margin: 20px 0 10px 0; }
      #project #project-presentation article p a:first-of-type {
        margin: 20px 0 10px 0; }
      #project #project-presentation article p a img {
        max-height: 100px;
        width: 180px;
        object-fit: contain; }
        #project #project-presentation article p a img.sakuraworks-logo {
          filter: brightness(0);
          height: 42px; }
    #project #project-presentation article header {
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 20px;
      color: #6B809A; }
      #project #project-presentation article header:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #C5CCD6;
        margin-bottom: 10px;
        position: absolute;
        transition: left 1s 0.5s ease-out, right 1s 0.5s ease-out; }
    #project #project-presentation article:nth-of-type(2n) header:after {
      left: 100%; }
    #project #project-presentation article:nth-of-type(2n) header.animated:after {
      left: 10%; }
    #project #project-presentation article:nth-of-type(2n+1) header:after {
      right: 100%; }
    #project #project-presentation article:nth-of-type(2n+1) header.animated:after {
      right: 10%; }
  #project #project-presentation .img-cell {
    gap: 20px;
    padding: 40px 0;
    position: relative; }
    #project #project-presentation .img-cell:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      background: #C5CCD6;
      z-index: -1;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 3s 1s ease-out; }
    #project #project-presentation .img-cell.animated:before {
      opacity: 1.0; }

@media screen and (min-width: 900px) {
  #project #project-presentation {
    grid-template-columns: 50% 50%;
    gap: 0;
      /**
       Select odd image cells and put them in the right hand column. Specify dense auto-flow then to automatically fill the rest.

       There is one image cell per row and it's just about choosing whether it should go in the left or right column. This
       alternates due to the snaking pattern.  We just need to specify the odds, and all the other grid cells will fill
       around them correctly.
      */
    grid-auto-flow: row dense; }
    #project #project-presentation .img-cell:nth-of-type(2n+1) {
      grid-column: 2; }
    #project #project-presentation .img-cell {
      gap: 40px;
      padding: 80px; }
    #project #project-presentation article {
      gap: 20px; }
      #project #project-presentation article header {
        font-size: 25px; }
      #project #project-presentation article p, #project #project-presentation article header {
        width: 60%;
        line-height: 2;
        margin: 0 auto; }
      #project #project-presentation article:nth-of-type(2n+1) p, #project #project-presentation article:nth-of-type(2n+1) header {
        margin: 0 auto; }
      #project #project-presentation article:nth-of-type(2n) p, #project #project-presentation article:nth-of-type(2n) header {
        margin: 0 auto; }
      #project #project-presentation article:nth-of-type(2n) header:after {
        left: 100%; }
      #project #project-presentation article:nth-of-type(2n) header.animated:after {
        left: 15%; }
      #project #project-presentation article:nth-of-type(2n+1) header:after {
        right: 100%; }
      #project #project-presentation article:nth-of-type(2n+1) header.animated:after {
        right: 15%; } }

/*# sourceMappingURL=project.css.map */