* {
   padding: 0;
   margin: 0;
   box-sizing: border-box; 
 }

 body {
   width: 100%;
   height: 100vh;
   background-color: white;
 }

#jhand {
  animation: fill 0.5s ease forwards 3.5s;
}

#jhand path:nth-child(1){
  stroke-dasharray: 1090;
  stroke-dashoffset: 1090;
  animation: line-anim 2s ease forwards;
}

#jhand path:nth-child(2){
  stroke-dasharray: 2746;
  stroke-dashoffset: 2746;
  animation: line-anim 2s ease forwards 0.3s;
}

#jhand path:nth-child(3){
  stroke-dasharray: 499;
  stroke-dashoffset: 499;
  animation: line-anim 2s ease forwards 0.6s;
}

#jhand path:nth-child(4){
  stroke-dasharray: 244;
  stroke-dashoffset: 244;
  animation: line-anim 2s ease forwards 0.9s;
}

#jhand path:nth-child(5){
  stroke-dasharray: 1275;
  stroke-dashoffset: 1275;
  animation: line-anim 2s ease forwards 1.2s;
}

#jhand path:nth-child(6){
  stroke-dasharray: 369;
  stroke-dashoffset: 369;
  animation: line-anim 2s ease forwards 1.5s;
}

#jhand path:nth-child(7){
  stroke-dasharray: 1533;
  stroke-dashoffset: 1533;
  animation: line-anim 2s ease forwards 1.8s;
}

#jhand path:nth-child(8){
  stroke-dasharray: 147;
  stroke-dashoffset: 147;
  animation: line-anim 2s ease forwards 2.1s;
}


@keyframes line-anim {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}

/***********************/
/* ji                  */
/***********************/

#ji {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  animation: fill-ji 0.5s ease forwards 2s;
}

#ji path:nth-child(1){
  stroke-dasharray: 651;
  stroke-dashoffset: 651;
  animation: line-anim-ji 2s ease forwards ;
}

#ji path:nth-child(2){
  stroke-dasharray: 636;
  stroke-dashoffset: 636;
  animation: line-anim-ji 2s ease forwards 0.3s;
}

@keyframes line-anim-ji {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-ji {
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}




/***********************/
/* wa                  */
/***********************/
#wa {
  animation: fill-wa 0.5s ease forwards 2s;
}

#wa path:nth-child(1){
  stroke-dasharray: 1033;
  stroke-dashoffset: 1033;
  animation: line-anim-wa 4s ease forwards;
}
#wa path:nth-child(2){
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: line-anim-wa 4s ease forwards 1s;
}

@keyframes line-anim-wa {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-wa{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}



/***********************/
/* kyouzonkyouei                  */
/***********************/
#kyouzonkyouei {
  animation: fill-kyouzonkyouei 10s ease forwards 2s;
}

#kyouzonkyouei path:nth-child(1){
  stroke-dasharray: 765;
  stroke-dashoffset: 765;
  animation: line-anim-kyouzonkyouei 4s ease forwards ;
}
#kyouzonkyouei path:nth-child(2){
  stroke-dasharray: 118;
  stroke-dashoffset: 118;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(3){
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}

#kyouzonkyouei path:nth-child(4){
  stroke-dasharray: 162;
  stroke-dashoffset: 162;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}

#kyouzonkyouei path:nth-child(5){
  stroke-dasharray: 727;
  stroke-dashoffset: 727;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(6){
  stroke-dasharray: 641;
  stroke-dashoffset: 641;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(7){
  stroke-dasharray: 765;
  stroke-dashoffset: 765;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(8){
  stroke-dasharray: 118;
  stroke-dashoffset: 118;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(9){
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(10){
  stroke-dasharray: 162;
  stroke-dashoffset: 162;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(11){
  stroke-dasharray: 543;
  stroke-dashoffset: 543;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(12){
  stroke-dasharray: 85;
  stroke-dashoffset: 85;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(13){
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}
#kyouzonkyouei path:nth-child(14){
  stroke-dasharray: 821;
  stroke-dashoffset: 821;
  animation: line-anim-kyouzonkyouei 4s ease forwards 1;
}

@keyframes line-anim-kyouzonkyouei {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-kyouzonkyouei{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}

#jituryokusyugi {
  animation: fill-jituryokusyugi 0.5s ease forwards 2s;
}

#jituryokusyugi path:nth-child(1){
  stroke-dasharray: 376;
  stroke-dashoffset: 376;
  animation: line-anim-jituryokusyugi 1s ease forwards ;
}
#jituryokusyugi path:nth-child(2){
  stroke-dasharray: 119;
  stroke-dashoffset: 119;
  animation: line-anim-jituryokusyugi 2s ease forwards 1;
}
#jituryokusyugi path:nth-child(3){
  stroke-dasharray: 728;
  stroke-dashoffset: 728;
  animation: line-anim-jituryokusyugi 2.2s ease forwards 1;
}
#jituryokusyugi path:nth-child(4){
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
  animation: line-anim-jituryokusyugi 2.4s ease forwards 1;
}
#jituryokusyugi path:nth-child(5){
  stroke-dasharray: 915;
  stroke-dashoffset: 915;
  animation: line-anim-jituryokusyugi 2.6s ease forwards 1;
}
#jituryokusyugi path:nth-child(6){
  stroke-dasharray: 915;
  stroke-dashoffset: 915;
  animation: line-anim-jituryokusyugi 2.8s ease forwards 1;
}
#jituryokusyugi path:nth-child(7){
  stroke-dasharray: 116;
  stroke-dashoffset: 116;
  animation: line-anim-jituryokusyugi 2.9s ease forwards 1;
}
#jituryokusyugi path:nth-child(8){
  stroke-dasharray: 1609;
  stroke-dashoffset: 1609;
  animation: line-anim-jituryokusyugi 3s ease forwards 1;
}
#jituryokusyugi path:nth-child(9){
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: line-anim-jituryokusyugi 3.2s ease forwards 1;
}
#jituryokusyugi path:nth-child(10){
  stroke-dasharray: 51;
  stroke-dashoffset: 51;
  animation: line-anim-jituryokusyugi 3.4s ease forwards 1;
}

@keyframes line-anim-jituryokusyugi {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-jituryokusyugi{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}


#situ {
  animation: fill-situ 0.5s ease forwards 2s;
}

#situ path:nth-child(1){
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
  animation: line-anim-situ 2s ease forwards ;
}
#situ path:nth-child(2){
  stroke-dasharray: 105;
  stroke-dashoffset: 105;
  animation: line-anim-situ 2s ease forwards 1;
}
#situ path:nth-child(3){
  stroke-dasharray: 284;
  stroke-dashoffset: 284;
  animation: line-anim-situ 2s ease forwards 1;
}
#situ path:nth-child(4){
  stroke-dasharray: 455;
  stroke-dashoffset: 455;
  animation: line-anim-situ 2s ease forwards 1;
}
#situ path:nth-child(5){
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  animation: line-anim-situ 2s ease forwards 1;
}
#situ path:nth-child(6){
  stroke-dasharray: 124;
  stroke-dashoffset: 124;
  animation: line-anim-situ 2s ease forwards 1;
}

@keyframes line-anim-situ {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-situ{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}


#kyouyuu {
  animation: fill-kyouyuu 0.5s ease forwards 2s;
}


#kyouyuu path:nth-child(1){
  stroke-dasharray: 765;
  stroke-dashoffset: 765;
  animation: line-anim-kyouyuu 2s ease forwards ;
}
#kyouyuu path:nth-child(2){
  stroke-dasharray: 118;
  stroke-dashoffset: 118;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
#kyouyuu path:nth-child(3){
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
#kyouyuu path:nth-child(4){
  stroke-dasharray: 162;
  stroke-dashoffset: 162;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
#kyouyuu path:nth-child(5){
  stroke-dasharray: 1057;
  stroke-dashoffset: 1057;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
#kyouyuu path:nth-child(6){
  stroke-dasharray: 112;
  stroke-dashoffset: 112;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
#kyouyuu path:nth-child(7){
  stroke-dasharray: 125;
  stroke-dashoffset: 125;
  animation: line-anim-kyouyuu 2s ease forwards 1;
}
@keyframes line-anim-kyouyuu {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-kyouyuu{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}

#yuukou {
  animation: fill-yuukou 4.5s ease forwards 4.5s;
}

#yuukou path:nth-child(1){
  stroke-dasharray: 1057;
  stroke-dashoffset: 1057;
  animation: line-anim-yuukou 4s ease forwards ;
}
#yuukou path:nth-child(2){
  stroke-dasharray: 112;
  stroke-dashoffset: 112;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(3){
  stroke-dasharray: 125;
  stroke-dashoffset: 125;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(4){
  stroke-dasharray: 294;
  stroke-dashoffset: 294;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(5){
  stroke-dasharray: 751;
  stroke-dashoffset: 751;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(6){
  stroke-dasharray: 102;
  stroke-dashoffset: 102;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(7){
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(8){
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-anim-yuukou 4s ease forwards 1;
}
#yuukou path:nth-child(9){
  stroke-dasharray: 316;
  stroke-dashoffset: 316;
  animation: line-anim-yuukou 4s ease forwards 1;
}


@keyframes line-anim-yuukou {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-yuukou{
  from {
    fill: transparent;
  }
  to {
    fill: black;
  }
}



.grid {
  list-style: none;
  margin-left: -40px;
}

.gc {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 110px;
  vertical-align: top;
}

.gc--1-of-3 {
  width: 33.33333%;
}

.gc--2-of-3 {
  width: 66.66666%;
}

.naccs {
  position: relative;
  max-width: 900px;
  margin: 100px auto 0;
}

.naccs .menu div {
  padding: 15px 20px 15px 40px;
  font-family: 'Abel', sans-serif;
  margin-bottom: 10px;
  color: #4d769c;
  background: #0e4377;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-weight: 700;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.naccs .menu div span.light {
  height: 10px;
  width: 10px;
  position: absolute;
  top: 24px;
  left: 15px;
  background-color: #0c3760;
  border-radius: 100%;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div.active span.light {
  background-color: #ffff;
  left: 0;
  height: 100%;
  width: 3px;
  top: 0;
  border-radius: 0;
}

.naccs .menu div.active {
  color: #ffff;
  padding: 15px 20px 15px 20px;
}

.nacc h1 {
  font-size: 120px;
}

ul.nacc {
  position: relative;
  height: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
  opacity: 0;
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
  transition-delay: .3s;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

ul.nacc li p {
  margin: 0;
}


.philocard h1 {
  font-size: 75px;
}



/** Card Reveal  ***/