body {
  height: 100vh;
  overflow: hidden;
}

header, footer h2,
header h2, footer h2
,.contact-info h2,
#page-breadcrumb h2,
#page-breadcrumb p{
font-family:'Quantico', dnp-shuei-mgothic-std, sans-serif;
}

*, *::after, *::before {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
}
img {
  max-width: 100%;
}
p {
  margin-top: 4px;
  margin-bottom: 4px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

:root {
    --swiper-theme-color: #333;
}
/* parts */
.none {
  display: none;
}
.none-before::before {
  display: none;
}
.none-after::after {
  display: none!important;
}
@media (min-width: 769px) {
  .sp {
    display: none!important;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none!important;
  }
}
.background-size-cover {
  background-size: cover!important;
}
.black-font {
  color: #000;
}
.blue-font {
  color: #2A5772;
}
.white-font {
  color: #fff;
}
.light-blue-font {
  color: #4790BB;
}
.h1-font {
  font-size: 3.2rem;
  letter-spacing: 0px;
}
.h2-font {
  font-size: 2.2rem;
  letter-spacing: 0px;
}
.h3-font {
  font-size: 1.8rem;
  letter-spacing: 0px;
}
.h4-font {
  font-size: 1.2rem;
  letter-spacing: 0px;
}
.big-font {
  font-size: 3.8rem;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
}
.bigger-font {
  font-size: 1.2em;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
}
.mini-bigger-font {
  font-size: 1.1em;
}
.slant-font {
  font-style: italic;
  transform: rotate( -6deg );
}
.white-outline-font {
font-weight: bold;
text-shadow: 2px 2px 0 #fff,
             -2px 2px 0 #fff,
             2px -2px 0 #fff,
             -2px -2px 0 #fff;
text-shadow: 2px 2px 1px #fff,
             -2px 2px 1px #fff,
             2px -2px 1px #fff,
             -2px -2px 1px #fff;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
text-stroke-width: 2px;
text-stroke-color: #fff;
}
.white-outline-text{
  font-weight: bold;
  stroke: #FFF;
  stroke-width: 5px;
}
.blue-text{
  font-weight: bold;
  fill: #2A5772;
}
.text-shadow {
text-shadow: 2px 2px 1px rgba(0,0,0,0.1),
             -2px 2px 1px rgba(0,0,0,0.1),
             2px -2px 1px rgba(0,0,0,0.1),
             -2px -2px 1px rgba(0,0,0,0.1);
}
.text-center {
  text-align: center;
}
.auto-wrap {
  white-space: pre-wrap;

}
.flex {
  display: flex!important;
}
.v-center {
  align-items: center
}
.h-center {
  justify-content: center; 
}
.h-between {
  justify-content: space-between; 
}
.three-ul li {
  margin-bottom: 5px;
}
.line-height3 {
  line-height: 3;
}
.line-height2 {
  line-height: 2;
}
.line-height15 {
  line-height: 1.5;
}
.line-height13 {
  line-height: 1.3;
}
.line-height12 {
  line-height: 1.2;
}
.line-height1 {
  line-height: 1;
}
.margin-bottom10 {
  margin-bottom: 10px;
}
.margin-bottom20 {
  margin-bottom: 20px;
}
.margin-bottom30 {
  margin-bottom: 30px;
}
.margin-bottom60 {
  margin-bottom: 60px;
}
.margin-bottom80 {
  margin-bottom: 80px;
}
.margin-bottom120 {
  margin-bottom: 120px;
}
.margin-top10 {
  margin-top: 10px;
}
.margin-top20 {
  margin-top: 20px;
}
.margin-top30 {
  margin-top: 30px;
}
.margin-top60 {
  margin-top: 60px;
}
.padding-top10 {
  padding-top: 10px;
}
.padding-top20 {
  padding-top: 20px;
}
.padding-top30 {
  padding-top: 30px;
}
.padding-top60 {
  padding-top: 60px;
}
.padding-bottom10 {
  padding-bottom: 10px;
}
.padding-bottom20 {
  padding-bottom: 20px;
}
.padding-bottom30 {
  padding-bottom: 30px;
}
.padding-bottom60 {
  padding-bottom: 60px;
}
.simple-button {
  display: inline-block;
  padding: 0 120px;
  line-height: 1.5;
  border: 1px solid #333;
  color: #333;
}
.square-wrapper {
  position: relative;
}
.square-wrapper::before {
  content:"";
  display: block;
  padding-top: 100%;}
.square {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.colors .square {
  cursor: pointer;
}
.big-video-wrapper {
  position: relative;
  width: 100%;
}
.big-video-wrapper::before {
  content:"";
  display: block;
  padding-top: 60%; /* 高さを幅の75%に固定 */
}
.big-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.img-wrapper {
  text-align: center;
}
.button-wrapper {
  text-align: center;
}
.default-box1200 {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box1100 {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box1000 {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box900 {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box800 {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box700 {
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box600 {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}
.default-box500 {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}
.default-description {
  text-align: center;
  padding: 6px 0;
}
.default-description img {
  width: 60px;
  max-width: 50%;
  margin: 0 auto;
}
.mini-box-padding {
  padding: 10px 0;
}
.white-glass {
  background: rgba(255,255,255,0.9);
}
.sheet {
  height: 100%;
  position: relative;
}
.sheet > *{
  position: relative;
  z-index: 99;
}
.sheet::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.gradation-sheet::before {
  background: rgb(180,49,216);
  background: linear-gradient(319deg, rgba(180,49,216,0.3) 0%, rgba(97,255,139,0.3) 100%);
}
.center-underbar {
  position: relative;
  display: inline-block;
}
.center-underbar::after {
  content: "";
  position: absolute;
  left: 50%;
  webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 1px;
  width: 60%;
  background: #333;
  bottom: -6px;
}
.pink-center-underbar.center-underbar::after {
  background: #EECDD0;
}
.tech-underbar-base {
  position: relative;
}
.tech-underbar {
  position: absolute;
  width: 200px;
  height: 2px;
  background: #ddd;
  max-width: 60%;
  bottom: -20px;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
.tech-underbar::after {
  position: absolute;
  content: "";
  background: #ddd;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  right: 0;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}
.tech-underbar::before {
  position: absolute;
  content: "";
  background: #ddd;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}
.font-size0 {
  font-size: 0;
}
.bigbig-heading {
}
.bigbig-heading span {
  font-size: 10rem;
  color: #ccc;
  display: inline-block;
}
.gradation-heading {
  position: relative;
  padding: 0.25em 0;
}
.gradation-heading::after {
  content: "";
  display: block;
  height: 6px;
  background: -webkit-linear-gradient(to right, rgb(42, 87, 114), transparent);
  background: linear-gradient(to right, rgb(42, 87, 114), transparent);
  position: relative;
}
.circle {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align:center;
  line-height: 90px;
  background: blue;
}
/* big-parts */
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.section-shoes .button-wrapper {
  margin-top: 40px;
}
.three-box {
  flex-wrap: wrap;
}
.three-box > div{
  width: 30%;
  margin-bottom: 20px;
}
.three-box > div:not(:nth-child(3n)){
  margin-right: 5%;
}
.ten-box {
  flex-wrap: wrap;
}
.ten-box > div{
  width: 5.5%;
  margin-bottom: 10px;
}
.ten-box > div:not(:nth-child(10n)){
  margin-right: 5%;
}
.two-box {
  flex-wrap: wrap;
}
.two-box > div{
  width: 48%;
  margin-bottom: 10px;
}
.two-box > div:not(:nth-child(2n)){
  margin-right: 4%;
}
section > .big-message {
  height: 90vh;
}
.big-message h2{
  margin-bottom: 30px;
}
.big-message .simple-button {
  margin-top: 30px;
  padding-right: 60px;
  padding-left: 60px;
}

.cool-box {
  position: relative;
  background: #E7EAEF;
  padding-bottom: 60px;
}
.cool-box *{
  z-index: 9;
}
.cool-box::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: 0;
  left: 0;
  border-width: 200px 600px 0 0;
  border-color: #EBD6D8 transparent transparent transparent;
  z-index: 1;
}
.cool-box .title{
  padding-left: 80px;
  padding-top: 70px;
  position: relative;
}
.cool-box .title span{
  display: inline-block;
}
.cool-box .title span:first-of-type{
  padding-right: 30px;
  border-right: 1px solid #000;
  line-height: 0.8;
}
.cool-box .title span:nth-of-type(2){
  padding-left: 30px;
  line-height: 1.4rem;
  color: #777;
  letter-spacing: 2px;
}
.cool-box div:nth-of-type(2) {
  height: 400px;
}
.cool-box img {
  width: 70%;
}
.cool-box .img-wrapper {
  margin-top: 60px;
}
.cool-box .button-wrapper {
  margin-top: 120px;
}
.cool-num {
  font-family: 'Kumar One', cursive;
}
.ribbon-wrapper {
  position: relative;
}
.ribbon20 {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 15px;
  box-sizing: border-box;
  padding: 0 12px;
  margin: 0;
  height: 40px;
  line-height: 40px;
  color: white;
  background: #4790BB;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.ribbon20:before {
  position: absolute;
  content: '';
  top: 0;
  left: -9px;
  border: none;
  height: 48px;
  width: 9px;
  background: #4790BB;
  border-radius: 5px 0 0 5px;
}
.ribbon20:after {
  position: absolute;
  content: '';
  bottom: -7px;
  left: -5px;
  border: none;
  height: 7px;
  width: 5px;
  background: #17608B;
  border-radius: 5px 0 0 5px;
}
.bluelight {
  display: table;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.bluelight .bluelight-span {
  display: table-cell;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
}
.bluelight .bluelight-span:hover {
  color: #fff;
  text-shadow: 0 0 50px #0aafe6, 0 0 50px #0aafe6;
  background-image: radial-gradient(center, ellipse cover, rgba(10, 175, 230, 0.3) 0%, rgba(10, 175, 230, 0) 60%);
}
.bluelight:before, .bluelight:after,
.bluelight .bluelight-span:before,
.bluelight .bluelight-span:after {
  transition: 0.2s ease-in-out;
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 120px dashed transparent;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.bluelight:before {
  animation: rotate 20s linear 0s infinite;
  width: 180px;
  height: 180px;
  border: 3px dotted rgba(10, 175, 230, 0);
  z-index: -1;
}
.bluelight:after {
  animation: rotate 10s linear 0s infinite reverse;
  border: 20px dashed rgba(10, 175, 230, 0);
  width: 200px;
  height: 200px;
  z-index: -2;
}
.bluelight .bluelight-span:before {
  animation: rotate 5s ease-in-out 0s infinite alternate;
  width: 160px;
  height: 160px;
  border: 10px dashed rgba(10, 175, 230, 0);
}
.bluelight .bluelight-span:after {
  animation: rotate 5s linear 0s infinite;
  border: 18px dashed rgba(10, 175, 230, 0);
  width: 160px;
  height: 160px;
}
.service-section:hover .bluelight:before {
  border-color: rgba(230, 230, 230, 0.4);
}
.service-section:hover .bluelight:after {
  border-color: rgba(240, 240, 240, 0.2);
}
.service-section:hover .bluelight .bluelight-span:before {
  border-color: rgba(230, 230, 230, 0.7);
}
.service-section:hover .bluelight .bluelight-span:after {
  border-color: rgba(220, 230, 230, 0.3);
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.tech-box {
  background: #fff;
  position: relative;
  max-width: 90%;
  margin-bottom: 60px;
}
.tech-box .fa-angle-double-right ,
.tech-box .circle,
.tech-box .bluelight {
  position: absolute;
  left: 0;
  top: 70px;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
.tech-box .fa-angle-double-right {
  left: -50px;
  color: rgba(255,255,255,0.8);
  font-size: 2.7rem;
}
.kakko1, .kakko3 {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.kakko1 {
  left: 0px;
  top: 0;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  border-left: 3px solid #2A5772;
  border-top: 3px solid #2A5772;
}
.kakko3 {
  right: 0px;
  bottom: 0;
  -webkit-transform : translate(50%,50%);
  transform : translate(50%,50%);
  border-right: 3px solid #2A5772;
  border-bottom: 3px solid #2A5772;
}
.tech-box .tech-box-content {
  z-index: 9;
  padding-top: 10px;
  padding-bottom: 10px;
}
.tech-box .tech-box-content > div{
  border: 3px solid #2A5772;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 10px 40px 40px;
}
.tech-box:nth-of-type(1) .circle{
  background: #2A5772;
  box-shadow: 1px 1px 2px #2A5772;
}
.tech-box:nth-of-type(2) .circle{
  background: #FFC042;
}
.tech-box:nth-of-type(2) .gradation-heading::after {
  background: -webkit-linear-gradient(to right, #FFC042, transparent);
  background: linear-gradient(to right, #FFC042, transparent);
}
.tech-box:nth-of-type(2) .cool-button {
  border: 5px solid #FFC042;
  color: #FFC042;
}
.tech-box:nth-of-type(2) .cool-button:before,
.tech-box:nth-of-type(2) .cool-button:after,
.tech-box:nth-of-type(2) .cool-button:hover {
  background: #FFC042;
  color: #fff;
}
.tech-box:nth-of-type(2) .kakko1 {
  border-left: 3px solid #FFC042;
  border-top: 3px solid #FFC042;
}
.tech-box:nth-of-type(2) .kakko3 {
  border-right: 3px solid #FFC042;
  border-bottom: 3px solid #FFC042;
}
.tech-box:nth-of-type(2) .tech-box-content > div {
  border: 3px solid #FFC042;
}

.tech-box:nth-of-type(3) .circle{
  background: #61C359;
}
.tech-box:nth-of-type(3) .gradation-heading::after {
  background: -webkit-linear-gradient(to right, #61C359, transparent);
  background: linear-gradient(to right, #61C359, transparent);
}
.tech-box:nth-of-type(3) .cool-button {
  border: 5px solid #61C359;
  color: #61C359;
}
.tech-box:nth-of-type(3) .cool-button:before,
.tech-box:nth-of-type(3) .cool-button:after,
.tech-box:nth-of-type(3) .cool-button:hover {
  background: #61C359;
  color: #fff;
}
.tech-box:nth-of-type(3) .kakko1 {
  border-left: 3px solid #61C359;
  border-top: 3px solid #61C359;
}
.tech-box:nth-of-type(3) .kakko3 {
  border-right: 3px solid #61C359;
  border-bottom: 3px solid #61C359;
}
.tech-box:nth-of-type(3) .tech-box-content > div {
  border: 3px solid #61C359;
}

.tech-box:nth-of-type(4) .circle{
  background: #E85A70;
}
.tech-box:nth-of-type(4) .gradation-heading::after {
  background: -webkit-linear-gradient(to right, #E85A70, transparent);
  background: linear-gradient(to right, #E85A70, transparent);
}
.tech-box:nth-of-type(4) .cool-button {
  border: 5px solid #E85A70;
  color: #E85A70;
}
.tech-box:nth-of-type(4) .cool-button:before,
.tech-box:nth-of-type(4) .cool-button:after,
.tech-box:nth-of-type(4) .cool-button:hover {
  background: #E85A70;
  color: #fff;
}
.tech-box:nth-of-type(4) .kakko1 {
  border-left: 3px solid #E85A70;
  border-top: 3px solid #E85A70;
}
.tech-box:nth-of-type(4) .kakko3 {
  border-right: 3px solid #E85A70;
  border-bottom: 3px solid #E85A70;
}
.tech-box:nth-of-type(4) .tech-box-content > div {
  border: 3px solid #E85A70;
}

.tech-box:nth-of-type(5) .circle{
  background: #665990;
}
.tech-box:nth-of-type(5) .gradation-heading::after {
  background: -webkit-linear-gradient(to right, #665990, transparent);
  background: linear-gradient(to right, #665990, transparent);
}
.tech-box:nth-of-type(5) .cool-button {
  border: 5px solid #665990;
  color: #665990;
}
.tech-box:nth-of-type(5) .cool-button:before,
.tech-box:nth-of-type(5) .cool-button:after,
.tech-box:nth-of-type(5) .cool-button:hover {
  background: #665990;
  color: #fff;
}
.tech-box:nth-of-type(5) .kakko1 {
  border-left: 3px solid #665990;
  border-top: 3px solid #665990;
}
.tech-box:nth-of-type(5) .kakko3 {
  border-right: 3px solid #665990;
  border-bottom: 3px solid #665990;
}
.tech-box:nth-of-type(5) .tech-box-content > div {
  border: 3px solid #665990;
}


.tech-box:nth-of-type(6) .circle{
  background: #383838;
}
.tech-box:nth-of-type(6) .gradation-heading::after {
  background: -webkit-linear-gradient(to right, #383838, transparent);
  background: linear-gradient(to right, #383838, transparent);
}
.tech-box:nth-of-type(6) .cool-button {
  border: 5px solid #383838;
  color: #383838;
}
.tech-box:nth-of-type(6) .cool-button:before,
.tech-box:nth-of-type(6) .cool-button:after,
.tech-box:nth-of-type(6) .cool-button:hover {
  background: #383838;
  color: #fff;
}
.tech-box:nth-of-type(6) .kakko1 {
  border-left: 3px solid #383838;
  border-top: 3px solid #383838;
}
.tech-box:nth-of-type(6) .kakko3 {
  border-right: 3px solid #383838;
  border-bottom: 3px solid #383838;
}
.tech-box:nth-of-type(6) .tech-box-content > div {
  border: 3px solid #383838;
}

.cool-button {
  -webkit-transform: translateX(-0%) translateY(-0%);
          transform: translateX(-0%) translateY(-0%);
  background: #fff;
  padding: 10px 20px;
  display: inline-block;
  border: 5px solid #2A5772;
  color: #2A5772;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  z-index: 2;
  -moz-transition: all 0.15s ease-out 0.15s;
  -o-transition: all 0.15s ease-out 0.15s;
  -webkit-transition: all 0.15s ease-out;
  -webkit-transition-delay: 0.15s;
  -webkit-transition: all 0.15s ease-out 0.15s;
  transition: all 0.15s ease-out 0.15s;
}
.cool-button:after, .cool-button:before {
  position: absolute;
  width: 100%;
  max-width: 100%;
  top: 100%;
  left: 0;
  bottom: -10px;
  content: '';
  z-index: 1;
  -moz-transition: all 0.15s ease-out 0.15s;
  -o-transition: all 0.15s ease-out 0.15s;
  -webkit-transition: all 0.15s ease-out;
  -webkit-transition-delay: 0.15s;
  -webkit-transition: all 0.15s ease-out 0.15s;
  transition: all 0.15s ease-out 0.15s;
}
.cool-button:before {
  background: #2A5772;
  top: 10px;
  left: -15px;
  height: 100%;
  width: 15px;
}
.cool-button:after {
  width: 100%;
  background: #2A5772;
  right: 0px;
  left: -15px;
  height: 15px;
}
.cool-button:hover {
  background: #2A5772;
  color: #fff;
  margin-left: -7.5px;
  margin-bottom: -7.5px;
}
.cool-button:hover:after, .cool-button:hover:before {
  top: 100%;
  left: 0;
  bottom: 0px;
}
.cool-button:hover:before {
  top: 0px;
  left: 0px;
  width: 0px;
}
.cool-button:hover:after {
  right: 0px;
  left: 0px;
  height: 0px;
}
body {
  background: #000;
}
body.show {
  background-color: #000!important;
}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
body,
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
font-family: "Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",  ro-san-std,  sans-serif;

font-weight: 400;

font-style: normal;
}
.login-form {
  width: 100vw;
  height: 100vh;
}
.login-form .form-group {
  width: 300px;
  max-width: 80%;
}
.form-group .form-control {
    color: #fff !important;
    background: none;
    border: 2px solid #fff;
}
.form-control {
    height: 43px;
    border-radius: 0;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
#password {
  margin-bottom: 10px;
	padding: 25px 15px;
  width: 100%;
border: 2px solid #2e2e2e;
text-align: center;
letter-spacing: 2px;
    transition: 0.3s;
}
.login-form .logo {
  margin: 0 auto 30px;
  width: 130px;
height: 66.17px;
}
#password:focus {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 5px rgba(255, 245, 245, 0.8)!important;
    transition: background 0s;
}
.button {
	border: 2px solid #2e2e2e;
	cursor: pointer;
	letter-spacing: 0.2125rem;
	overflow: hidden;
	padding: 10px 50px;
	position: relative;
	text-align: center;
  width: 100%;
	text-transform: uppercase;
	transition: 
		background 5s cubic-bezier(0.19, 1, 0.22, 1),
		border 1s cubic-bezier(0.19, 1, 0.22, 1),
		color 0.6s cubic-bezier(0.19, 1, 0.22, 1);
	user-select: none;
}

.button button {
	color: #969696;
	font-family: "Varela Round";
	text-decoration: none;
  letter-spacing: 4px;
  padding-left: 15px;
}

.button .mask {
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.5);
	height: 100px;
	position: absolute;
	transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
	transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
	width: 200px;
}

.button .shift {
	display: inline-block;
	transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.button:hover {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: #fff;
	box-shadow: 0 0 5px rgba(255, 245, 245, 0.8);
	transition: background 0s;
}

.button:hover a {
	color: #fff;
}

.button:hover .mask {
	background-color: #fff;
	transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}

.button:hover .shift {
	transform: translateX(5px);
}

.button:active {
	background-color: #fff;
}

.button:active a {
	color: #202020;
}

body.show {
	background-color: #282828;
}
/*
.button:hover {
	background-image: url('http://.com/img/codepen/savvy.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
*/
@media (min-width: 769px) {
  .logo {
    width: 140px;
  }
  header .container-fluid {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 768px) {
  .logo {
    width: 100px;
  }
  header .container-fluid {
    padding: 0 30px;
    padding-left: 15px;
  }
}
#password::placeholder {
  color: #969696;
}

/* IE */
#password:-ms-input-placeholder {
  color: #969696;
}

/* Edge */
#password::-ms-input-placeholder {
  color: #969696;
}

#answer {
  position: fixed;
  bottom: 0;
  right: 0;
  color: #222;

}

.error {
  margin-top: 10px;
  color: #ccc;
}