.content main .grid1 {
  background: rgba(107, 107, 107, 0.5);
  min-height: calc(100vh - 85px);
}

.content main .grid1 .BG {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: 1s;
  transition: 1s;
  background-image: url("/assets/img/BG3.jpg");
  -webkit-filter: blur(6px);
          filter: blur(6px);
}

.content main .grid1 .BG img {
  height: 100%;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: -1000%;
  z-index: 2050;
}

.content main .grid1 .BG img.show {
  right: auto;
  left: 0px;
  -webkit-animation: changeSlide .8s;
          animation: changeSlide .8s;
}

@-webkit-keyframes changeSlide {
  0% {
    right: auto;
    left: 100vw;
  }
  100% {
    left: 0px;
  }
}

@keyframes changeSlide {
  0% {
    right: auto;
    left: 100vw;
  }
  100% {
    left: 0px;
  }
}

.content main .grid1 .cover {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content main .grid1 .content {
  max-width: 1000px;
  margin: auto;
}

.content main .grid1 .content .profile {
  position: relative;
  display: inline-block;
  width: 70%;
  min-width: 240px;
  margin: 10% auto;
  left: calc((100% - 70%) / 2);
  z-index: 2099;
}

.content main .grid1 .content .profile .title {
  position: relative;
  z-index: 1800;
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  -webkit-filter: drop-shadow(5px 7px 3px #000);
          filter: drop-shadow(5px 7px 3px #000);
}

.content main .grid1 .content .profile .title .name {
  font-size: 72px;
}

.content main .grid1 .content .profile .title .sub {
  font-size: 24px;
}

.content main .grid1 .content .profile .icon {
  position: absolute;
  display: inline-block;
  top: -13px;
  right: -30px;
  z-index: 1000;
  -webkit-filter: drop-shadow(20px 20px 15px #333);
          filter: drop-shadow(20px 20px 15px #333);
}

.content main .grid1 .content .profile .icon img {
  width: 350px;
  border-radius: 50px;
}

@media screen and (max-width: 480px) {
  .content main .grid1 .content .profile .icon img {
    width: 100%;
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
  }
}

.content main .grid1 .content .profile .detail {
  display: inline-block;
  position: relative;
  z-index: 1801;
  font-size: 22px;
  width: 70%;
  font-family: 'M PLUS 1 Code', sans-serif;
  margin: 30px auto;
  max-width: 500px;
  background: rgba(85, 85, 85, 0.6);
}

@media screen and (max-width: 480px) {
  .content main .grid1 .content .profile .detail {
    width: 100%;
  }
}

.content main .grid1 .content .profile .detail p {
  margin: 10px;
  color: #fff;
}

.content main .grid2 {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 50px;
}

.content main .grid2 .content {
  width: 85%;
  max-width: 1200px;
  margin: auto;
}

.content main .grid2 .content .title {
  border-bottom: 3px solid #202020;
}

.content main .grid2 .content .title span {
  font-size: 72px;
  font-family: 'M PLUS 1 Code', sans-serif;
}

.content main .grid2 .content .sections {
  font-size: 0px;
}

.content main .grid2 .content .sections .flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.content main .grid2 .content .sections .flex-box section {
  display: inline-block;
  width: 42%;
  margin: 10px 2%;
  min-width: 200px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 10px 2%;
  vertical-align: top;
}

.content main .grid2 .content .sections section {
  font-size: 16px;
  width: calc(96% - (4% / 2));
  margin: 10px auto;
  padding: 10px;
  background: rgba(146, 146, 146, 0.658);
}

.content main .grid2 .content .sections section h2.title {
  border-bottom: 1px solid #000;
  width: 30%;
  min-width: 200px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 24px;
}

.content main .grid2 .content .sections section p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
}

.content main .grid2 .content .sections section a {
  color: #666666;
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s;
}

.content main .grid2 .content .sections section a:hover {
  color: #f7f7f7;
}

.content main .grid3 {
  padding: 50px 0px;
  width: 100%;
  background: #313131;
}

.content main .grid3 .content {
  position: relative;
  z-index: 2000;
  width: 60%;
  min-width: 240px;
  max-width: 800px;
  margin: auto;
}

@media screen and (max-width: 480px) {
  .content main .grid3 .content {
    width: 90%;
    min-width: none;
  }
}

.content main .grid3 .content .title {
  font-size: 48px;
  background: #fff;
  text-align: center;
  font-family: 'Yusei Magic', sans-serif;
  padding: 10px 0px;
  width: 250px;
  margin: 0px auto 50px auto;
}

.content main .grid3 .content .tab a {
  display: inline-block;
  background: #fff;
  padding: 10px 20px;
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 5px 5px 0px 0px;
  color: #000;
  font-size: 22px;
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s;
}

.content main .grid3 .content .tab a.selected {
  background: #202020;
  color: #d5d5d5;
}

.content main .grid3 .content .tab a.selected:hover {
  background: #333;
  color: #e0e0e0;
}

.content main .grid3 .content .tab a:hover {
  background: #e0e0e0;
  color: #333;
}

.content main .grid3 .content .works_window {
  display: block;
  padding: 20px;
  background: #fff;
  min-height: 100px;
  border: 3px solid #000;
  max-height: 95%;
  height: 450px;
}

.content main .grid3 .content .works_window iframe {
  width: 100%;
  height: calc(100% - 20px);
  border: 1px solid #333;
}

.content main .grid3 .bg {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.content main .grid3 .bg .bg_pencil {
  position: absolute;
  right: 85px;
  -webkit-transform: rotate(45deg) scale(500%);
          transform: rotate(45deg) scale(500%);
}

.content main .grid3 .bg .bg_maru1 {
  position: absolute;
  background-image: url("/assets/img/bg/bg_circl.svg");
  width: 300px;
  height: 200px;
  bottom: 20px;
  left: 50px;
}

.content main .grid3 .bg .bg_batsu1 {
  position: absolute;
  background-image: url("/assets/img/bg/bg_cross.svg");
  width: 300px;
  height: 200px;
  bottom: 200px;
  right: 50px;
}

.content main .grid3 .bg .bg_down1 {
  position: absolute;
  background-image: url("/assets/img/bg/bg_down.svg");
  width: 300px;
  height: 200px;
  top: 50px;
  left: -20px;
}

.content main .grid3 .bg-protect {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
}

.content main .grid4 {
  background: #cccccc;
  padding: 100px 0px;
}

.content main .grid4 .content {
  width: 75%;
  min-width: 280px;
  margin: auto;
  padding: 25px;
  background: #fffa;
}

.content main .grid4 .content .title {
  display: block;
  font-size: 28px;
  margin-bottom: 0px;
  text-align: center;
  font-weight: lighter;
  letter-spacing: 5px;
}

.content main .grid4 .content .subtitle {
  display: block;
  margin-top: 0px;
  margin-bottom: 5px;
  font-size: smaller;
  font-weight: lighter;
  text-align: center;
}

.content main .grid4 .content .__GRID_UNDERLINE__ {
  display: block;
  width: 80%;
  margin: auto;
  text-align: center;
  border-bottom: #666 1px solid;
}

.content main .grid4 .content .contact_btn_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 25px auto;
}

.content main .grid4 .content .contact_btn_box .btn {
  margin: 10px;
  border: 3px solid #444;
}

.content main .grid4 .content .contact_btn_box .btn a {
  display: inline-block;
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  -webkit-transition: .5s;
  transition: .5s;
  background: #444;
  color: #fff;
}

.content main .grid4 .content .contact_btn_box .btn a:hover {
  color: #333;
  background: #eee;
  -webkit-transition: .3s;
  transition: .3s;
}
/*# sourceMappingURL=index.css.map */