html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0);
  box-sizing: border-box
}

input,
textarea {
  box-sizing: border-box
}

body {
  line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

nav ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0)
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold
}

del {
  text-decoration: line-through
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0
}

input,
select {
  vertical-align: middle
}

html {
  font-size: 62.5%
}

p {
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: .06rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif
}

@media screen and (min-width: 768px) {
  p {
    font-size: 1.4rem;
    line-height: 2
  }
}

img {
  width: 100%;
  height: auto;
  display: block
}

.forSp {
  display: block
}

@media screen and (min-width: 768px) {
  .forSp {
    display: none
  }
}

.forPc {
  display: none
}

@media screen and (min-width: 768px) {
  .forPc {
    display: block
  }
}

@media screen and (min-width: 768px) {
  .pcMb60 {
    margin-bottom: 6rem !important
  }
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none
}

[dir=rtl] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0)
}

.slick-arrow.slick-hidden {
  display: none
}

@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal
}

.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0)
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .25
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: #fff;
  opacity: .75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-prev {
  left: -25px
}

[dir=rtl] .slick-prev {
  left: auto;
  right: -25px
}

.slick-prev:before {
  content: "←"
}

[dir=rtl] .slick-prev:before {
  content: "→"
}

.slick-next {
  right: -25px
}

[dir=rtl] .slick-next {
  left: -25px;
  right: auto
}

.slick-next:before {
  content: "→"
}

[dir=rtl] .slick-next:before {
  content: "←"
}

.slick-dotted.slick-slider {
  margin-bottom: 30px
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer
}

.slick-dots li button {
  border: 0;
  background: rgba(0, 0, 0, 0);
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: rgba(0, 0, 0, 0);
  padding: 5px;
  cursor: pointer
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1
}

.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: #000;
  opacity: .25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
  color: #000;
  opacity: .75
}

.header {
  position: relative
}

.header__ttl {
  padding: 10px;
  color: #fff;
  background: #333;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-30px);
  transition: all .7s ease-in-out
}

@media screen and (min-width: 768px) {
  .header__ttl {
    padding: 20px;
    max-width: 50px;
    max-height: 50px;
    top: 7rem;
    left: 9rem
  }
}

.btn {
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 101
}

.btn__top {
  width: 90%;
  height: 1px;
  background: #333;
  display: block;
  transition: all .3s ease
}

.btn__bottom {
  width: 90%;
  height: 1px;
  background: #333;
  display: block;
  transform: translateY(-10px);
  transition: all .3s ease
}

.gnav {
  padding: 90px 0;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  transform: translateY(-100%) !important;
  z-index: 100;
  background: #f7f7f8
}

@media screen and (min-width: 768px) {
  .gnav {
    padding-top: 150px;
    height: 100%;
    transform: translateY(0);
    transition: ease-in-out .8s;
    transform: translate(30px)
  }
}

.gnav__item {
  margin-bottom: 32px
}

.gnav__item:first-child {
  transition-delay: .1s;
  transform: translate(0)
}

.gnav__item:nth-child(2) {
  transition-delay: .2s;
  transform: translate(0)
}

.gnav__item:nth-child(3) {
  transition-delay: .3s;
  transform: translate(0)
}

.gnav__item:nth-child(4) {
  transition-delay: .4s;
  transform: translate(0)
}

.gnav__item:nth-child(5) {
  transition-delay: .5s;
  transform: translate(0)
}

.gnav__item:nth-child(6) {
  transition-delay: .6s;
  transform: translate(0)
}

.gnav__link {
  font-size: 1.8rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  display: block
}

.footer__colWrapper {
  padding: 7rem 0 7rem 4rem;
  background: #f7f7f8
}

@media screen and (min-width: 1024px) {
  .footer__colWrapper {
    padding: 10rem 10rem 5.5rem
  }
}

.footer__ttl {
  margin-bottom: 2rem;
  padding: 2rem;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #333
}

.footer__coName {
  margin-bottom: 1.2rem;
  font-size: 1.1rem
}

.footer__coAddress {
  font-size: 1.1rem
}

.footer__copy {
  margin-top: 4rem;
  font-size: 1rem;
  display: block
}

@media screen and (min-width: 768px) {
  .footer__copy {
    margin-top: 2rem;
    margin-right: 4%;
    text-align: right
  }
}

.fnav {
  width: 100%;
  background: #f7f7f8
}

@media screen and (min-width: 768px) {
  .fnav__nav {
    text-align: right
  }
}

.fnav__item {
  margin-bottom: 32px
}

@media screen and (min-width: 768px) {
  .fnav__item {
    margin: 0 4% 0 0;
    display: inline-block
  }
}

.fnav__link {
  font-size: 1.6rem;
  color: #333;
  text-decoration: none;
  display: block
}

.top {
  position: relative
}

.top__link {
  text-decoration: none;
  color: #999;
  font-weight: bold;
  transform: rotate(90deg);
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 4rem
}

.kv {
  overflow: hidden;
  opacity: 0;
  transition: ease .7s .1s
}

@media screen and (min-width: 768px) {
  .kv {
    margin-bottom: 23rem
  }
}

.kv__img {
  width: 100%;
  height: 600px;
  background: url(/works/corporate_design/img/kv.jpg) center center/cover;
  position: relative;
  z-index: 1
}

.kv__img::before {
  content: "";
  background: #fff;
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: -334px;
  left: 0;
  transform: skewY(15deg) translateY(-250px)
}

@media screen and (min-width: 768px) {
  .kv__img::before {
    bottom: -500px;
    height: 500px
  }
}

@media screen and (min-width: 768px) {
  .kv__img {
    height: 100vh
  }
}

.kv__ttlWrapper {
  padding: 0 20px;
  position: relative;
  top: -150px;
  z-index: 2
}

@media screen and (min-width: 768px) {
  .kv__ttlWrapper {
    top: 0;
    margin: -200px 0 5.5rem 0;
    padding: 0 40px
  }
}

.kv__ttl,
.kv__txt {
  overflow: hidden;
  opacity: 0
}

.kv__slideTtl {
  overflow: hidden;
  display: inline-block;
  transform: translate(-100%, 0);
  animation: slideTxt .8s 2.2s ease-in forwards
}

.kv__slideTtl>span {
  margin-bottom: 1.3rem;
  font-size: 3.4rem;
  font-weight: 800;
  display: inline-block;
  transform: translate(100%, 0);
  animation: slideTxt .8s 2.2s ease-in forwards;
  opacity: 0
}

@media screen and (min-width: 768px) {
  .kv__slideTtl>span {
    margin-bottom: 2rem;
    font-size: 5.8rem
  }
}

.kv__slideTxt {
  line-height: 2;
  overflow: hidden;
  display: inline-block;
  transform: translate(-100%, 0);
  animation: slideTxt .82s 3s ease-in forwards;
  opacity: 0
}

.kv__slideTxt>span {
  display: inline-block;
  transform: translate(100%, 0);
  animation: slideTxt .82s 3s ease-in forwards;
  opacity: 0
}

@keyframes slideTxt {
  100% {
    opacity: 1;
    transform: translate(0, 0)
  }
}

.ttl {
  margin-bottom: 4rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column
}

@media screen and (min-width: 768px) {
  .ttl {
    margin-bottom: 8rem
  }
}

.ttl>span {
  font-size: 2.8rem;
  letter-spacing: .1rem
}

.ttl>span:nth-child(2) {
  font-size: 1.2rem;
  letter-spacing: .1rem;
  font-weight: normal
}

.moreLink {
  text-decoration: none;
  color: #333;
  text-align: right;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative
}

.moreLink::before {
  content: "";
  width: 2px;
  height: 2px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
  font-weight: bold;
  display: block;
  position: absolute;
  right: 5px
}

.moreLink::after {
  content: "";
  margin-left: 15px;
  width: 1rem;
  height: 1rem;
  font-weight: bold;
  border: 1px solid #333;
  border-radius: 50%
}

.about {
  padding-bottom: 150px;
  position: relative;
  z-index: 2
}

@media screen and (min-width: 768px) {
  .about {
    padding-bottom: 400px
  }
}

.about__ttl {
  text-align: center
}

.about__sb-ttl {
  text-align: center
}

.about__txt {
  margin-top: 60px;
  text-align: center
}

.about__img {
  margin-right: 100px
}

.about__img--01 {
  padding-top: 23rem;
  width: 400px !important;
  background: url("/works/corporate_design/img/img01.jpg") center center/cover
}

@media screen and (min-width: 768px) {
  .about__img--01 {
    padding-top: 41.9rem;
    width: 800px !important
  }
}

.about__img--02 {
  padding-top: 23rem;
  width: 400px !important;
  background: url("/works/corporate_design/img/img02.jpg") center center/cover
}

@media screen and (min-width: 768px) {
  .about__img--02 {
    padding-top: 41.9rem;
    width: 800px !important
  }
}

.about__img--03 {
  padding-top: 23rem;
  width: 400px !important;
  background: url("/works/corporate_design/img/img03.jpg") center center/cover
}

@media screen and (min-width: 768px) {
  .about__img--03 {
    padding-top: 41.9rem;
    width: 800px !important
  }
}

.about__container {
  margin: -7rem 7rem 0 0;
  padding: 5rem 0 0;
  max-width: 618px;
  background: #fff;
  position: relative;
  z-index: 50
}

@media screen and (min-width: 768px) {
  .about__container {
    margin-left: 10rem
  }
}

.about__containerTtl:first-child {
  margin-bottom: 15px;
  padding: 0 4rem;
  font-size: 3.4rem;
  display: block;
  transition-delay: 0s
}

.about__containerTtl:nth-child(2) {
  margin-bottom: 4rem;
  padding: 0 4rem;
  font-size: 1.7rem;
  display: block;
  transition-delay: .1s
}

.about__txtWrapper {
  padding: 0 4rem;
  max-width: 618px
}

@media screen and (min-width: 768px) {
  .about__txtWrapper {
    margin-left: 10rem
  }
}

.about__txt {
  margin-bottom: 4rem;
  transition-delay: .2s
}

.about__linkWrapper {
  padding: 0 4rem
}

@media screen and (min-width: 768px) {
  .about__linkWrapper {
    padding: 0;
    position: absolute;
    right: 21%
  }
}

.news {
  padding: 20px 0;
  position: relative;
  z-index: 1;
  background: #f7f7f8
}

.news::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #f7f7f8;
  transform: skewY(-15deg)
}

@media screen and (min-width: 768px) {
  .news::before {
    top: -150px;
    height: 300px
  }
}

@media screen and (min-width: 768px) {
  .news {
    padding: 100px 0 230px
  }
}

.news__ttl {
  text-align: center
}

.news__sb-ttl {
  text-align: center
}

.news__colwrapper {
  padding-bottom: 7rem;
  display: flex;
  flex-wrap: wrap
}

@media screen and (min-width: 768px) {
  .news__colwrapper {
    padding-bottom: 18rem;
    justify-content: space-between;
    align-items: center
  }
}

.news__colwrapper:last-child {
  margin-bottom: 0
}

.news__col {
  width: 100%
}

@media screen and (min-width: 768px) {
  .news__col {
    width: 50%
  }
}

.news__col--02 {
  margin-bottom: 4rem
}

@media screen and (min-width: 768px) {
  .news__col--02 {
    margin-bottom: 0
  }
}

.news__img {
  margin-bottom: 4rem;
  width: 80%;
  max-height: 200px
}

@media screen and (min-width: 768px) {
  .news__img {
    margin-bottom: 0;
    width: 100%;
    max-height: 400px
  }
}

.news__img {
  display: block
}

.news__img--01 {
  transition-delay: .1s;
  transform: translateY(100px)
}

.news__img--02 {
  margin-left: auto;
  transition-delay: .2s;
  transform: translateY(100px)
}

@media screen and (min-width: 768px) {
  .news__img--02 {
    margin: auto
  }
}

.news__img--03 {
  transition-delay: .3s;
  transform: translateY(100px)
}

.news__num {
  padding: 0 4rem 3rem;
  font-weight: bold;
  display: block;
  transition-delay: .1s
}

.news__num:nth-child(2) {
  transition-delay: .2s
}

.news__num:nth-child(3) {
  transition-delay: .3s
}

.news__colTtl {
  margin-bottom: 10px;
  padding-left: 4rem;
  font-size: 2.6rem
}

.news__colSbTtl {
  margin-bottom: 4rem;
  padding: 0 4rem;
  display: block;
  transition-delay: .1s
}

.news__colSbTtl:nth-child(2) {
  transition-delay: .2s
}

.news__colSbTtl:nth-child(2) {
  transition-delay: .3s
}

.news__txt {
  padding: 0 4rem;
  transition-delay: .1s
}

@media screen and (min-width: 768px) {
  .news__txt {
    padding: 0 4rem 4rem
  }
}

.news__txt:nth-child(2) {
  transition-delay: .2s
}

.news__txt:nth-child(3) {
  transition-delay: .3s
}

.news__moreLinkWrapper {
  padding: 0 4rem
}

.recruit {
  padding-bottom: 10rem;
  position: relative;
  z-index: 2
}

@media screen and (min-width: 768px) {
  .recruit {
    padding-bottom: 23rem
  }
}

.recruit__imgWrapper {
  position: relative;
  opacity: 0
}

.recruit__imgWrapper.fadeIn::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  animation: fadeAnime ease .7s .7s forwards
}

@keyframes fadeAnime {
  100% {
    transform: translate(-100%)
  }
}

.recruit__img {
  margin-bottom: 4rem;
  width: 100%;
  max-height: 700px;
  position: relative;
  z-index: -1
}

.recruit__wrapper {
  position: relative;
  z-index: 2
}

.recruit__container {
  margin: -7rem 7rem 0 0;
  padding: 5rem 0 0;
  max-width: 618px;
  background: #fff
}

@media screen and (min-width: 768px) {
  .recruit__container {
    margin: -10rem 0 0 10rem
  }
}

.recruit__containerTtl {
  opacity: 0;
  transform: translateY(-500px);
  transition: all .7s
}

.recruit__containerTtl:first-child {
  margin-bottom: 15px;
  padding: 0 4rem;
  font-size: 3.4rem;
  display: block;
  transition: .1s .7s
}

.recruit__containerTtl:nth-child(2) {
  margin-bottom: 4rem;
  padding: 0 4rem;
  font-size: 1.7rem;
  display: block;
  transition: .2s .7s
}

.recruit__txtWrapper {
  padding: 0 4rem;
  max-width: 618px
}

@media screen and (min-width: 768px) {
  .recruit__txtWrapper {
    margin-left: 10rem
  }
}

.recruit__txt {
  margin-bottom: 4rem;
  opacity: 0;
  transform: translateY(-500px);
  transition: all .7s
}

.recruit__txt:first-child {
  transition: .3s .7s
}

.recruit__txt:nth-child(2) {
  transition: .4s .7s
}

.recruit__linkWrapper {
  padding: 0 4rem
}

.recruit__linkWrapper {
  padding: 0 4rem
}

@media screen and (min-width: 768px) {
  .recruit__linkWrapper {
    padding: 0;
    position: absolute;
    right: 21%
  }
}

.contact {
  margin-bottom: 12rem
}

.contact__wrapper {
  margin: 0 auto;
  padding: 7rem 20px;
  width: 100%;
  background: url("/works/corporate_design/img/contact.png") center center/cover;
  opacity: 0;
  transition: ease .7s .8s
}

.contact__ttlWrapper {
  display: flex;
  justify-content: center
}

@media screen and (min-width: 768px) {
  .contact .ttl {
    margin-bottom: 3.5rem
  }
}

.contact__ttl {
  text-align: center;
  color: #fff
}

.contact__sbTtl {
  text-align: center;
  color: #fff
}

.contact__txt {
  color: #fff;
  text-align: center
}

@media screen and (min-width: 768px) {
  .contact__txt {
    margin-bottom: 4.5rem
  }
}

.contact__colWrapper {
  max-width: 880px;
  margin: 0 auto
}

@media screen and (min-width: 768px) {
  .contact__colWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
  }
}

.contact__tel {
  margin-bottom: 4rem;
  color: #fff;
  text-align: center;
  font-size: 3.2rem
}

@media screen and (min-width: 768px) {
  .contact__tel {
    width: calc(50% - 133px);
    text-align: left
  }
}

.contact__time {
  margin-top: -7px;
  color: #fff;
  text-align: center;
  font-size: 1.3rem;
  display: block
}

@media screen and (min-width: 768px) {
  .contact__time {
    text-align: left
  }
}

.contact__btn {
  margin: 0 auto;
  padding: 2.2rem 0 2rem;
  width: 70%;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background: #fff;
  color: #333;
  display: block;
  transition: all .3s
}

.contact__btn:hover {
  background: rgba(0, 0, 0, .247);
  color: #fff
}

@media screen and (min-width: 768px) {
  .contact__btnWrapper {
    width: calc(50% - 133px)
  }
}

.load {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 200
}

.load__loader {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  border-radius: 50%;
  text-indent: -9999em;
  animation: load5 1.1s infinite ease;
  transform: translateZ(0);
  position: absolute
}

@keyframes load5 {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #0f0f0f, 1.8em -1.8em 0 0em rgba(15, 15, 15, .2), 2.5em 0em 0 0em rgba(15, 15, 15, .2), 1.75em 1.75em 0 0em rgba(15, 15, 15, .2), 0em 2.5em 0 0em rgba(15, 15, 15, .2), -1.8em 1.8em 0 0em rgba(15, 15, 15, .2), -2.6em 0em 0 0em rgba(15, 15, 15, .5), -1.8em -1.8em 0 0em rgba(15, 15, 15, .7)
  }

  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .7), 1.8em -1.8em 0 0em #0f0f0f, 2.5em 0em 0 0em rgba(15, 15, 15, .2), 1.75em 1.75em 0 0em rgba(15, 15, 15, .2), 0em 2.5em 0 0em rgba(15, 15, 15, .2), -1.8em 1.8em 0 0em rgba(15, 15, 15, .2), -2.6em 0em 0 0em rgba(15, 15, 15, .2), -1.8em -1.8em 0 0em rgba(15, 15, 15, .5)
  }

  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .5), 1.8em -1.8em 0 0em rgba(15, 15, 15, .7), 2.5em 0em 0 0em #0f0f0f, 1.75em 1.75em 0 0em rgba(15, 15, 15, .2), 0em 2.5em 0 0em rgba(15, 15, 15, .2), -1.8em 1.8em 0 0em rgba(15, 15, 15, .2), -2.6em 0em 0 0em rgba(15, 15, 15, .2), -1.8em -1.8em 0 0em rgba(15, 15, 15, .2)
  }

  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .2), 1.8em -1.8em 0 0em rgba(15, 15, 15, .5), 2.5em 0em 0 0em rgba(15, 15, 15, .7), 1.75em 1.75em 0 0em #0f0f0f, 0em 2.5em 0 0em rgba(15, 15, 15, .2), -1.8em 1.8em 0 0em rgba(15, 15, 15, .2), -2.6em 0em 0 0em rgba(15, 15, 15, .2), -1.8em -1.8em 0 0em rgba(15, 15, 15, .2)
  }

  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .2), 1.8em -1.8em 0 0em rgba(15, 15, 15, .2), 2.5em 0em 0 0em rgba(15, 15, 15, .5), 1.75em 1.75em 0 0em rgba(15, 15, 15, .7), 0em 2.5em 0 0em #0f0f0f, -1.8em 1.8em 0 0em rgba(15, 15, 15, .2), -2.6em 0em 0 0em rgba(15, 15, 15, .2), -1.8em -1.8em 0 0em rgba(15, 15, 15, .2)
  }

  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .2), 1.8em -1.8em 0 0em rgba(15, 15, 15, .2), 2.5em 0em 0 0em rgba(15, 15, 15, .2), 1.75em 1.75em 0 0em rgba(15, 15, 15, .5), 0em 2.5em 0 0em rgba(15, 15, 15, .7), -1.8em 1.8em 0 0em #0f0f0f, -2.6em 0em 0 0em rgba(15, 15, 15, .2), -1.8em -1.8em 0 0em rgba(15, 15, 15, .2)
  }

  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .2), 1.8em -1.8em 0 0em rgba(15, 15, 15, .2), 2.5em 0em 0 0em rgba(15, 15, 15, .2), 1.75em 1.75em 0 0em rgba(15, 15, 15, .2), 0em 2.5em 0 0em rgba(15, 15, 15, .5), -1.8em 1.8em 0 0em rgba(15, 15, 15, .7), -2.6em 0em 0 0em #0f0f0f, -1.8em -1.8em 0 0em rgba(15, 15, 15, .2)
  }

  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(15, 15, 15, .2), 1.8em -1.8em 0 0em rgba(15, 15, 15, .2), 2.5em 0em 0 0em rgba(15, 15, 15, .2), 1.75em 1.75em 0 0em rgba(15, 15, 15, .2), 0em 2.5em 0 0em rgba(15, 15, 15, .2), -1.8em 1.8em 0 0em rgba(15, 15, 15, .5), -2.6em 0em 0 0em rgba(15, 15, 15, .7), -1.8em -1.8em 0 0em #0f0f0f
  }
}

.loaded {
  visibility: hidden !important;
  display: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important
}

.visit {
  visibility: visible
}

.opacity {
  opacity: 1;
  transform: translate(0)
}

.open {
  transform: translateY(0) !important
}

.topClose {
  transform: rotate(45deg)
}

.bottomClose {
  transform: rotate(-45deg)
}

.js-element {
  opacity: 0;
  transition: all ease-in .7s;
  transform: translateY(10px)
}

.fadeIn {
  opacity: 1;
  transform: translate(0)
}

.is-fixed {
  overflow: hidden
}

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