/*!
Theme Name: MQUA
Author: MQUA
Version: 1.0.0
Text Domain: mqua
*/

/*! [Reset CSS end] destyle.css v1.0.15 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model */
/* ============================================ */

* {
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

/* Document */
/* ============================================ */

/**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
   * Remove the margin in all browsers.
   */

body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
  border-style: none;
  vertical-align: bottom;
}

embed,
object,
iframe {
  border: 0;
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
   * Reset form fields to make them styleable
   */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}

/**
   * Remove the inner border and padding in Firefox.
   */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Remove arrow in IE10 & IE11
   */

select::-ms-expand {
  display: none;
}

/**
   * Remove padding
   */

option {
  padding: 0;
}

/**
   * Reset to invisible
   */

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
  overflow: auto;
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the outline style in Safari.
   */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
   * Clickable labels
   */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */

summary {
  display: list-item;
}

/*
   * Remove outline for editable content.
   */

[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */

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

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */

/**
   * Add the correct display in IE 10+.
   */

template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */

[hidden] {
  display: none;
}

/* ======Reset CSS end===================== */


/* ======Common body and a===================== */

body {
	font-family: 'Noto Sans JP',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
	line-height: 2;
	background: #f8f8f8;
	letter-spacing: 2;
}

.top-body {
	background-image: url(/wp-content/themes/mqua2/asset/img/bg_line.png)
}

a:hover {
	opacity: .6;
	transition: .3s;
}

small {
    font-size: 80%;
    display: block;
}

/* ======Common header===================== */

.common_header {
    width: 90%;
    margin: 0 auto;
	position: relative;
	right: 20px;
}

.main-nav img {
    width: 100px;
    margin: 20px;
}

.main-nav {
	display: flex;
	justify-content: space-between;
}

.main-nav__list {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 40px;
}

.main-nav__link2 {
    padding: 8px 20px;
    border: 1px solid;
    height: 40px;
    position: relative;
    left: 20px;
}

.main-nav__link2:hover {
	background: #000;
	color : #fff;
	transition: .3s;
	cursor: pointer;
	opacity: 1;
}

.main-nav__item {
	margin: 0 20px;
}

/* ======top page===================== */

.top-body #wrap {
	overflow: hidden;
}

.top-page__mv__ttl {
	width: 100%;
    margin: 0 auto;
    font-size: 60px;
    font-weight: 600;
	letter-spacing: 10px;
	padding-left: 20px;
}

.top-page__mv__ttl span{
	color:red
}

/* ======slick===================== */

.slick-slider {
	position: static !important;
}

.top-page__mv__news__block {
	/*width: 1200px;
    margin: 0 auto;
    box-shadow: 0 0 20px #EBEBEB;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    margin-bottom: 70px;*/
    /*background: #fff;*/
    position: relative;
	height: 60px;
	width: 70vw;
    margin: auto;
	max-width: 1170px;
}

.top-page__mv__news__block__inner img {
	z-index: 999;
}

.slick-next.slick-arrow {
	position: absolute !important;
	left: 100% !important;
}

.slick-prev.slick-arrow {
	position: absolute !important;
	left: 94.5% !important;
}

.slick-list.draggable {
	overflow: hidden;
    width: 70vw;
    background-color: #fff;
	position: absolute;
	max-width: 1170px;
}

@media screen and (min-width:1450px) and (max-width:1600px) {
	.slick-prev.slick-arrow {
		left: 94% !important;
	}
}

@media screen and (min-width:1250px) and (max-width:1449px) {
	.slick-prev.slick-arrow {
		left: 93% !important;
	}
}

@media screen and (min-width:1090px) and (max-width:1249px) {
	.slick-prev.slick-arrow {
		left: 92% !important;
	}
}

@media screen and (min-width:970px) and (max-width:1089px) {
	.slick-prev.slick-arrow {
		left: 91% !important;
	}
}

@media screen and (min-width:870px) and (max-width:969px) {
	.slick-prev.slick-arrow {
		left: 90% !important;
	}
}

@media screen and (min-width:780px) and (max-width:869px) {
	.slick-prev.slick-arrow {
		left: 89% !important;
	}
}

@media screen and (min-width:768px) and (max-width:779px) {
	.slick-prev.slick-arrow {
		left: 88% !important;
	}
}

@media screen and (min-width:715px) and (max-width:767px) {
	.slick-prev.slick-arrow {
		left: 83% !important;
	}
	.slick-next.slick-arrow {
		left: 92% !important;
	}
}

@media screen and (min-width:640px) and (max-width:714px) {
	.slick-prev.slick-arrow {
		left: 81% !important;
	}
	.slick-next.slick-arrow {
		left: 91% !important;
	}
}

@media screen and (min-width:590px) and (max-width:639px) {
	.slick-prev.slick-arrow {
		left: 80% !important;
	}
	.slick-next.slick-arrow {
		left: 90% !important;
	}
}

@media screen and (min-width:540px) and (max-width:589px) {
	.slick-prev.slick-arrow {
		left: 77% !important;
	}
	.slick-next.slick-arrow {
		left: 89% !important;
	}
}

@media screen and (min-width:500px) and (max-width:539px) {
	.slick-prev.slick-arrow {
		left: 76% !important;
	}
	.slick-next.slick-arrow {
		left: 89% !important;
	}
}

@media screen and (max-width:499px) {
	.slick-prev.slick-arrow, .slick-next.slick-arrow {
		display: none !important;
	}
}

@media screen and (max-width:400px) {
	.top-page__mv__news__bloc__list span {
		display: block;
	}
}

@media screen and (max-width:767px){
	.top-page__mv__news__block, .slick-list.draggable {
		width: 95vw;
	}
}

@media screen and (max-width:539px) {
	.top-page__mv__news__bloc__list span {
		margin-right: 15px !important;
		margin-left: 0 !important;
	}
}

.top-page__mv__news__bloc__list {
    padding: 15px;
    display: flex;
    font-size: 16px;
	padding: 15px;
}

.top-page__mv__news__bloc__list li:first-child {
	    padding: 0 60px 0 20px;
}

.top-page__mv__news__button {
	display: flex;
}

.top-page__mv__news__button__down button {
	background: #a1a4aa;
    height: 55px;
    width: 55px;
    margin-right: 1px;
	text-align: center;
}

.top-page__mv__news__button__down button  img {
    width: 13px;
    position: relative;
    top: -8px;
}

.top-page__ctp {
    background: #1d1d1e;
    padding: 100px 0;
    margin: 0 auto;
	text-align: center;
}

.top-page__ctp__vision {
	background: #fff;
    display: inline-block;
    padding: 0 30px;
    line-height: 1.5;
    font-size: 14px;
}

.top-page__ctp__ttl img {
	width: 700px;
}

.top-page__ctp__ttl img {
    width: 400px;
    margin: 70px 80px 0;
}

.top-page__ctp__ttl2 img {
    width: 450px;
    margin: 30px 80px 50px;
}

.top-page__ctp__txt {
	color: #fff;
    font-size: 16px;
    line-height: 2.5;
}

.top-page__ctp__txt span {
	color: #DC1720;
}

.slick-slide img {
	width: 100%;
    padding: 20px;
}

.top-page__mv__news__block__inner {
	width: 500px;
}

.top-page__recom {
	width: 100%;
}


.top-page__recom__inner {
	width: 1120px;
    padding: 100px 0 40px;
    display: flex;
	justify-content: space-between;
    margin: 0 auto;
	position: relative;
}

.top-page__recom__eng {
	position: absolute;
	right: 0;
}

.top-page__recom__inner2 {
    width: 1050px;
    display: flex;
    margin: 0 auto;
    padding: 50px 0;
    position: relative;
    top: -30px;
    margin-bottom: -50px;
}

@media screen and (max-width:1200px){
	.top-page__recom__inner2 {
		width: 100%;
	}
}

.top-page__recom__l {
	width: 550px;
	margin-top: 30px;
}

.top-page__recom__r {
	width: 550px;
	text-align: right;
	z-index: 1;
}



.top-page__recom__r p {
	font-size: 15px;
    padding-right: 50px;
    text-align: justify;
}

.top-page__recom__service {
	display: inline-block;
    padding: 2px 21px;
    line-height: 1.5;
    font-size: 12px;
    border: 1px solid;
	margin-top: 0px;
	position: absolute;
	margin-left: 53px;
}

.top-page__recom h3 {
    font-size: 38px;
    margin: 10px 0;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.5;
    padding: 20px 0;
    position: relative;
    top: -20px;
    margin-bottom: -40px;
	margin-left: 40px;
}

.top-page__recom img {
    width: 400px;
    margin-top: 10px;
    /*margin-left: 80px;*/
	/*position: relative;
    top: -20px;    
	left: 100px;*/
	z-index: 2;
}

.top-page__recom__inner2 p {
	width: 950px;
    font-size: 14px;
    letter-spacing: 1px;
	padding-left: 20px;
}

.top-page__recom__inner3 {
	width: 800px;
    display: flex;
	justify-content: center;
    margin: 50px auto 0;
	padding-bottom: 50px;
	align-items: center;
}

.top-page__recom__inner3 .multiply {
	margin: 0 5px;
	font-size: 30px;
}

.top-page__recom__inner3__circle {
	border: 1px solid;
    border-radius: 50%;
	padding: 80px 40px;
	white-space: nowrap;
	/*margin-right: 40px;*/
}

@media screen and (max-width:700px) {
	.top-page__recom__inner3 {
		flex-direction: column;
	}
	
	.top-page__recom__inner3__circle {
		font-size: 21px !important;
		padding: 76px 25px;
	}
}

/*.top-page__recom__inner3__circle.n1:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 50px;
    background-image: url(/wp-content/themes/mqua2/asset/img/x_mark.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 50px;
    margin-top: 20px;
}

.top-page__recom__inner3__circle.n2:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 50px;
    background-image: url(/wp-content/themes/mqua2/asset/img/x_mark.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 50px;
    margin-top: 20px;
}*/

.top-page__recom__inner4 {
	text-align: center;
	padding-bottom: 100px;
	padding-top: 30px;
}

.top-page__recom__inner4 a {
    width: 220px;
    background: #1d1d1e;
    display: inline-block;
    color: #fff;
    border-radius: 30px;
    padding: 5px;
}

.top-page__recom__inner4 a:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/wp-content/themes/mqua2/asset/img/arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    background-repeat: no-repeat;
	margin-left: 50px;
    margin-top: 13px;
}

.top-page__recom__inner4.n2 a:after {
	margin-left: 30px;
}

.top-page__recom__inner4 a:hover {
	opacity: .6;
	transition: .3s;
}

.top-page__recom__eng {
	position: absolute;
    writing-mode: vertical-rl;
    font-size: 40px;
    letter-spacing: 7px;
    color: #ebebeb;
    z-index: 1;
    margin-top: -50px;
    font-weight: 600;
    margin-left: -10px;
}

.top-page__recom__l.contact {
    width: 550px;
}

.top-page__recom__r.contact {
    width: 550px;
}

.top-page__recom__r.contact img {
    width: 500px;
	left: 20px;
}

.top-page__recom__contact {
    display: inline-block;
    padding: 2px 21px;
    line-height: 1.5;
    font-size: 12px;
    border: 1px solid;
    margin-top: -30px;
    position: absolute;
	margin-left: 50px;
}

.top-page__recom.n2 {
    background: #fff;
}

.top-page__recom.n2 .top-page__recom__inner4 a {
    margin: 70px 0;
}

.top-page__sns__inner {
	/*width: 1200px;*/
    margin: 100px auto;
	display: grid;
    grid-template-columns: repeat(2, 575px);
    justify-content: center;
}

@media screen and (max-width:767px) {
	.top-page__sns__inner {
		margin-top: 50px;
	}
}

@media screen and (max-width:1200px) {
	.top-page__recom__inner {
		width: 100%;
	}
	
	.top-page__sns__inner {
		grid-template-columns: repeat(auto-fit, minmax(300px, 575px));
	}
	
	.top-page__sns_r_block {
		margin-left: 0 !important;
	}
}

.top-page__sns_l img,
.top-page__sns_r img {
	width: 30px;
	margin-right: 10px;
}

.top-page__sns_l,
.top-page__sns_r{
	width: 575px;
	text-align: center;
	font-weight: 600;
}

@media screen and (max-width:1200px) {
	.top-page__sns_l {
		margin-bottom: 100px;
	}
}

.top-page__sns_r_block {
	background: #ccc;
    height: 698px;
    margin-top: 50px;
    margin-left: 20px;
    overflow-y: auto;
}

@media screen and (max-width:767px) {
	.top-page__sns_r_block {
		height: 350px;
	}
}

.top-page__sns_l_block {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
}

.top-page__sns_l_block_pic {
	background: #ccc;
    height: 150px;
    width: 31%;
    margin: 0 5px 10px;
}

.footer-block {
	background: #1d1d1e;
}

.footer-block__inner {
	width: 1170px;
    margin: 0 auto;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width:1200px){
	.footer-block__inner {
		width: 100%;
	}
}

.footer-block__inner__l .footer-block__inner__l__logo {
	width: 100px;
    margin: 50px 0 30px;
}

.sns_insta img,
.sns_twitter img,
.sns_facebook img {
	    width: 20px;
}

.footer-block__inner__l p {
	color: #fff;
    font-size: 10px;
}

.sns_insta {
	margin: 0 15px;
}

.sns_twitter {
	margin-right: 15px;
}

.footer-block__inner__l p:nth-child(3) {
	color: #5f5f60;
	margin-top: 10px;
}

.footer-block__inner__r ul {
	display: flex;
    font-size: 14px;
    margin-top: 90px;
    color: #fff;
}

.footer-block__inner__r li {
	margin-right: 20px;
}

.footer-block__inner__r__contact {
	border: 1px solid;
    display: block;
    margin: 30px 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
	padding: 0 60px;
}

.f_circle {
	
}

.f_circle img {
    width: 5px;
    position: relative;
    right: 1px;
}

.f_circle {
    background: #000;
    display: inline-block;
    border-radius: 50%;
    line-height: 1px;
    padding: 10px 15px;
    position: absolute;
    right: 10px;
    margin-top: -50px;
	cursor: pointer;
}

.slick-prev.slick-arrow {
    float: right;
    left: 639px;
    width: 60px;
    background: #a1a4aa;
    height: 60px;
    text-align: center;
    position: relative;
	cursor: pointer;
	z-index: 1;
}

.slick-next.slick-arrow {
    float: right;
    position: relative;
    left: 760px;
    width: 60px;
    background: #a1a4aa;
    height: 60px;
    text-align: center;
    padding-bottom: 0;
	cursor: pointer;
	z-index: 1;
}

.top-page__ctp_blank div:first-child {
	width: 1100px;
}

.top-page__ctp_blank .top-page__recom__vision {
	position: absolute;
    writing-mode: vertical-rl;
    font-size: 40px;
    letter-spacing: 7px;
    color: rgba(255,255,255, .05);
    margin-top: -10px;
    font-weight: 600;
    margin-left: 0px;
}

@media screen and (max-width:1200px) {
	.top-page__ctp_blank .top-page__recom__vision {
		position: static;
	}
}

.top-page__ctp_blank {
    width: 1000px;
    margin: 0 auto;
}

.top_mv_parts {
	position: absolute;
    width: 200px;
    right: 18%;
}

@media screen and (max-width:1200px) {
	.top-page__ctp_blank div:first-child, .top-page__ctp_blank {
		width: 100%;
	}
}

.top-page__mv__news__bloc__list span {
	margin-right: 70px;
    margin-left: 30px;
}

.top-page__recom__inner4.n2 {
	padding-bottom: 20px;
}

.black_bg {
	background: url(/wp-content/themes/mqua2/asset/img/black_bg.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    background-size: cover;
	position: relative;
    z-index: 1;
}

.black_bg2 {
	background: url(/wp-content/themes/mqua2/asset/img/black_bg2.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 35px;
    background-size: cover;
}

.black_bg3 {
	background: url(/wp-content/themes/mqua2/asset/img/black_bg3.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    background-size: cover;
}

.black_bg4 {
	background: url(/wp-content/themes/mqua2/asset/img/black_bg4.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    background-size: cover;
}

.slick-list.draggable {
	margin-bottom: -140px;
}

.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}
.block-revealer__content {
  opacity: 0;
}

.top-page__mv {
	padding: 100px 0;
	max-width: 1220px;
    margin: auto;
}

@media screen and (max-width:767px){
	.top-page__mv {
		padding: 50px 0;
	}
}

@media screen and (max-width:576px) {
	.top-page__mv__ttl {
		height: 150px !important;
	}
	
	.top-page__mv__ttl.n2 h2 {
		top: -60px !important;
	}
	
	.top-page__mv__ttl h2 {
		width: 80vw !important;
	}
	
	.top-page__mv__ttl.n2 h2 {
		width: 80vw !important;
		left: 13vw !important;
	}
}

.top-page__mv__ttl h2 {
	width :750px;
	padding: 20px 0;
}

@media screen and (max-width:450px) {
	.top-page__mv__ttl.n2 h2 {
		top: -80px !important;
	}
}

@media screen and (max-width:1200px){
	.top-page__mv__ttl h2 {
		width: 60vw;
	}
	
	.top-page__mv__ttl h2 img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

.top-page__mv__ttl.n2 h2 {
	width: 750px;
    left: 300px;
    top: -150px;
}

@media screen and (max-width:1200px) {
	.top-page__mv__ttl.n2 h2 {
		width: 60vw;
	}
	
	.top-page__mv__ttl.n2 h2 img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	
	.top-page__mv__ttl h2 {
		padding: 0;
	}
	
	.top-page__mv__ttl.n2 h2 {
		padding: 0;
	}
	
	.top-page__mv__ttl.first {
		margin-bottom: 8%;
	}
}

@media screen and (max-width:900px) {
	.top-page__mv__ttl.n2 h2 {
		left: 29vw;
	}
}

@media screen and (max-width:450px) {
	.top-page__ctp__ttl img {
		width: 90%;
	}
}

@media screen and (max-width:600px) {
	.top-page__ctp__ttl img {
		margin-top: 50px;
		margin-left: 0;
		margin-right: 0;
	}
	
	.top-page__ctp__ttl2 {
		padding: 30px 10px 50px;
	}
	
	.top-page__ctp__ttl2 img {
		margin: 0;
		width: 100%;
	}
	
	.top-page__sns_l, .top-page__sns_r {
		width: 100%;
	}
	
	.top-page__sns_r {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.top-page__recom__l {
		width: 100%;
		z-index: 1;
	}
	
	.top-page__ctp, .top-page__recom {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.top-page__recom__inner2 p {
		padding: 0;
	}
	
	.top-page__recom__l.contact {
		width: 100%;
		z-index: 1;
	}
	
	.top-page__recom h3 {
		margin-left: 0;
		font-size: 32px !important;
		line-height: 1.2 !important;
		position: static;
		margin-top: 0 !important;
	}
	
	.footer-block__inner__r {
		position: static !important;
	}
	
	.footer-block__inner__r ul {
		flex-direction: column;
		margin-top: 50px;
	}
	
	.footer-block__inner__r ul li {
		margin-right: 0;
		padding-left: 10px;
	}
	
	.footer-block__inner__r__contact {
		padding: 0 10px;
		margin: 0;
	}
	
	.top-page__recom__inner {
		padding: 80px 0 40px;
	}
}

@media screen and (max-width:800px) {
	.top-page__recom__inner3 {
		width: 100%;
	}
}

@media screen and (max-width:940px){
	.top-page__recom__inner {
		flex-direction: column;
	}
	
	.top-page__recom__r.service, .top-page__recom__r.contact {
		width: 100%;
	}
	
	.top-page__recom__r {
		text-align: center;
	}
	
	.top-page__recom__r img {
		max-width: 90%;
	}
	
	.top-page__recom__l {
		margin-top: 30px;
	}
	
	.top-page__recom__l.service {
		margin-top: 0;
	}
}

@media screen and (max-width:1200px) {
	.footer-block {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.top-page__ctp {
		position: relative;
		padding-top: 70px;
	}
	
	.top-page__recom__vision {
		width: auto !important;
		position: absolute !important;
		right: 0 !important;
		top: 40px !important;
	}
}

@media screen and (max-width:700px) {
	.top-page__recom__inner4 {
		padding-bottom: 0 !important;
	}
	
	.top-page__recom.n2 .top-page__recom__inner4 a {
		margin: 20px 0;
	}
}

.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding:10px;
}
.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  transform: translate3d(-101%, 0, 0);
}

.js-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
}




.motion-txt2 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding:10px;

}
.motion-txt2:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  transform: translate3d(-101%, 0, 0);
}


.js-scroll2.show .motion-txt2:after {
  transition-property: transform, opacity;
  transition-duration:0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll2.done .motion-txt2:after {
  transition-property: transform;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt2 .motion-inner2 {
  display: inline-block;
  opacity: 0;
}
.js-scroll2.done .motion-txt2 .motion-inner2 {
  opacity: 1;
}




.js-scroll3 {
	width: 100%;
}

.motion-txt3 {
	display: block;
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin: 0 auto;
	display: flex;
	justify-content: center;

}
.motion-txt3:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  transform: translate3d(-101%, 0, 0);
}


.js-scroll3.show .motion-txt3:after {
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll3.done .motion-txt3:after {
  transition-property: transform;
  transition-duration: 1s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt3 .motion-inner3 {
  display: inline-block;
  opacity: 0;
}
.js-scroll3.done .motion-txt3 .motion-inner3 {
  opacity: 1;
}

.js-scroll4.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll4.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll4.done .motion-txt .motion-inner {
  opacity: 1;
}

.vision_block {
	width: 700px;
	margin: 0 auto;
}


.area {
    background: initial;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 125vh;
    position: absolute;
	z-index: -1;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 125vh;
    overflow: hidden;
}

@media screen and (max-width:1024px) {
	
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #ccc;
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/* ===============メニュー非表示================ */

.drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger {
	display: none;
}

/* ===============メニュー非表示 end================ */

.top-page__sns_r img {
	position: relative;
    top: -5px;
}


.bg-image-loop {
    width: 100%;
    background: url(/wp-content/themes/mqua2/asset/img/vision_roop02.png) repeat-x 0 0;
    background-size: auto 100%;
    animation: bg-slider 60s linear infinite;
    padding: 150px 0;
    margin: 30px 0 -120px;
    position: relative;
}

@keyframes bg-slider {
	0% { background-position: 0 0; }
	100% { background-position: -5378px 0; }
}

_::-webkit-full-page-media, _:future, :root .area {
    top: -70px;
}

.top-page__mv img {
    height: 250px;
}

.top-page__mv__news__block a:focus {
	outline: none;
}

.top-page__ctp__slide {
	width: 100%;
    margin: 30px auto -118px;
	padding: 0 30px;
}

.top-page__ctp__slide img {
	width: 100%;
}

@media screen and (max-width:767px) {
	.top-page__ctp__slide img {
		display: none;
	}
	
	.top-page__ctp {
		padding-bottom: 150px;
	}
}

/* ===============news================ */

.post_details .post_details_ttl {
    margin-top: 50px;
    font-size: 72px;
    font-family: alternate-gothic-atf, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #1d1d1e;
    letter-spacing: 10px;
    line-height: 1;
}

.post_details {
	margin: 0 auto;
    width: 1000px;
}

.footer-block__inner__r {
	position: relative;
    right: 40px;
}

.post_details .post_details_ttl_meta {
	font-weight: 600;
    font-size: 14px
}

.post_details .entry-title {
	margin: 70px 0 50px;
    font-size: 30px;
}
.post_details .entry-title {
	margin: 70px 0 50px;
    font-size: 30px;
}

.post_details .entry-content {
	min-height: 200px;
}

.top-page__recom__inner4.post_details a {
    width: 250px;
    padding: 7px;
	margin-top: 100px;
}

.top-page__recom__inner4 a:after {
	margin-left: 20px;
}

.post_details article {
	width: 800px;
	margin: 0 auto;
}

@media screen and (max-width:1000px) {
	.post_details {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.post_details article {
		width: 100%;
	}
	
	.top-page__recom__inner4 {
		padding-bottom: 100px;
	}
}

@media screen and (max-width:767px) {
	.post_details .post_details_ttl {
		font-size: 48px;
	}
}


/* ===============privacy================ */

.privacy h1 {
    margin-top: 50px;
    font-size: 72px;
    font-family: alternate-gothic-atf, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #1d1d1e;
    letter-spacing: 10px;
    line-height: 1;
	margin-bottom: 100px;
}

@media screen and (max-width:768px) {
	.privacy h1 {
		font-size: 45px;
		margin-bottom: 50px;
	}
}

@media screen and (max-width:405px) {
	.privacy h1 {
		font-size: calc(100vw / 12);
	}
}

.privacy {
	margin: 0 auto;
    width: 1000px;
}

@media screen and (max-width:1000px) {
	.privacy {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
}

.privacy p {
	font-size: 16px;
    letter-spacing: 1px;
    line-height: 2;
    margin: 10px 0;
}

.privacy h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 40px 0;
	line-height: 1.2;
}

.privacy ul {
	font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
    list-style: decimal;
    padding-left: 15px;
}
.privacy li {
	padding: 10px 0;
}


/* ===============loading================ */



#loading_outer img {
	width: 150px;
    animation: loadLogo 2s;
}





#loading_outer {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  z-index: 100000;
	background: #fff;
	top: 0;
}

	
/* ======Common loading===================== */

.first .loading {
	margin: auto;
    width: 100px;
    text-align: center;
    font-size: 60px;
    color: rgba(0,0,0, .5);
    font-weight: 600;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}



@keyframes loadLogo {
  0% {
    opacity: 0;
  }
	
  100% {
    opacity: 1;
  }
}


.loadingNone {
    animation: fadein-keyframes 1s ease 2s 1 forwards;
  }

  @keyframes fadein-keyframes {
    0% {
      opacity: 1;
    }

	  99% {
      opacity: 99;
	  width: 1%;
	  }
	  
    100% {
      opacity: 0;
	  width: 0%;
	   z-index: -1;
    }
  }

.off {
    animation: fadein-keyframes2 1s ease 2s 1 forwards;
}

  @keyframes fadein-keyframes2 {
    0% {
      opacity: 1;
    }

	  48% {
      opacity: 0;
	  }
	  
    100% {
      opacity: 0;
	   z-index: -1;
    }
  }



.mv_block_inner_r.loading2 {
animation: mv_pic 2s ease 2s forwards;
}

@keyframes mv_pic {
  0% { 
	  opacity: 0;	
	}

  100% { 
	  opacity: 1;
	}
}




.loader-inner.ball-beat {
	display: flex;
	justify-content: space-around;
    width: 80px;
	margin-top: 20px;
}







@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }

.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }

.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }

.ball-pulse-sync > div {
  background-color: #000;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale > div {
  background-color: #000;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
          animation: ball-scale 1s 0s ease-in-out infinite; }

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale > div {
  background-color: #000;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
          animation: ball-scale 1s 0s ease-in-out infinite; }

.ball-scale-random {
  width: 100px;
  height: 100px; }
  .ball-scale-random > div {
    background-color: #000;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    display: inline-block;
    height: 60px;
    width: 60px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
            animation: ball-scale 1s 0s ease-in-out infinite; }
    .ball-scale-random > div:nth-child(1) {
      margin-left: -7px;
      -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite;
              animation: ball-scale 1s 0.2s ease-in-out infinite; }
    .ball-scale-random > div:nth-child(3) {
      margin-left: -2px;
      margin-top: 9px;
      -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite;
              animation: ball-scale 1s 0.5s ease-in-out infinite; }

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

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

.ball-rotate {
  position: relative; }
  .ball-rotate > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: relative; }
    .ball-rotate > div:first-child {
      -webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
              animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }
    .ball-rotate > div:before, .ball-rotate > div:after {
      background-color: #fff;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      content: "";
      position: absolute;
      opacity: 0.8; }
    .ball-rotate > div:before {
      top: 0px;
      left: -28px; }
    .ball-rotate > div:after {
      top: 0px;
      left: 25px; }

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

.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 26px;
  width: 26px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
          animation: rotate 0.75s 0s linear infinite; }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

@keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px); }
  .ball-clip-rotate-pulse > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 100%; }
    .ball-clip-rotate-pulse > div:first-child {
      background: #fff;
      height: 16px;
      width: 16px;
      top: 7px;
      left: -7px;
      -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
              animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
    .ball-clip-rotate-pulse > div:last-child {
      position: absolute;
      border: 2px solid #fff;
      width: 30px;
      height: 30px;
      left: -16px;
      top: -2px;
      background: transparent;
      border: 2px solid;
      border-color: #fff transparent #fff transparent;
      -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
              animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
      -webkit-animation-duration: 1s;
              animation-duration: 1s; }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

.ball-clip-rotate-multiple {
  position: relative; }
  .ball-clip-rotate-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -20px;
    top: -20px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
            animation: rotate 1s 0s ease-in-out infinite; }
    .ball-clip-rotate-multiple > div:last-child {
      display: inline-block;
      top: -10px;
      left: -10px;
      width: 15px;
      height: 15px;
      -webkit-animation-duration: 0.5s;
              animation-duration: 0.5s;
      border-color: #fff transparent #fff transparent;
      -webkit-animation-direction: reverse;
              animation-direction: reverse; }

@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: 2px solid #fff;
  -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
          animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }

@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple-multiple {
  position: relative;
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px); }
  .ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
  .ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
  .ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    top: -2px;
    left: -26px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }

@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-beat > div {
  background-color: #000;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
          animation: ball-beat 0.7s 0s infinite linear; }
  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: -0.35s !important;
            animation-delay: -0.35s !important; }

@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale-multiple {
  position: relative;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px); }
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-multiple > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -30px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite; }

@-webkit-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
            transform: translate(25px, -50px); }
  66% {
    -webkit-transform: translate(50px, 0px);
            transform: translate(50px, 0px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
            transform: translate(25px, -50px); }
  66% {
    -webkit-transform: translate(50px, 0px);
            transform: translate(50px, 0px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
            transform: translate(25px, 50px); }
  66% {
    -webkit-transform: translate(-25px, 50px);
            transform: translate(-25px, 50px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
            transform: translate(25px, 50px); }
  66% {
    -webkit-transform: translate(-25px, 50px);
            transform: translate(-25px, 50px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
            transform: translate(-50px, 0px); }
  66% {
    -webkit-transform: translate(-25px, -50px);
            transform: translate(-25px, -50px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
            transform: translate(-50px, 0px); }
  66% {
    -webkit-transform: translate(-25px, -50px);
            transform: translate(-25px, -50px); }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

.ball-triangle-path {
  position: relative;
  -webkit-transform: translate(-29.994px, -37.50938px);
          transform: translate(-29.994px, -37.50938px); }
  .ball-triangle-path > div:nth-child(1) {
    -webkit-animation-name: ball-triangle-path-1;
            animation-name: ball-triangle-path-1;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div:nth-child(2) {
    -webkit-animation-name: ball-triangle-path-2;
            animation-name: ball-triangle-path-2;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div:nth-child(3) {
    -webkit-animation-name: ball-triangle-path-3;
            animation-name: ball-triangle-path-3;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #fff; }
    .ball-triangle-path > div:nth-of-type(1) {
      top: 50px; }
    .ball-triangle-path > div:nth-of-type(2) {
      left: 25px; }
    .ball-triangle-path > div:nth-of-type(3) {
      top: 50px;
      left: 50px; }

@-webkit-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  75% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  75% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  25% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(0.75);
            transform: scale(0.75); } }

@keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  25% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(0.75);
            transform: scale(0.75); } }

.ball-pulse-rise > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
          animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0; }
  .ball-pulse-rise > div:nth-child(2n) {
    -webkit-animation-name: ball-pulse-rise-even;
            animation-name: ball-pulse-rise-even; }
  .ball-pulse-rise > div:nth-child(2n-1) {
    -webkit-animation-name: ball-pulse-rise-odd;
            animation-name: ball-pulse-rise-odd; }

@-webkit-keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1; } }

@keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1; } }

.ball-grid-beat {
  width: 57px; }
  .ball-grid-beat > div:nth-child(1) {
    -webkit-animation-delay: 0.15s;
            animation-delay: 0.15s;
    -webkit-animation-duration: 1.45s;
            animation-duration: 1.45s; }
  .ball-grid-beat > div:nth-child(2) {
    -webkit-animation-delay: -0.02s;
            animation-delay: -0.02s;
    -webkit-animation-duration: 0.97s;
            animation-duration: 0.97s; }
  .ball-grid-beat > div:nth-child(3) {
    -webkit-animation-delay: 0.66s;
            animation-delay: 0.66s;
    -webkit-animation-duration: 1.23s;
            animation-duration: 1.23s; }
  .ball-grid-beat > div:nth-child(4) {
    -webkit-animation-delay: 0.64s;
            animation-delay: 0.64s;
    -webkit-animation-duration: 1.24s;
            animation-duration: 1.24s; }
  .ball-grid-beat > div:nth-child(5) {
    -webkit-animation-delay: -0.19s;
            animation-delay: -0.19s;
    -webkit-animation-duration: 1.13s;
            animation-duration: 1.13s; }
  .ball-grid-beat > div:nth-child(6) {
    -webkit-animation-delay: 0.69s;
            animation-delay: 0.69s;
    -webkit-animation-duration: 1.42s;
            animation-duration: 1.42s; }
  .ball-grid-beat > div:nth-child(7) {
    -webkit-animation-delay: 0.58s;
            animation-delay: 0.58s;
    -webkit-animation-duration: 1.14s;
            animation-duration: 1.14s; }
  .ball-grid-beat > div:nth-child(8) {
    -webkit-animation-delay: 0.21s;
            animation-delay: 0.21s;
    -webkit-animation-duration: 1.17s;
            animation-duration: 1.17s; }
  .ball-grid-beat > div:nth-child(9) {
    -webkit-animation-delay: -0.18s;
            animation-delay: -0.18s;
    -webkit-animation-duration: 0.65s;
            animation-duration: 0.65s; }
  .ball-grid-beat > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-beat;
            animation-name: ball-grid-beat;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0; }

@-webkit-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-grid-pulse {
  width: 57px; }
  .ball-grid-pulse > div:nth-child(1) {
    -webkit-animation-delay: 0.22s;
            animation-delay: 0.22s;
    -webkit-animation-duration: 0.9s;
            animation-duration: 0.9s; }
  .ball-grid-pulse > div:nth-child(2) {
    -webkit-animation-delay: 0.64s;
            animation-delay: 0.64s;
    -webkit-animation-duration: 1s;
            animation-duration: 1s; }
  .ball-grid-pulse > div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
            animation-delay: -0.15s;
    -webkit-animation-duration: 0.63s;
            animation-duration: 0.63s; }
  .ball-grid-pulse > div:nth-child(4) {
    -webkit-animation-delay: -0.03s;
            animation-delay: -0.03s;
    -webkit-animation-duration: 1.24s;
            animation-duration: 1.24s; }
  .ball-grid-pulse > div:nth-child(5) {
    -webkit-animation-delay: 0.08s;
            animation-delay: 0.08s;
    -webkit-animation-duration: 1.37s;
            animation-duration: 1.37s; }
  .ball-grid-pulse > div:nth-child(6) {
    -webkit-animation-delay: 0.43s;
            animation-delay: 0.43s;
    -webkit-animation-duration: 1.55s;
            animation-duration: 1.55s; }
  .ball-grid-pulse > div:nth-child(7) {
    -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s; }
  .ball-grid-pulse > div:nth-child(8) {
    -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
    -webkit-animation-duration: 0.97s;
            animation-duration: 0.97s; }
  .ball-grid-pulse > div:nth-child(9) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
    -webkit-animation-duration: 0.63s;
            animation-duration: 0.63s; }
  .ball-grid-pulse > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
            animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0; }

@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -10px; }
  .ball-spin-fade-loader > div:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
            animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
            animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
            animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
            animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
            animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
            animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
            animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
            animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
  .ball-spin-fade-loader > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute; }

@-webkit-keyframes ball-spin-loader {
  75% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

@keyframes ball-spin-loader {
  75% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

.ball-spin-loader {
  position: relative; }
  .ball-spin-loader > span:nth-child(1) {
    top: 45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s 0.9s infinite linear;
            animation: ball-spin-loader 2s 0.9s infinite linear; }
  .ball-spin-loader > span:nth-child(2) {
    top: 30.68182px;
    left: 30.68182px;
    -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
            animation: ball-spin-loader 2s 1.8s infinite linear; }
  .ball-spin-loader > span:nth-child(3) {
    top: 0;
    left: 45px;
    -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
            animation: ball-spin-loader 2s 2.7s infinite linear; }
  .ball-spin-loader > span:nth-child(4) {
    top: -30.68182px;
    left: 30.68182px;
    -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
            animation: ball-spin-loader 2s 3.6s infinite linear; }
  .ball-spin-loader > span:nth-child(5) {
    top: -45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
            animation: ball-spin-loader 2s 4.5s infinite linear; }
  .ball-spin-loader > span:nth-child(6) {
    top: -30.68182px;
    left: -30.68182px;
    -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
            animation: ball-spin-loader 2s 5.4s infinite linear; }
  .ball-spin-loader > span:nth-child(7) {
    top: 0;
    left: -45px;
    -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
            animation: ball-spin-loader 2s 6.3s infinite linear; }
  .ball-spin-loader > span:nth-child(8) {
    top: 30.68182px;
    left: -30.68182px;
    -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
            animation: ball-spin-loader 2s 7.2s infinite linear; }
  .ball-spin-loader > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: green; }

@-webkit-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  66% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  66% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@-webkit-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  66% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  66% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.ball-zig-zag {
  position: relative;
  -webkit-transform: translate(-15px, -15px);
          transform: translate(-15px, -15px); }
  .ball-zig-zag > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    margin-left: 15px;
    top: 4px;
    left: -7px; }
    .ball-zig-zag > div:first-child {
      -webkit-animation: ball-zig 0.7s 0s infinite linear;
              animation: ball-zig 0.7s 0s infinite linear; }
    .ball-zig-zag > div:last-child {
      -webkit-animation: ball-zag 0.7s 0s infinite linear;
              animation: ball-zag 0.7s 0s infinite linear; }

@-webkit-keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  34% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  67% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  84% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  34% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  67% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px); }
  84% {
    -webkit-transform: translate(-15px, -30px);
            transform: translate(-15px, -30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@-webkit-keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  34% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  67% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  84% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  34% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  67% {
    -webkit-transform: translate(-15px, 30px);
            transform: translate(-15px, 30px); }
  84% {
    -webkit-transform: translate(15px, 30px);
            transform: translate(15px, 30px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.ball-zig-zag-deflect {
  position: relative;
  -webkit-transform: translate(-15px, -15px);
          transform: translate(-15px, -15px); }
  .ball-zig-zag-deflect > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    margin-left: 15px;
    top: 4px;
    left: -7px; }
    .ball-zig-zag-deflect > div:first-child {
      -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
              animation: ball-zig-deflect 1.5s 0s infinite linear; }
    .ball-zig-zag-deflect > div:last-child {
      -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
              animation: ball-zag-deflect 1.5s 0s infinite linear; }

/**
 * Lines
 */
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.line-scale-party > div:nth-child(1) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
  -webkit-animation-duration: 0.54s;
          animation-duration: 0.54s; }

.line-scale-party > div:nth-child(2) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
  -webkit-animation-duration: 1.15s;
          animation-duration: 1.15s; }

.line-scale-party > div:nth-child(3) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
  -webkit-animation-duration: 0.77s;
          animation-duration: 0.77s; }

.line-scale-party > div:nth-child(4) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
  -webkit-animation-duration: 0.61s;
          animation-duration: 0.61s; }

.line-scale-party > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-name: line-scale-party;
          animation-name: line-scale-party;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale-pulse-out > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
          animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }
  .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
    -webkit-animation-delay: -0.4s !important;
            animation-delay: -0.4s !important; }
  .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    -webkit-animation-delay: -0.2s !important;
            animation-delay: -0.2s !important; }

@-webkit-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  80% {
    -webkit-transform: scaley(0.3);
            transform: scaley(0.3); }
  90% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  80% {
    -webkit-transform: scaley(0.3);
            transform: scaley(0.3); }
  90% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale-pulse-out-rapid > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
          animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }
  .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
    -webkit-animation-delay: -0.25s !important;
            animation-delay: -0.25s !important; }
  .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }

@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }

@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }

.line-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -4px; }
  .line-spin-fade-loader > div:nth-child(1) {
    top: 20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(2) {
    top: 13.63636px;
    left: 13.63636px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 20px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(4) {
    top: -13.63636px;
    left: 13.63636px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(5) {
    top: -20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(6) {
    top: -13.63636px;
    left: -13.63636px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -20px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }
  .line-spin-fade-loader > div:nth-child(8) {
    top: 13.63636px;
    left: -13.63636px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }
  .line-spin-fade-loader > div {
    background-color: #fff;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    width: 5px;
    height: 15px; }

/**
 * Misc
 */
@-webkit-keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } }
@keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } }

.triangle-skew-spin > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
          animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } }

@keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
            transform: perspective(100px) rotateX(0) rotateY(0); } }

.square-spin > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
          animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

@-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }

@keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }

@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7; }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } }

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } }

.pacman {
  position: relative; }
  .pacman > div:nth-child(2) {
    -webkit-animation: pacman-balls 1s -0.99s infinite linear;
            animation: pacman-balls 1s -0.99s infinite linear; }
  .pacman > div:nth-child(3) {
    -webkit-animation: pacman-balls 1s -0.66s infinite linear;
            animation: pacman-balls 1s -0.66s infinite linear; }
  .pacman > div:nth-child(4) {
    -webkit-animation: pacman-balls 1s -0.33s infinite linear;
            animation: pacman-balls 1s -0.33s infinite linear; }
  .pacman > div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0s infinite linear;
            animation: pacman-balls 1s 0s infinite linear; }
  .pacman > div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
            animation: rotate_pacman_half_up 0.5s 0s infinite;
    position: relative;
    left: -30px; }
  .pacman > div:nth-child(2) {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
            animation: rotate_pacman_half_down 0.5s 0s infinite;
    margin-top: -50px;
    position: relative;
    left: -30px; }
  .pacman > div:nth-child(3),
  .pacman > div:nth-child(4),
  .pacman > div:nth-child(5),
  .pacman > div:nth-child(6) {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
            transform: translate(0, -6.25px);
    top: 25px;
    left: 70px; }

@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
            transform: translateX(50px) scale(0.5) rotate(-90deg); }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
            transform: translate(50px, 50px) rotate(-180deg); }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
            transform: translateY(50px) scale(0.5) rotate(-270deg); }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
            transform: translateX(50px) scale(0.5) rotate(-90deg); }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
            transform: translate(50px, 50px) rotate(-180deg); }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
            transform: translateY(50px) scale(0.5) rotate(-270deg); }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

.cube-transition {
  position: relative;
  -webkit-transform: translate(-25px, -25px);
          transform: translate(-25px, -25px); }
  .cube-transition > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #fff;
    -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
            animation: cube-transition 1.6s 0s infinite ease-in-out; }
    .cube-transition > div:last-child {
      -webkit-animation-delay: -0.8s;
              animation-delay: -0.8s; }

@-webkit-keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.semi-circle-spin {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden; }
  .semi-circle-spin > div {
    position: absolute;
    border-width: 0px;
    border-radius: 100%;
    -webkit-animation: spin-rotate 0.6s 0s infinite linear;
            animation: spin-rotate 0.6s 0s infinite linear;
    background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);
    width: 100%;
    height: 100%; }


#sb_instagram .sbi_follow_btn a {
    background: #000;
}

.SandboxRoot.env-bp-430 .timeline-Header-title, .SandboxRoot.env-bp-550 .timeline-Header-title {
    font-size: 12px;
}



/* ======contact===================== */

body {
	background-image: url(/wp-content/themes/mqua2/asset/img/bg_line.png) !important;
	background-position-x: center !important;
}

main.contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #1d1d1e;
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック Medium", YuGothic, 游ゴシック体, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", メイリオ, sans-serif;
}

.contact article {
	width: 1000px;
}

.contact .num {
	font-family: roboto-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.contact h1 {
	margin-top: 50px;
	margin-bottom: 30px;
	font-size: 72px;
	font-family: alternate-gothic-atf, sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #1d1d1e;
	letter-spacing: 10px;
	line-height: 1;
}

.contact h3 {
	font-size: 38px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.5;
}

.contact p {
	font-size: 16px;
	line-height: 2;
}

.contact p:first-of-type {
	margin-bottom: 10px;
}

.contact p:nth-of-type(2) {
	margin-bottom: 5px;
}

.contact p a {
	text-decoration: underline;
}

.contact em {
	font-style: normal;
	color: #dc1620;
	margin-left: 3px;
	margin-right: 3px;
}

.contact article section.wrap_1 {
	border: 1px solid #3e4149;
	padding: 40px 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 65px;
	line-height: 0;
}

.contact article section.wrap_2 {
	margin-top: 100px;
	margin-bottom: 100px;
	line-height: 1;
}

/*.contact article section:nth-of-type(2) {
	margin-bottom: 100px;
}*/

.contact article section:first-of-type p:last-of-type {
	font-size: 12px;
}

.contact ol {
	display: flex;
	justify-content: center;
	align-items: center;
}

.contact ol li {
	padding-left: 30px;
	padding-right: 30px;
	font-weight: bold;
	color: #7d8087;
}

.contact ol li.active {
	color: #1d1d1e;
}

.contact ol li.active::before {
	color: #dc1620;
}

.contact ol li:first-of-type::before{
	content: "01";
	padding-right: 23px;
	font-family: roboto-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.contact ol li:nth-of-type(2)::before{
	content: "02";
	padding-right: 23px;
	font-family: roboto-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.contact ol li:last-of-type::before{
	content: "03";
	padding-right: 23px;
	font-family: roboto-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.contact ol hr {
	margin: auto 0;
	width: 30px;
	border-top: 2px solid #a0a2a7;
}

.contact form div {
	display: flex;
}

.contact form div:nth-last-of-type(2) {
	display: block;
}

.contact form input {
	border-bottom: 1px solid #1d1d1e;
	width: 100%;
	margin-bottom: 70px;
	text-indent: 1em;
	min-width: 0;
}

.contact form input::placeholder {
	color: #c8c8c8;
}

.contact form label {
	display: block;
	width: 265px;
	text-align: left;
	font-weight: bold;
	flex-shrink: 0;
	color: #1d1d1e;
}

.contact form textarea {
	border: 1px solid #1d1d1e;
	border-radius: 2px;
	width: 100%;
	padding: 5px 10px;
	padding: 5px 10px;
	background-color: #f8f8f8;
}

.contact form input.btn-send {
	background-color: #1d1d1e;
	border: 2px solid #1d1d1e;
	color: #fff;
	width: auto;
	padding: 20px 90px;
	margin-bottom: 0;
	text-indent: 0;
	line-height: 1;
	border-radius: 50px;
	text-align: center;
	transition: .3s;
}

.contact a.backhome {
	background-color: #1d1d1e;
	border: 2px solid #1d1d1e;
	display: block;
	color: #fff;
	width: auto;
	padding: 20px 90px;
	margin-bottom: 0;
	text-indent: 0;
	line-height: 1;
	border-radius: 50px;
	text-align: center;
}

.contact form input.btn-back {
	background-color: transparent;
	color: #1d1d1e;
	width: auto;
	border: 2px solid #3e4149;
	padding: 20px 90px;
	margin-bottom: 0;
	margin-right: 30px;
	text-indent: 0;
	line-height: 1;
	border-radius: 50px;
	transition: .3s;
}

.contact form input.btn-back:hover {
	background-color: #3e4149;
	color: #fff;
}

.contact form div:last-of-type {
	display: flex;
	justify-content: center;
	margin-top: 88px;
	margin-bottom: 80px;
}

.contact form div.btnback,.contact form div.btnsend {
	margin: 0;
}

.contact form div.btnsend { 
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
}

.contact form div.btnsend:hover {
	opacity: .6;
}

.contact form div.btnsend:before,
.contact form div.btnsend:after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 50px;
  height: 1px;
  background: #c8c8c8;
}
.contact form div.btnsend:before{
  width: 22px;
  transform: translate(30px, 0px);
}
.contact form div.btnsend:after{
  width: 10px;
  transform-origin: right center;
  transform: translate(30px, 0px) rotate(45deg);
}

.contact form div.btnback { 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact form div.btnback:before,
.contact form div.btnback:after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50px;
  height: 1px;
  background: #c8c8c8;
}
.contact form div.btnback:before{
  width: 22px;
  transform: translate(-30px, 0px);
}
.contact form div.btnback:after{
  width: 10px;
  transform-origin: right center;
  transform: translate(-40px, 0px) rotate(135deg);
}

.contact div.btnhome { 
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
    margin-bottom: 50px;
}
.contact div.btnhome:before,
.contact div.btnhome:after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 50px;
  height: 1px;
  background: #c8c8c8;
}
.contact div.btnhome:before{
  width: 22px;
  transform: translate(30px, 0px);
}
.contact div.btnhome:after{
  width: 10px;
  transform-origin: right center;
  transform: translate(30px, 0px) rotate(45deg);
}

.mwform-tel-field {
	width: 100%;
	display: flex;
}

.mwform-tel-field input {
	width: calc(100% / 3) !important;
}

/* ======about===================== */

main.about {
	display: flex;
	justify-content: center;
	color: #1d1d1e;
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック Medium", YuGothic, 游ゴシック体, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", メイリオ, sans-serif;
}

.about article {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 1000px;
}

.about section.hero {
	width: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 170px;
}

.about section.hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.about section.hero h2,.about section.hero h3,.about section.hero p {
	text-align: center;
}

.about section.hero h2 {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 12px;
}

.about section.hero h3 {
	margin-top: 30px;
	margin-bottom: 60px;
}

.about section.hero p {
	font-weight: 400;
	line-height: 2.5;
}

.about section.hero h2 span {
	font-size: 38px;
}

.about section.hero span.red {
	color: #dc1620;
	font-weight: bold;
}

.about section.hero em {
	color: #dc1620;
	font-style: normal;
}

.about section.hero span::before {
	content: '“';
}

.about section.hero span::after {
	content: '”';
}

.about h1 {
	width: 100%;
	text-align: left;
	margin-top: 50px;
	margin-bottom: 30px;
	font-size: 72px;
	font-family: alternate-gothic-atf, sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #1d1d1e;
	letter-spacing: 10px;
	line-height: 1;
}

.about section.wrapper {
	margin-bottom: 100px;
}

.about section.wrapper h2 {
	font-family: alternate-gothic-atf, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 48px;
	letter-spacing: 10px;
	width: 100%;
	text-align: left;
}

.about section.wrapper table {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 30px;
}

.about section.wrapper table tr th {
	width: 20%;
	padding-left: 40px;
}

.about section.wrapper table tr {
	border-bottom: 1px solid #3a3a3b;
}

.about section.wrapper table tr th,.about section.wrapper table tr td {
	padding-top: 40px;
	padding-bottom: 40px;
}

.about section.wrapper table tr:nth-of-type(3),.about section.wrapper table tr:nth-of-type(7),.about section.wrapper table tr:nth-of-type(8),.about section.wrapper table tr:nth-of-type(9),.about section.wrapper table tr:nth-of-type(10) {
	border: none;
}

.about section.wrapper table tr:nth-of-type(3) th,.about section.wrapper table tr:nth-of-type(3) td,.about section.wrapper table tr:nth-of-type(7) th,.about section.wrapper table tr:nth-of-type(7) td,.about section.wrapper table tr:nth-of-type(8) th,.about section.wrapper table tr:nth-of-type(8) td,.about section.wrapper table tr:nth-of-type(9) th,.about section.wrapper table tr:nth-of-type(9) td,.about section.wrapper table tr:nth-of-type(10) th,.about section.wrapper table tr:nth-of-type(10) td {
	padding-bottom: 0;
}

.about section.wrapper table tr:nth-of-type(4) th,.about section.wrapper table tr:nth-of-type(4) td,.about section.wrapper table tr:nth-of-type(8) th,.about section.wrapper table tr:nth-of-type(8) td,.about section.wrapper table tr:nth-of-type(9) th,.about section.wrapper table tr:nth-of-type(9) td,.about section.wrapper table tr:nth-of-type(10) th,.about section.wrapper table tr:nth-of-type(10) td,.about section.wrapper table tr:nth-of-type(11) th,.about section.wrapper table tr:nth-of-type(11) td {
	padding-top: 0;
}

.about section.wrapper table tr:nth-of-type(4) td {
	line-height: 1.3;
}

.ggmap {
    position: relative;
    padding-bottom: 30%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 1%;
}
 
.ggmap iframe,.ggmap object,.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:767px) {
	.ggmap {
		padding-bottom: 60%;
		padding-top: 60px;
	}
}

main.privacy h2,main.privacy p,main.privacy ul li {
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
	font-weight: normal;
}

main.privacy h2 {
	font-weight: 500;
}

main.privacy h1 {
	font-family: alternate-gothic-atf, sans-serif;
}


@media screen and (max-width:1000px){
	.about article, .contact article {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#post-89 .contact article {
		padding-bottom: 50px;
	}
}

@media screen and (max-width:600px) {
	.about section.hero {
		width: 100%;
	}
	
	.about section.hero h3 {
		width: 100%;
	}
	
	.about section.hero h2 {
		font-size: calc(100vw / 22);
	}
	
	.about section.hero h2 span {
		font-size: calc(100vw / 18);
	}
}

@media screen and (max-width:390px) {
	.about section.hero h2 {
		font-size: calc(100vw / 26);
	}
	
	.about section.hero h2 span {
		font-size: calc(100vw / 23);
	}
}

@media screen and (max-width:767px) {
	ul.main-nav__list {
		display: none;
	}
	
	.about h1 {
		font-size: 48px;
	}
	
	.about section.wrapper table tr th, .about section.wrapper table tr td {
		width: 100%;
		display: block;
	}
	
	.about section.wrapper table tr {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	
	.about section.wrapper table tr th {
		padding-bottom: 10px;
		padding-left: 0;
	}
	
	.about section.wrapper table tr td {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		line-height: 1.2;
	}
	
	.about section.wrapper table tr:nth-of-type(3) th {
		border-bottom: none !important;
		padding-top: 40px !important;
	}
	
	.about section.wrapper table tr:nth-of-type(4) td {
		padding-top: 0 !important;
	}
	
	.about section.wrapper table tr:nth-of-type(11) th {
		display: none;
	}
}

@media screen and (max-width:525px) {
	.about section.hero p {
		text-align: left;
	}
}

@media screen and (max-width:470px) {
	.about section.wrapper h2 {
		font-size: calc(100vw / 15);
	}
	
	.about h1 {
		font-size: 35px;
	}
}

@media screen and (max-width:1000px) {
	.contact ol li {
		padding: 0;
	}
	
	#post-89 .contact ol li {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#post-89 .contact ol hr {
		width: 15px;
	}
}

@media screen and (max-width:767px) {
	.contact article section.wrap_2 {
		display: flex;
		justify-content: center;
		margin: 0;
	}
	
	.contact ol {
		flex-direction: column;
		align-items: normal;
	}
	
	.contact ol hr {
		display: none;
	}
	
	.contact h1 {
		font-size: 35px;
	}
	
	.contact form div {
		flex-direction: column;
	}
	
	.contact form div.btnsend:before, .contact form div.btnsend:after {
		right: 34%;
	}
	
	.contact form input.btn-back {
		margin-bottom: 20px;
		margin-right: 0;
	}
	
	#post-80 .contact form div.btnsend:before, #post-80 .contact form div.btnsend:after {
		right: 39%;
	}
	
	#post-80 .contact form div.btnback:before, #post-80 .contact form div.btnback:after {
		left: 39%;
		top: 40%;
	}
	
	#post-89 .contact ol li {
		padding: 10px;
	}
	
	#post-89 h2 {
		margin-top: 35px;
	}
	
	#post-89 p {
		text-align: left !important;
	}
}

@media screen and (max-width:597px) {
	.contact form input.btn-send, .contact form input.btn-back {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		text-align: center;
	}
	
	#post-80 .contact form div.btnsend:before, #post-80 .contact form div.btnsend:after {
		right: 45%;
	}
	
	#post-80 .contact form div.btnback:before, #post-80 .contact form div.btnback:after {
		left: 45%;
		top: 40%;
	}
}

@media screen and (max-width:500px) {
	.contact form div.btnsend:before, .contact form div.btnsend:after {
		right: 31%;
	}
}

@media screen and (max-width:400px) {
	.contact form div.btnsend:before, .contact form div.btnsend:after {
		right: 25%;
	}
}

.drawer-nav h3 {
	font-family: alternate-gothic-atf, sans-serif;
	margin: 20px;
	margin-top: 0;
	font-size: 30px;
}

.drawer--top .drawer-nav {
	padding: 50px 10px;
}

@media screen and (max-width:767px) {
	.drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger {
		display: block;
	}
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	 box-shadow: 
        2px  2px 3px rgba(248, 248, 248, 0.70),
      -2px  2px 3px rgba(248, 248, 248, 0.70),
       2px -2px 3px rgba(248, 248, 248, 0.70),
      -2px -2px 3px rgba(248, 248, 248, 0.70),
       2px  0px 3px rgba(248, 248, 248, 0.70),
       0px  2px 3px rgba(248, 248, 248, 0.70),
      -2px  0px 3px rgba(248, 248, 248, 0.70),
       0px -2px 3px rgba(248, 248, 248, 0.70);
}