#layouts-header {
  /*height: 85px;*/
}

#layouts-header .navbar-fixed-top {
  top: initial;
}
#wpadminbar {
  position: fixed;
}
body {
  background: #f6f7f8;
}
#wp_spacely .pt-80 {
  padding-top: 80px;
}
#wp_spacely .bg-white {
  background: #fff;
}
#wp_spacely ul.ul-nostyle {
  list-style: none;
  padding: 0;
  margin: 0;
}
#wp_spacely img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
#wp_spacely .d-block {
  display: block;
}
#wp_spacely .color-black {
  color: rgba(36, 33, 36, 0.87);
}
#wp_spacely .btn-pink-white {
  border: 1px solid #f36;
  color: #f36;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 12px 0;
  background: #fff;
}
#wp_spacely .text-container-4, #wp_spacely .text-container-3, #wp_spacely .text-container-2 {
  overflow: hidden;
  width: 100%;
}
#wp_spacely .text-container-4 p, #wp_spacely .text-container-3 p, #wp_spacely .text-container-2 p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}
#wp_spacely .text-container-4 p {
  -webkit-line-clamp: 4;
}
#wp_spacely .text-container-3 p {
  -webkit-line-clamp: 3;
}
#wp_spacely .text-container-2 p {
  -webkit-line-clamp: 2;
}

.wp-link {
  color: #3e75c8;
}

@media (max-width: 768px) {
  body #layouts-header .container .navbar-header .header-list .spacely-logo-image {
    margin: 0 0 5px 15px;
  }
}
#wp_spacely .page-link.current {
  background: #ff3366;
  border-color: #ff3366;
}

.color__gradient {
    display: inline-block;
    background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.announcement__cta:hover {
    /* display: inline-block; */
    background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
    /* background-color: transparent; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hover-opacity {
  transition: opacity 0.7s ease;
}
.hover-opacity:hover {
  opacity: 0.7;
}

.event__announcement .announcement__item .item__img  {
  max-height: 120px;
}

@charset "UTF-8";
@charset "UTF-8";
/* Foundation
--------------------------------------------------*/
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}

/* 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 {
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  line-height: 1.15;
  /* 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-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 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 {
  /* 2 */
  border-top-width: 1px;
  box-sizing: content-box;
  clear: both;
  color: inherit;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
}

/**
 * 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;
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  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 */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: inherit;
  vertical-align: middle;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-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] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

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;
  min-width: 0;
  padding: 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 {
  padding: 0;
  vertical-align: top;
}

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

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  transform-origin: top center;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    -webkit-transform: scale(0.3);
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    -webkit-transform: scale(1.05);
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    -webkit-transform: scale(0.3);
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    -webkit-transform: scale(1.05);
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    -webkit-transform: translateY(30px);
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    -webkit-transform: translateY(30px);
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    -webkit-transform: translateX(30px);
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    -webkit-transform: translateX(30px);
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    -webkit-transform: translateX(-30px);
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    -webkit-transform: translateX(-30px);
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    -webkit-transform: translateY(-30px);
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    -webkit-transform: translateY(-30px);
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1.1);
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.3);
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1.1);
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.3);
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-20px);
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-20px);
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(20px);
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(20px);
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-20px);
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-20px);
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(20px);
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(20px);
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    -webkit-transform: translateX(-20px);
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    -webkit-transform: translateX(-20px);
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(20px);
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(20px);
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(20px);
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
    opacity: 0;
    transform: translateY(20px);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
}
@keyframes fadeOutDownBig {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(2000px);
    opacity: 0;
    transform: translateY(2000px);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    opacity: 0;
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(20px);
    opacity: 0;
    transform: translateX(20px);
  }
}
@keyframes fadeOutRight {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(20px);
    opacity: 0;
    transform: translateX(20px);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
    transform: translateY(-20px);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
@keyframes fadeOutUpBig {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
  backface-visibility: visible;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  backface-visibility: visible !important;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
    transform: translateX(-20%) skewX(30deg);
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
    transform: translateX(0%) skewX(-15deg);
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
    transform: translateX(0%) skewX(0deg);
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
    transform: translateX(-20%) skewX(30deg);
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
    transform: translateX(0%) skewX(-15deg);
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
    transform: translateX(0%) skewX(0deg);
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
    transform: translateX(0%) skewX(0deg);
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
  }
}
@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
    transform: translateX(0%) skewX(0deg);
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
    transform: rotate(-200deg);
    transform-origin: center center;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: center center;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
    transform: rotate(-200deg);
    transform-origin: center center;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: center center;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: center center;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
    transform: rotate(200deg);
    transform-origin: center center;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: center center;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
    transform: rotate(200deg);
    transform-origin: center center;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: left bottom;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: left bottom;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: right bottom;
  }
}
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: right bottom;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: left bottom;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: left bottom;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: left bottom;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: right bottom;
  }
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
    transform: rotate(0);
    transform-origin: right bottom;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
    transform: rotate(90deg);
    transform-origin: right bottom;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(2000px);
    opacity: 0;
    transform: translateX(2000px);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-2000px);
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(0);
    transform-origin: top left;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(80deg);
    transform-origin: top left;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(60deg);
    transform-origin: top left;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: rotate(60deg) translateY(0);
    transform-origin: top left;
  }
  100% {
    -webkit-transform: translateY(700px);
    opacity: 0;
    transform: translateY(700px);
  }
}
@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(0);
    transform-origin: top left;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(80deg);
    transform-origin: top left;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    transform: rotate(60deg);
    transform-origin: top left;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: rotate(60deg) translateY(0);
    transform-origin: top left;
  }
  100% {
    -webkit-transform: translateY(700px);
    opacity: 0;
    transform: translateY(700px);
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    -webkit-transform: translateX(-100%) rotate(-120deg);
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes rollIn {
  0% {
    -webkit-transform: translateX(-100%) rotate(-120deg);
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    -webkit-transform: translateX(0px) rotate(0deg);
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(100%) rotate(120deg);
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    -webkit-transform: translateX(0px) rotate(0deg);
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(100%) rotate(120deg);
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/* common - 全体に共通するスタイル
--------------------------------------------------*/
html,
body {
  padding: 0;
}

body {
  background-color: #fff;
}

html {
  font-size: 62.5%;
}

.ly_main,
.ly_main.event,
.top,
.lp {
  background-color: #FFF;
  color: #000;
  font-family: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.625;
  overflow-wrap: break-word;
  overflow-x: hidden;
  width: 100%;
}

.ly_main img,
.top img,
.lp img {
  border: none;
  height: auto;
  max-width: 100%;
}

.ly_main a,
.top a,
.lp a {
  cursor: pointer;
  display: inline-block;
}

i.fab {
  font-size: 2.7rem;
}

.ly_main h1,
.ly_main h2,
.ly_main h3,
.ly_main h4,
.ly_main h5,
.ly_main h6 {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}

.top h1,
.top h2,
.top h3,
.top h4,
.top h5,
.top h6 {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}

/* Common
--------------------------------------------------*/
/* layout breadcrumb
--------------------------------------------------*/
.ly_breadcrumb {
  padding: 0 24px;
}
@media only screen and (max-width: 767px) {
  .ly_breadcrumb {
    padding: 0 16px;
  }
}

/* contWidth
--------------------------------------------------*/
.ly_contWidth,
.ly_contWidth-sm,
.ly_contWidth-lg {
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .ly_contWidth,
.ly_contWidth-sm,
.ly_contWidth-lg {
    padding: 0 16px;
  }
}

.ly_contWidth {
  max-width: 1048px;
}

.ly_contWidth-sm {
  max-width: 948px;
}

.ly_contWidth-lg {
  max-width: 1288px;
}

/* drawerBtn
--------------------------------------------------*/
.ly_drawerBtn {
  margin-left: 30px;
  position: relative;
  z-index: 50;
}
@media only screen and (max-width: 767px) {
  .ly_drawerBtn {
    margin-left: 0;
  }
}

/* drawerNav
--------------------------------------------------*/
/* header
--------------------------------------------------*/
.ly_header {
  height: 80px;
  padding: 0 24px;
}

/* section
--------------------------------------------------*/
.ly_section {
  padding: 100px 0;
}
@media only screen and (max-width: 767px) {
  .ly_section {
    padding: 50px 0;
  }
}

/* module announcement
--------------------------------------------------*/
.announcement {
  color: #FFF;
  padding: 24px;
}
.announcement__labelWrap {
  background-color: #FFF;
  display: inline-block;
}
.announcement__label {
  color: #FF3366;
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 10px;
}
@media only screen and (max-width: 767px) {
  .announcement__label {
    font-size: 1.4rem;
  }
}
.announcement__subTitle, .announcement__title, .announcement__time {
  font-weight: 600;
  text-align: center;
}
.announcement__time {
  display: block;
}
.announcement__cta {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  display: block;
  font-weight: 700;
  height: 56px;
  line-height: 56px;
  margin: 0 auto;
  text-align: center;
  transition: all 0.7s ease;
  width: 240px;
}
.announcement__btnWrap {
  text-align: center;
}
.announcement__btnBg {
  border-radius: 8px;
  display: inline-block;
  transition: all 0.5s;
}
.announcement__btnBg:hover {
  background-color: #FFF;
}
.announcement__close {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  transition: 0.7s;
  width: 20px;
}
.announcement__close::before, .announcement__close::after {
  /* 棒の高さ */
  background-color: #FFF;
  content: "";
  /* 棒の幅（太さ） */
  height: 25px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 3px;
}
@media only screen and (max-width: 767px) {
  .announcement__close::before, .announcement__close::after {
    background-color: #333;
  }
}
.announcement__close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.announcement__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.announcement__close:hover {
  opacity: 0.7;
}

.lp__announcement {
  margin-bottom: 160px;
  padding: 40px 64px;
}
@media only screen and (max-width: 767px) {
  .lp__announcement {
    margin-bottom: 0;
    padding: 0 0 24px;
  }
}
.lp__announcement .announcement__subTitle {
  font-size: 2.4rem;
  margin-top: 15px;
}
.lp__announcement .announcement__title {
  font-size: 7.2rem;
  line-height: 1.2;
}
.lp__announcement .announcement__time {
  font-size: 3.2rem;
  margin-top: 10px;
}
.lp__announcement .announcement__btnWrap {
  margin-top: 24px;
}
@media only screen and (max-width: 767px) {
  .lp__announcement .announcement__label {
    font-size: 1.4rem;
  }
  .lp__announcement .announcement__subTitle {
    font-size: 1.4rem;
    margin-top: 20px;
  }
  .lp__announcement .announcement__title {
    font-size: 4rem;
    line-height: 1.3;
    margin-top: 24px;
  }
  .lp__announcement .announcement__time {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 767px) {
  .ly_contWidth-lg._announcement {
    padding: 0 !important;
  }
}

.floating__announcement {
  bottom: 40px;
  padding: 0;
  position: fixed;
  right: 58px;
  width: 420px;
}
@media only screen and (max-width: 767px) {
  .floating__announcement {
    -webkit-transform: translateX(-50%);
    bottom: 40px;
    display: block;
    left: 50%;
    margin: 0 auto;
    padding: 0;
    position: fixed;
    transform: translateX(-50%);
    width: 320px;
  }
}
.floating__announcementInner {
  padding: 0 30px 24px;
}
@media only screen and (max-width: 767px) {
  .floating__announcementInner {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    padding: 0 8px 8px;
  }
}
.floating__announcement .announcement {
  position: relative;
}
.floating__announcement .announcement__label {
  font-size: 1.4rem;
  left: 0;
  padding: 10px;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__label {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.66666667;
    padding: 4px;
  }
}
.floating__announcement .announcement__close {
  cursor: pointer;
  position: absolute;
  right: 14px;
  top: 8px;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__close {
    top: -30px;
  }
}
.floating__announcement .announcement__title {
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  line-height: 1.29166667;
  margin-top: 13px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__title {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.305;
    margin-top: 4px;
    text-align: left;
  }
}
.floating__announcement .announcement__text {
  font-size: 1.4rem;
  line-height: 1.42857143;
  margin-top: 4px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__text {
    font-size: 1.2rem;
    line-height: 1.66666667;
    margin-top: 1px;
    text-align: left;
  }
}
.floating__announcement .announcement__time {
  font-size: 1.6rem;
  line-height: 1.375;
  margin-top: 14px;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__time {
    font-size: 1.4rem;
    line-height: 1.35714286;
    margin-top: 4px;
    text-align: left;
  }
}
.floating__announcement .announcement__btnWrap {
  margin-top: 17px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__btnWrap {
    align-items: center;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    display: flex;
    margin: 0;
    margin-left: 5px;
    padding: 10px 13px;
  }
}
.floating__announcement .announcement__btnWrap a {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 56px;
  margin-top: 0;
  padding: 0 24px;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__btnWrap a {
    border: none;
    font-size: 1.4rem;
    font-weight: 700;
    height: auto;
    line-height: 1.28571429;
    margin: 0;
    padding: 0;
    width: auto;
  }
}
.floating__announcement .announcement__btnBg {
  border-radius: 8px;
  display: inline-block;
  transition: all 0.5s;
}
.floating__announcement .announcement__btnBg:hover {
  background-color: #FFF;
}
.floating__announcement .announcement__cta {
  margin-top: 17px;
  width: 130px;
}
@media only screen and (max-width: 767px) {
  .floating__announcement .announcement__cta {
    font-size: 1.4rem;
    margin-left: 10px;
    width: 60px;
  }
}

.event__announcement {
  padding-bottom: 42px;
}
@media only screen and (max-width: 767px) {
  .event__announcement {
    padding: 0;
    padding-bottom: 40px;
  }
}
.event__announcement .announcement__subTitle {
  font-size: 4rem;
  line-height: 1.35;
  margin-top: 9px;
}
@media only screen and (max-width: 767px) {
  .event__announcement .announcement__subTitle {
    font-size: 1.4rem;
    line-height: 1.42857143;
    margin-top: 22px;
  }
}
.event__announcement .announcement__title {
  font-size: 9.6rem;
}
@media only screen and (max-width: 767px) {
  .event__announcement .announcement__title {
    font-size: 4rem;
    line-height: 1.375;
    margin-top: 24px;
  }
}
.event__announcement .announcement__time {
  font-size: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .event__announcement .announcement__time {
    font-size: 1.6rem;
    margin-top: 24px;
  }
}
.event__announcement .announcement__cta {
  display: block;
  margin: 0 auto;
  max-width: 240px;
}
.event__announcement .announcement__btnWrap {
  margin-top: 32px;
}
@media only screen and (max-width: 767px) {
  .event__announcement .announcement__btnWrap {
    margin-top: 40px;
  }
}
.event__announcement .announcement__list {
  align-items: flex-start;
}
@media only screen and (max-width: 1200px) {
  .event__announcement .announcement__list {
    justify-content: space-between;
  }
}
@media only screen and (max-width: 767px) {
  .event__announcement .announcement__list {
    justify-content: center;
  }
}
.event__announcement .announcement__item {
  margin-top: 24px;
  text-align: center;
  width: calc(14.2857142857% - 0px);
}
.event__announcement .announcement__item .item__img {
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}
.event__announcement .announcement__item .item__img img {
  height: 100%;
  width: 120px;
}
.event__announcement .announcement__item .item__body {
  font-weight: 500;
  padding-top: 14px;
}
.event__announcement .announcement__item .item__body span {
  display: block;
  text-align: center;
}

.event__announcement .announcement__item .item__img {
  max-height: 120px;
}

/* breadcrumb
--------------------------------------------------*/
.breadcrumb {
  background-color: #FFF;
  color: #3A3A44;
  margin-bottom: 0;
  margin-top: 80px;
  padding: 10px 0;
}
.breadcrumb__list {
  align-items: center;
  display: flex;
  justify-content: start;
}
.breadcrumb__item {
  margin-right: 25px;
  position: relative;
}
.breadcrumb__item::after {
  -webkit-transform: translateY(-50%) rotate(-45deg);
  border-bottom: 1.5px solid #3A3A44;
  border-right: 1.5px solid #3A3A44;
  content: "";
  height: 6px;
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 6px;
}
.breadcrumb__item:last-child::after {
  display: none;
}
.breadcrumb__item a, .breadcrumb__item span {
  padding: 0.1em;
}
.breadcrumb__item a {
  cursor: pointer;
}
.breadcrumb__item a:hover {
  opacity: 0.7;
}

.ly_contact {
  background: #FFFFFF;
  border-radius: 8px;
  margin: 0 auto;
  margin-bottom: 80px;
  max-width: 800px;
  padding: 80px 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ly_contact {
    box-shadow: 0px 16px 32px rgba(255, 51, 102, 0.1), 0px 8px 16px rgba(255, 51, 102, 0.1);
  }
}
@media only screen and (max-width: 767px) {
  .ly_contact {
    padding: 0 16px;
  }
}

.contact {
  margin: 0 auto;
  max-width: 428px;
  width: 100%;
}
.contact__title {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .contact__title {
    font-size: 1.6rem;
  }
}
.contact__text {
  font-size: 1.8rem;
  margin-top: 12px;
}
@media only screen and (max-width: 767px) {
  .contact__text {
    font-size: 1.4rem;
  }
}
.contact .form {
  padding-bottom: 16px;
  padding-top: 40px;
}
.contact .form__item {
  align-items: center;
  display: flex;
}
.contact .form__item:not(:first-child) {
  margin-top: 24px;
}
.contact .form__label {
  flex: 108px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.contact .form__label .required {
  color: #EB5757;
  margin-left: 4px;
}
.contact .form__part {
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  flex: 320px 0 1;
  height: 40px;
  padding: 12px;
}
.contact .form__part._name {
  flex: 160px 0 1;
}
@media only screen and (max-width: 767px) {
  .contact .form__part._name {
    flex: 320px 0 1;
  }
}
.contact .form__privacy {
  color: #4F4F4F;
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .contact .form__privacy {
    font-size: 1.6rem;
  }
}
.contact .form__privacy a {
  color: #FF3366;
  display: inline;
  text-decoration: underline;
}
.contact .form__btn {
  background-color: #FF3366;
  border-radius: 8px;
  color: #FFF;
  height: 56px;
  line-height: 56px;
  margin-top: 40px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .contact .form__btn {
    margin: 45px auto 0;
    width: 240px;
  }
}
.contact .form__btn .btn__submit {
  height: 100%;
  width: 100%;
}
.contact__caution {
  color: #828282;
  line-height: 1.25;
}
@media only screen and (max-width: 767px) {
  .contact__caution {
    font-size: 1.4rem;
  }
}
.contact__caution:not(:first-child) {
  margin-top: 15px;
}

/* hamburger
--------------------------------------------------*/
.hamburger {
  padding-top: 5px;
}
.hamburger__icon {
  background-color: #FF3366;
  display: block;
  height: 4px;
  margin-right: auto;
  position: relative;
  transition: ease 0.3s;
}
.hamburger__icon:nth-child(1) {
  top: 0;
  width: 22px;
}
.hamburger__icon:nth-child(2) {
  margin-bottom: 8px;
  margin-top: 8px;
  width: 40px;
}
.hamburger__icon:nth-child(3) {
  top: 0;
  width: 31px;
}

/* drawerNav
--------------------------------------------------*/
.drawerNav__list {
  margin-left: auto;
}
.drawerNav__item {
  margin-top: 30px;
}
.drawerNav__item-cta {
  margin: 0 auto;
  margin-top: 30px;
  max-width: 350px;
}
.drawerNav__item-cta._contact {
  border: 1px solid #FF3366;
  border-radius: 8px;
  color: #FF3366;
  display: block;
  padding: 12px 20px;
  text-align: center;
}
.drawerNav__item-cta._download {
  background: #FF3366;
  border-radius: 8px;
  color: #FFF;
  display: block;
  padding: 12px 20px;
  text-align: center;
}

.announcement__close {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  transition: 0.7s;
  width: 20px;
}
.announcement__close::before, .announcement__close::after {
  /* 棒の高さ */
  background-color: #FFF;
  content: "";
  /* 棒の幅（太さ） */
  height: 25px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 3px;
}
@media only screen and (max-width: 767px) {
  .announcement__close::before, .announcement__close::after {
    background-color: #333;
  }
}
.announcement__close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.announcement__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.announcement__close:hover {
  opacity: 0.7;
}

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

.grid-sm {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* history
--------------------------------------------------*/
.history {
  background-color: #000;
  padding-bottom: 150px;
  padding-top: 90px;
}
@media only screen and (max-width: 1079px) {
  .history {
    padding-bottom: 60px;
    padding-top: 30px;
  }
}
.history__title {
  color: #FFF;
}
.history__subTitle {
  margin-top: 40px;
  text-align: center;
}
.history__subTitle span {
  border: 1px solid #FCFBFB;
  border-radius: 57px;
  box-sizing: border-box;
  color: #FFF;
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 12px 16px;
}
@media only screen and (max-width: 1079px) {
  .history__subTitle span {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 1080px) {
  .history__wrap {
    height: 2200px;
    margin-top: 90px;
  }
}
@media only screen and (max-width: 1079px) {
  .history__wrap {
    margin-top: 24px;
    position: relative;
  }
  .history__wrap::before {
    -webkit-transform: translateX(-50%);
    background-color: #FFF;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
  }
}
.history__line {
  height: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 1080px) {
  .history__line {
    background-color: #FFF;
    position: relative;
    width: 1px;
  }
}
.history__line::after {
  -webkit-transform: rotate(45deg) translateX(-60%);
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  bottom: -2px;
  content: "";
  height: 8px;
  left: 50%;
  position: absolute;
  transform: rotate(45deg) translateX(-60%);
  width: 8px;
}
.history__item {
  border: 1px solid #FFF;
  border-radius: 8px;
  box-sizing: border-box;
  color: #FFF;
  display: inline-block;
  padding: 12px;
}
@media only screen and (min-width: 1080px) {
  .history__item {
    position: absolute;
  }
  .history__item::before, .history__item::after {
    content: "";
    position: absolute;
    top: 50%;
  }
  .history__item::before {
    -webkit-transform: translateY(-50%);
    border-top: 1px dashed #FFF;
    height: 1px;
    transform: translateY(-50%);
    width: 120px;
  }
  .history__item::after {
    background-color: #FFF;
    border-radius: 50%;
    height: 8px;
    width: 8px;
  }
  .history__item._right {
    left: 120px;
  }
  .history__item._right::before, .history__item._right::after {
    left: -120px;
  }
  .history__item._right::after {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .history__item._left {
    right: 120px;
  }
  .history__item._left::before, .history__item._left::after {
    right: -120px;
  }
  .history__item._left::after {
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
  }
  .history__item._1 {
    top: -30px;
    width: 395px;
  }
  .history__item._1::after {
    background-color: #FF3366;
    border: 1px solid #FFF;
    height: 16px;
    width: 16px;
  }
  .history__item._2 {
    top: 40;
    width: 283px;
  }
  .history__item._3 {
    top: 65px;
    width: 237px;
  }
  .history__item._4 {
    top: 180px;
    width: 357px;
  }
  .history__item._5 {
    top: 180px;
    width: 335px;
  }
  .history__item._6 {
    top: 280px;
    width: 189px;
  }
  .history__item._7 {
    top: 320px;
    width: 205px;
  }
  .history__item._8 {
    top: 410px;
    width: 331px;
  }
  .history__item._9 {
    top: 420px;
    width: 232px;
  }
  .history__item._10 {
    top: 670px;
    width: 287px;
  }
  .history__item._11 {
    top: 700px;
    width: 259px;
  }
  .history__item._12 {
    top: 770px;
    width: 260px;
  }
  .history__item._13 {
    top: 980px;
    width: 277px;
  }
  .history__item._14 {
    top: 1040px;
    width: 377px;
  }
  .history__item._15 {
    top: 1160px;
    width: 361px;
  }
  .history__item._16 {
    top: 1190px;
    width: 385px;
  }
  .history__item._17 {
    top: 1370px;
    width: 312px;
  }
  .history__item._18 {
    top: 1530px;
    width: 276px;
  }
  .history__item._19 {
    top: 1580px;
    width: 287px;
  }
  .history__item._20 {
    top: 1670px;
    width: 361px;
  }
  .history__item._21 {
    top: 1730px;
    width: 407px;
  }
}
@media only screen and (max-width: 1079px) {
  .history__item {
    display: block;
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    width: 100%;
  }
  .history__item:not(:first-child) {
    margin-top: 16px;
  }
}
.history__item-last {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
@media only screen and (min-width: 1080px) {
  .history__item-last {
    bottom: 0;
    display: inline-block;
    left: 50%;
    position: absolute;
  }
}
@media only screen and (max-width: 1079px) {
  .history__item-last {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%;
  }
}
.history__item-last figure {
  display: block;
  text-align: center;
}
.history__item-last figure img {
  max-width: 540px;
}
@media only screen and (max-width: 767px) {
  .history__item-last figure img {
    max-width: 100%;
  }
}
.history__body {
  margin-left: 20px;
}
.history__patent {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.history__text {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.42857143;
}
.history__text._center {
  text-align: center;
}
.history__time {
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  line-height: 1.16666667;
  width: 100%;
}
.history__time._center {
  text-align: center;
}
.history__img {
  text-align: center;
}
.history__icon {
  display: inline-block;
  flex: 40px 0 0;
  text-align: center;
}
.history__icon._star {
  width: 60px;
}
.history__icon._flag img {
  max-width: 40px;
}
.history__continue {
  color: #FFF;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}
.history__grid {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.history-img1 {
  max-width: 163px !important;
}

.history-img2 {
  max-width: 202px !important;
}

.history-img3 {
  max-width: 179px !important;
}

.history-img4 {
  max-width: 229px !important;
}

.history-img5 {
  max-width: 301px !important;
}

.history-img6 {
  max-width: 376px !important;
}
@media only screen and (max-width: 767px) {
  .history-img6 {
    width: 100% !important;
  }
}

/* img__wrap
--------------------------------------------------*/
.img__wrap {
  display: block;
  position: relative;
}
.img__wrap .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.img__wrap img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

:root {
  --font-size: 32rem;
  --easing: cubic-bezier(.5, 0, .5, 1);
  --duration: .4s;
  --delay: .8s;
  --count-duration: 2s;
  --count-delay: 1s;
}

.loading__cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
    z-index: 10;
}

.loading__text-wrap {
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.loading__text-th {
  -webkit-transform: translateY(-15px);
  color: white;
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(-15px);
  transition: all 0.5s ease;
  z-index: 10;
}
.loading__text-th._ready {
  opacity: 1;
}
.loading__text-th._load {
  color: #000;
}
@media only screen and (max-width: 767px) {
  .loading__text-th {
    font-size: 12rem;
  }
}

.loading__anniversary {
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .loading__anniversary {
    font-size: 4rem;
    margin-top: 20px;
  }
}

.loader-count {
  -webkit-animation: fade-in var(--duration) var(--count-delay) linear both;
  animation: fade-in var(--duration) var(--count-delay) linear both;
  color: #FF3366;
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 32rem;
  font-weight: 700;
  height: 300px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-align: center;
  width: 15rem;
  z-index: 30;
}
@media only screen and (max-width: 767px) {
  .loader-count {
    font-size: 24rem;
    height: 230px;
    top: 10px;
    width: 12rem;
  }
}
.loader-count:before, .loader-count:after {
  -webkit-animation: count-up var(--count-duration) var(--count-delay) var(--easing) both;
  animation: count-up var(--count-duration) var(--count-delay) var(--easing) both;
  display: block;
  line-height: 1;
  position: absolute;
  width: var(--font-size);
  width: 15rem;
}
@-webkit-keyframes fade-in {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loader-count:after {
  -webkit-animation-name: count-up;
  -webkit-transform: translateX(-50%);
  animation-name: count-up;
  content: "1 2 3 4 5";
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 767px) {
  .loader-count:after {
    top: -80px;
  }
}
@-webkit-keyframes count-up {
  to {
    -webkit-transform: translate(-50%, calc(-100% + var(--font-size)));
    transform: translate(-50%, calc(-100% + var(--font-size)));
  }
}
@keyframes count-up {
  to {
    -webkit-transform: translate(-50%, calc(-100% + var(--font-size)));
    transform: translate(-50%, calc(-100% + var(--font-size)));
  }
}

.th {
  font-size: 100px;
}

.logo {
  margin-bottom: 50px;
}
.logo img {
  max-width: 163px;
}

.js_body.android .loading__text-th {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.js_body.android .loading__text-th {
  font-weight: 400 !important;
}
.js_body.android .loading__text {
  font-weight: 400 !important;
}
.js_body.android .loading__anniversary {
  font-weight: 400 !important;
}

/* common section
--------------------------------------------------*/
.ly_main.lp .section__title {
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .ly_main.lp .section__title {
    font-size: 1.4rem;
  }
}

.ly_main.event .section__title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
}
.ly_main.event .section__title::before {
  -webkit-transform: translate(-150%, -50%);
  background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-150%, -50%);
  width: 24px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .section__title {
    font-size: 1.6rem;
  }
}
.ly_main.event .section__text {
  margin-top: 23px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .section__text {
    font-size: 1.4rem;
    line-height: 1.35714286;
  }
}
.ly_main.event .section.background .section__text {
  font-size: 1.8rem;
  line-height: 1.44444444;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .section.background .section__text {
    font-size: 1.4rem;
  }
}
.ly_main.event .date,
.ly_main.event .cost {
  margin-top: 80px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .date,
.ly_main.event .cost {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections1 .ly_sections {
    padding-left: 56px;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .ly_sections._title {
    padding-left: 56px;
  }
}

/* Page
--------------------------------------------------*/
.ly_main.event .ly_sections {
  margin: 0 auto;
  max-width: 848px;
  padding: 0 24px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .ly_sections {
    padding: 0 16px;
  }
}
.ly_main.event .ly_sections._program {
  max-width: 888px;
}
.ly_main.event .ly_sections-title {
  margin: 0 auto;
  max-width: 848px;
  padding: 0 24px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .ly_section__titleWrap {
    padding-left: 40px;
  }
}
.ly_main.event .sections1 {
  background: linear-gradient(127.19deg, #F4F6F8 13.18%, #E2DDFB 85.54%), #FF3366;
  padding: 80px 0;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections1 {
    padding: 40px 0;
  }
}
.ly_main.event .sections2 {
  background-color: #000;
  padding: 80px 0;
}
.ly_main.event .sections2 .section__title {
  color: #FFF;
}
.ly_main.event .sections2 .program__item {
  margin-top: 40px;
}
.ly_main.event .sections2 .color__gradientWrap {
  background-color: #FFF;
  border-radius: 5px 5px 0 0;
}
.ly_main.event .sections2 .item__time time {
  border: 1px solid #FCFBFB;
  border-radius: 8px;
  color: #FFF;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  padding: 8px 16px;
}
.ly_main.event .sections2 .item__wrap {
  border-radius: 8px;
}
.ly_main.event .sections2 .item__title {
  background-color: #FFF;
  border-radius: 8px 8px 0 0;
  color: #FF3366;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 10px 10px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections2 .item__title {
    font-size: 1.4rem;
  }
}
.ly_main.event .sections2 .item__body {
  background-color: #333;
  border-radius: 0px 0px 8px 8px;
  color: #FFF;
  font-style: 1.8rem;
  padding: 24px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections2 .item__body {
    font-size: 1.4rem;
  }
}
.ly_main.event .sections2 .item__heading {
  color: #FFF;
  font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections2 .item__heading {
    font-size: 1.6rem;
  }
}
.ly_main.event .sections2 .item__text {
  font-size: 1.8rem;
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections2 .item__text {
    font-size: 1.6rem;
  }
}
.ly_main.event .sections2 .discussion p {
  line-height: 1.375;
}
.ly_main.event .sections2 .discussion__heading {
  font-size: 1.6rem;
  font-weight: 700;
}
.ly_main.event .sections2 .discussion__heading._facilitator {
  margin-top: 24px;
}
.ly_main.event .sections2 .discussion__panelist,
.ly_main.event .sections2 .discussion__facilitator {
  font-size: 1.8rem;
  margin-top: 22px;
  padding: 0 24px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections2 .discussion__panelist,
.ly_main.event .sections2 .discussion__facilitator {
    font-size: 1.6rem;
  }
}
.ly_main.event .sections3 {
  color: #FFF;
  padding: 80px 0;
}
.ly_main.event .sections3 .section__title::before {
  background: linear-gradient(#fff, #fff);
}
.ly_main.event .sections3 .speakers__item {
  justify-content: flex-start;
  margin-top: 40px;
}
.ly_main.event .sections3 .speakers__head {
  flex: 120px 0 0;
  margin-right: 16px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections3 .speakers__head {
    margin-right: 0;
    text-align: center;
  }
}
.ly_main.event .sections3 .speakers__head img {
  border-radius: 50%;
  width: 120px;
}
.ly_main.event .sections3 .speakers__body {
  font-size: 0;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections3 .speakers__body {
    margin-top: 16px;
  }
}
.ly_main.event .sections3 .speakers__info {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 4px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections3 .speakers__info {
    margin-bottom: 1px;
  }
}
.ly_main.event .sections3 .speakers__text {
  font-size: 1.4rem;
  font-weight: 300;
  margin-top: 4px;
  padding-top: 2px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections3 .speakers__text {
    font-size: 1.4rem;
    line-height: 1.3125;
    padding-top: 8px;
  }
}
.ly_main.event .sections4 {
  padding: 80px 0;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections4 {
    padding: 40px 0;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .sections4 .ly_sections {
    padding-left: 56px;
  }
}
.ly_main.event .footer {
  background-color: #333333;
  color: #FFF;
  padding: 40px 40px 0;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer {
    padding-bottom: 56px;
  }
}
.ly_main.event .footer__items {
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__logo {
    margin-bottom: 56px;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__menu {
    padding-top: 56px;
  }
}
.ly_main.event .footer__menu .menu__list:nth-child(2) {
  margin-left: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .ly_main.event .footer__menu .menu__list:nth-child(2) {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__menu .menu__list:nth-child(2) {
    margin-left: 0;
    margin-top: 56px;
  }
}
.ly_main.event .footer__menu .menu__heading {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .ly_main.event .footer__menu .menu__heading {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__menu .menu__heading {
    margin-bottom: 1.4px;
  }
}
.ly_main.event .footer__menu .menu__item {
  transition: all 0.7s ease;
}
.ly_main.event .footer__menu .menu__item:not(:first-child) {
  margin-top: 12px;
}
.ly_main.event .footer__menu .menu__item:hover {
  color: #FF3366;
}
.ly_main.event .footer__cta {
  flex: 290px 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .ly_main.event .footer__cta {
    flex: 230px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__cta {
    border-top: 1px dashed #fff;
    padding-top: 56px;
  }
}
.ly_main.event .footer__cta .cta__item {
  padding: 14px;
}
.ly_main.event .footer__cta .cta__item:not(:first-child) {
  margin-top: 16px;
}
.ly_main.event .footer__cta .cta__information,
.ly_main.event .footer__cta .cta__download {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
}
.ly_main.event .footer__cta .cta__application,
.ly_main.event .footer__cta .cta__download {
  font-weight: 700;
  text-align: center;
}
.ly_main.event .footer__cta .cta__information .information__tel {
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .ly_main.event .footer__cta .cta__information .information__tel {
    font-size: 2.4rem;
  }
}
.ly_main.event .footer__cta .cta__information .information__time {
  font-size: 1.4rem;
}
.ly_main.event .footer__cta .cta__information .information__contact {
  font-size: 1.6rem;
  line-height: 1.5;
  text-decoration: underline;
}
.ly_main.event .footer__cta .cta__application {
  background-color: #FF3366;
  border-radius: 8px;
  color: #FFF;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__sns {
    margin-top: 56px;
  }
}
.ly_main.event .footer__sns .sns__list {
  justify-content: flex-start;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__sns .sns__list {
    justify-content: center;
  }
}
.ly_main.event .footer__sns .sns__item {
  transition: all 0.7s ease;
}
.ly_main.event .footer__sns .sns__item:hover {
  color: #FF3366;
}
.ly_main.event .footer__sns .sns__item:not(:first-child) {
  margin-left: 12px;
}
.ly_main.event .footer__below {
  border-top: 1px solid #FFF;
  justify-content: space-between;
  margin-top: 24px;
  padding: 15px 0 10px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__below {
    align-items: center;
    flex-direction: column-reverse;
    justify-content: center;
    margin-top: 56px;
  }
}
.ly_main.event .footer__copyright {
  font-size: 1.2rem;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__copyright {
    margin: 0 calc(50% - 50vw);
    margin-top: 24px;
    text-align: center;
    width: 100vw;
  }
}
.ly_main.event .footer__law .law__item {
  font-size: 1.4rem;
  transition: all 0.7s ease;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__law .law__item {
    text-align: center;
  }
}
.ly_main.event .footer__law .law__item:not(:first-child) {
  margin-left: 14px;
}
@media only screen and (max-width: 767px) {
  .ly_main.event .footer__law .law__item:not(:first-child) {
    margin-left: 0;
    margin-top: 15px;
  }
}
.ly_main.event .footer__law .law__item:hover {
  color: #FF3366;
}

::-webkit-input-placeholder {
  color: #2C2C2C;
  opacity: 0.5;
}

::-moz-placeholder {
  color: #2C2C2C;
  opacity: 0.5;
}

:-ms-input-placeholder {
  color: #2C2C2C;
  opacity: 0.5;
}

::-ms-input-placeholder {
  color: #2C2C2C;
  opacity: 0.5;
}

::placeholder {
  color: #2C2C2C;
  opacity: 0.5;
}

/* top
--------------------------------------------------*/
.lp .top {
  background-image: url("https://info.spacely.co.jp/wp-content/uploads/2021/11/top-bg-1.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 140px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .top {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .top {
    background-image: url("https://info.spacely.co.jp/wp-content/uploads/2021/11/top-bg-sp.png");
  }
}
.lp .fv {
  margin-bottom: 100px;
}
.lp .fv__loading .loading__cover {
  background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
.lp .fv__loading .js_loading__text {
  position: relative;
  z-index: 30;
}
.lp .fv__loading .progressbar-text {
  font-size: 32rem;
  margin-top: 50px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__loading .progressbar-text {
    font-size: 24rem;
    height: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv__loading .progressbar-text {
    font-size: 24rem;
  }
}
.lp .fv__loading .loading__text-th {
  color: #FFF;
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 20rem;
  transition: color 0.5s ease;
}
.lp .fv__loading .loading__text-th._load {
  color: #000;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__loading .loading__text-th {
    font-size: 14rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv__loading .loading__text-th {
    font-size: 12rem;
  }
}
.lp .fv__loading .loading__anniversary {
  font-family: "DIN Condensed", "din-condensed", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .lp .fv__loading .loading__anniversary {
    font-size: 4rem;
  }
}
.lp .fv .ly_scrolldown {
  margin-top: 140px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv .ly_scrolldown {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv .ly_scrolldown {
    margin-top: 60px;
  }
}
.lp .fv__scrolldown {
  bottom: 10px;
  color: #FF3366;
  font-size: 1rem;
}
.lp .fv__scrolldown .scrolldown__icon {
  -webkit-transform: translateX(-50%);
  -webkit-animation: mousemove 1.6s ease-in-out infinite;
  animation: mousemove 1.6s ease-in-out infinite;
  left: 50%;
  position: absolute;
  position: relative;
  transform: translateX(-50%);
}
.lp .fv__scrolldown .scrolldown__icon::before {
  -webkit-transform: translateX(-50%);
  border: 1px solid #FF3366;
  border-radius: 19px;
  bottom: 0;
  content: "";
  height: 32px;
  left: 50%;
  /*描画位置*/
  position: absolute;
  transform: translateX(-50%);
  /*マウスの形状*/
  width: 18px;
}
.lp .fv__scrolldown .scrolldown__icon::after {
  -webkit-transform: translateX(-50%);
  border: 1px solid #FF3366;
  border-radius: 50%;
  bottom: 20px;
  content: "";
  height: 5px;
  left: 50%;
  /*描画位置*/
  position: absolute;
  transform: translateX(-50%);
  /*丸の形状*/
  width: 5px;
}
.lp .fv__message {
  background: rgba(255, 255, 255, 0.6);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 40px;
  height: 545px;
  margin: 30px auto;
  max-width: 895px;
  padding: 80px 24px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__message {
    background-image: none !important;
    border: 1px solid #FF3366;
    height: auto;
    padding: 40px 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv__message {
    background-image: none !important;
    border: 1px solid #FF3366;
    height: auto;
    padding: 40px 0;
  }
}
.lp .fv__message p {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 26px 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__message p {
    font-size: 2rem;
    margin: 14px 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv__message p {
    font-size: 1.6rem;
    line-height: 1.45833333;
  }
}
.lp .fv__message p._lg {
  font-size: 4rem;
  line-height: 1;
}
.lp .fv__message p._lg:first-child {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__message p._lg:first-child {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .fv__message p._lg {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .fv__message p._lg {
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    line-height: 1.47916667;
  }
}
.lp .fv__message p._lg.hp_color__primary {
  background-color: #FCFBFB;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 90%;
}
.lp .movie {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.lp .movie__arc {
  background: linear-gradient(127.28deg, #EDD6E6 13.31%, #E2DDFB 85.56%), #FF3366;
  border-top-left-radius: 4000px 200px;
  border-top-right-radius: 4000px 200px;
  margin-left: -100px;
  margin-right: -100px;
  min-height: 400px;
  padding: 90px 100px 140px;
}
@media only screen and (max-width: 767px) {
  .lp .movie__arc {
    margin: 0;
    padding: 0;
  }
}
.lp .movie__bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .movie__bg {
    background-size: contain;
    height: 400px;
    padding-top: 60px;
  }
}
.lp .movie__title {
  font-size: 4rem;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .lp .movie__title {
    font-size: 1.6rem;
  }
}
.lp .movie__youtube {
  height: 354px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  max-width: 630px;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .movie__youtube {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .movie__youtube {
    height: 165px;
    margin-top: 36px;
    max-width: 300px;
  }
}
.lp .movie__youtube iframe {
  height: 100%;
  width: 100%;
}
.lp .graph {
  background: linear-gradient(127.19deg, #F4F6F8 13.18%, #E2DDFB 85.54%), #FF3366;
  padding-bottom: 265px;
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .lp .graph {
    padding-bottom: 40px;
  }
}
.lp .graph__row {
  margin-top: 65px;
}
@media only screen and (max-width: 767px) {
  .lp .graph__row {
    margin: 10px auto 0;
    max-width: 480px;
  }
}
.lp .graph__row > .grid__item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: calc(50% - 20px);
}
.lp .graph__row > .grid__item:not(:first-child) {
  margin-left: 40px;
}
@media only screen and (max-width: 767px) {
  .lp .graph__row > .grid__item:not(:first-child) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph__row > .grid__item {
    margin-top: 10px;
    width: 100%;
  }
}
.lp .graph__title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.46875;
}
@media only screen and (max-width: 1280px) {
  .lp .graph__title {
    font-size: 3rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .lp .graph__title {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph__title {
    font-size: 1.4rem;
  }
}
.lp .graph__item {
  background-color: #FFF;
  height: 600px;
  padding: 24px 24px 14px;
}
@media only screen and (max-width: 767px) {
  .lp .graph__item {
    height: 345px;
    padding: 8px;
  }
}
.lp .graph__num {
  font-family: "DIN Condensed", "din-condensed", sans-serif;
  font-weight: 700;
}
.lp .graph__percent {
  letter-spacing: 0;
}
.lp .graph__percent.margin-left {
  margin-left: 2px;
}
@media only screen and (max-width: 767px) {
  .lp .graph__percent.margin-left {
    margin-left: 0;
  }
}
.lp .graph__percent.margin-right {
  margin-right: 3px;
}
@media only screen and (max-width: 767px) {
  .lp .graph__percent.margin-right {
    margin-right: 1px;
  }
}
.lp .graph .caution {
  bottom: 10px;
  font-size: 1.2rem;
  left: 24px;
  position: absolute;
}
@media only screen and (max-width: 767px) {
  .lp .graph .caution {
    bottom: 3px;
    font-size: 0.6rem;
    left: 10px;
  }
}
.lp .graph .caution-right {
  bottom: 18px;
  font-size: 1.2rem;
  position: absolute;
  right: 24px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .caution-right {
    bottom: 3px;
    font-size: 0.6rem;
    right: 8px;
  }
}
.lp .graph .share {
  position: relative;
}
.lp .graph .share__title {
  color: #6666CC;
  font-size: 2.4rem;
  margin-bottom: 8px;
  margin-top: 30px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .share__title {
    font-size: 1.4rem;
    margin-bottom: 3px;
    margin-top: 6px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .share__title {
    margin-top: 15px;
  }
}
.lp .graph .share__graph {
  background-repeat: no-repeat;
  background-size: contain;
  height: 120px;
  margin: 0 auto;
  position: relative;
  width: 120px;
}
@media only screen and (max-width: 950px) {
  .lp .graph .share__graph {
    height: 100px;
    width: 100px;
  }
}
@media only screen and (max-width: 850px) {
  .lp .graph .share__graph {
    height: 80px;
    width: 80px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .share__graph {
    height: 57px;
    width: 57px;
  }
}
.lp .graph .share__num {
  -webkit-transform: translate(-50%, -43%) !important;
  color: #6666CC;
  font-size: 4rem;
  font-weight: 400;
  left: 50%;
  letter-spacing: -0.03em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -43%) !important;
}
@media only screen and (max-width: 950px) {
  .lp .graph .share__num {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .share__num {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .lp .graph .share__num {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .share__num {
    font-size: 1.7rem;
  }
}
.lp .graph .share__num .js_counter {
  font-weight: 700;
}
.lp .graph .share__num span {
  font-size: 7rem;
}
@media only screen and (max-width: 950px) {
  .lp .graph .share__num span {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .share__num span {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .share__num span {
    font-size: 3.2rem;
  }
}
.lp .graph .share__labelWrap {
  font-size: 0;
}
.lp .graph .share__label {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 3px;
  text-align: center;
  width: 100%;
}
@media only screen and (max-width: 900px) {
  .lp .graph .share__label {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .share__label {
    font-size: 0.8rem;
    font-weight: 400;
  }
}
.lp .graph .share__caution {
  display: inline-block;
  font-size: 1.2rem;
  text-align: center;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .share__caution {
    font-size: 0.6rem;
  }
}
.lp .graph .share .grid-sm {
  align-items: flex-start;
}
.lp .graph .share .grid__item {
  width: calc(33.3333333333% - 20px);
}
.lp .graph .share .grid__item:not(:first-child) {
  margin-left: 30px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .share .grid__item:not(:first-child) {
    margin-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .share .grid__item {
    flex: 80px 0 0;
  }
}
.lp .graph .account {
  position: relative;
}
.lp .graph .account__head {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 1.3;
  margin: 0 auto;
  text-align: center;
}
.lp .graph .account__label {
  background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
  border-radius: 50px;
  color: #FFF;
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 3px 14px;
}
@media only screen and (max-width: 945px) {
  .lp .graph .account__label {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 800px) {
  .lp .graph .account__label {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .account__label {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .account__label {
    font-size: 0.8rem;
  }
}
.lp .graph .account__num {
  align-items: center;
  display: flex;
  font-size: 3.6rem;
  margin-left: 40px;
}
@media only screen and (max-width: 945px) {
  .lp .graph .account__num {
    font-size: 2.6rem;
    margin-left: 20px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 800px) {
  .lp .graph .account__num {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .account__num {
    font-size: 3rem;
    margin-top: 0;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .account__num {
    font-size: 1.6rem;
  }
}
.lp .graph .account__num .js_counter {
  font-size: 9rem;
}
@media only screen and (max-width: 945px) {
  .lp .graph .account__num .js_counter {
    font-size: 7.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .account__num .js_counter {
    font-size: 8rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .account__num .js_counter {
    font-size: 5.5rem;
  }
}
.lp .graph .account figure {
  text-align: center;
}
.lp .graph .account figure img {
  max-width: 302px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .account figure {
    margin: 0 auto;
    width: 35%;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .account figure {
    width: 45%;
  }
}
@media only screen and (max-width: 400px) {
  .lp .graph .account figure {
    width: 55%;
  }
}
.lp .graph .account .graph__title span {
  font-size: 1.2rem;
}
.lp .graph .account .breakthrough {
  padding-top: 10px;
}
@media only screen and (max-width: 800px) {
  .lp .graph .account .breakthrough {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .account .breakthrough {
    padding-top: 10px;
  }
}
.lp .graph .growth {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth {
    background-size: 95%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth {
    background-size: 70%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth {
    height: 200px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .growth {
    background-size: 90%;
  }
}
.lp .graph .growth__num {
  font-size: 10rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth__num {
    font-size: 8rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth__num {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth__num {
    font-size: 2.4rem;
  }
}
.lp .graph .growth__num .js_counter {
  font-size: 20rem;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth__num .js_counter {
    font-size: 15rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth__num .js_counter {
    font-size: 13rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth__num .js_counter {
    font-size: 4.8rem;
  }
}
.lp .graph .growth__num-times {
  text-stroke: 3px #FFF;
  font-size: 8rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth__num-times {
    text-stroke: 2px #FFF;
    font-size: 6rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth__num-times {
    text-stroke: 1px #FFF;
    font-size: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth__num-times {
    font-size: 1.6rem;
  }
}
.lp .graph .growth__num-times .js_counter {
  font-size: 16rem;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth__num-times .js_counter {
    font-size: 14rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth__num-times .js_counter {
    font-size: 12rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth__num-times .js_counter {
    font-size: 3.8rem;
  }
}
.lp .graph .growth .grid-sm {
  margin-top: 15%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .growth .grid-sm {
    margin-top: 16%;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth .grid-sm {
    margin-top: 18%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .growth .grid-sm {
    margin-top: 20%;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth .grid-sm {
    margin-top: 23%;
  }
}
@media only screen and (max-width: 800px) {
  .lp .graph .growth .grid-sm {
    margin-top: 26%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth .grid-sm {
    margin-top: 16%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .growth .grid-sm {
    margin-top: 20%;
  }
}
.lp .graph .growth .grid__item {
  flex: 33% 0 0;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth .grid__item {
    flex: 24% 0 0;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .growth .grid__item {
    flex: 30% 0 0;
  }
}
.lp .graph .growth .grid__item:first-child {
  color: #B3B3B3;
}
@media only screen and (max-width: 800px) {
  .lp .graph .growth .grid__item:first-child {
    text-align: left;
  }
}
.lp .graph .growth .grid__item:nth-child(2) {
  line-height: 1;
  margin-top: 160px;
}
@media only screen and (min-width: 901px) {
  .lp .graph .growth .grid__item:nth-child(2) {
    flex: 350px 0 1;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .growth .grid__item:nth-child(2) {
    text-align: left;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .growth .grid__item:nth-child(2) {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .growth .grid__item:nth-child(2) {
    text-align: center;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .growth .grid__item:nth-child(3) {
    text-align: left;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .growth .grid__item:nth-child(3) {
    text-align: center;
  }
}
.lp .graph .office {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .lp .graph .office {
    height: 200px;
  }
}
.lp .graph .office__bgImg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 64%;
  height: 500px;
}
@media only screen and (max-width: 1240px) {
  .lp .graph .office__bgImg {
    background-size: 66%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office__bgImg {
    background-size: 68%;
  }
}
@media only screen and (max-width: 1140px) {
  .lp .graph .office__bgImg {
    background-size: 72%;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .office__bgImg {
    background-size: 74%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office__bgImg {
    background-size: contain;
    height: 380px;
    margin: 0 auto;
    margin-top: 80px;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office__bgImg {
    height: 330px;
    margin-top: 100px;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office__bgImg {
    height: 280px;
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office__bgImg {
    height: 150px;
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office__bgImg {
    background-size: contain;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office__bgImg {
    height: 120px;
    margin-top: 30px;
  }
}
.lp .graph .office__num {
  font-size: 5rem;
  letter-spacing: -0.03em;
  position: absolute;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office__num {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office__num {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office__num {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office__num {
    font-size: 1.5rem;
  }
}
.lp .graph .office__num .js_counter {
  font-size: 11.2rem;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office__num .js_counter {
    font-size: 9rem;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office__num .js_counter {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office__num .js_counter {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office__num .js_counter {
    font-size: 3rem;
  }
}
.lp .graph .office ._1 {
  left: 20%;
  top: 20%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._1 {
    left: 22%;
    top: 22%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._1 {
    left: 20%;
    top: 22%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._1 {
    left: 19%;
    top: 22%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._1 {
    left: 23%;
    top: 31%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._1 {
    left: 22%;
    top: 31%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._1 {
    left: 23%;
    top: 32%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._1 {
    left: 22%;
    top: 32%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._1 {
    left: 20%;
    top: 32%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._1 {
    left: 19%;
    top: 32%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._1 {
    left: 17%;
    top: 32%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._1 {
    left: 24%;
    top: 33%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._1 {
    left: 23%;
    top: 20%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._1 {
    left: 23%;
    top: 20%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._1 {
    left: 25%;
    top: 30%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._1 {
    left: 23%;
    top: 31%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._1 {
    left: 20%;
    top: 31%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._1 {
    left: 18%;
    top: 31%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._1 {
    left: 16%;
    top: 31%;
  }
}
.lp .graph .office ._2 {
  right: 16%;
  top: 13%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._2 {
    right: 16%;
    top: 16%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._2 {
    right: 13%;
    top: 16%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._2 {
    right: 10%;
    top: 16%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._2 {
    right: 14%;
    top: 25%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._2 {
    right: 13%;
    top: 25%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._2 {
    right: 17%;
    top: 27%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._2 {
    right: 15%;
    top: 27%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._2 {
    right: 13%;
    top: 27%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._2 {
    right: 12%;
    top: 27%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._2 {
    right: 9%;
    top: 27%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._2 {
    right: 13%;
    top: 28%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._2 {
    right: 18%;
    top: 13%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._2 {
    right: 17%;
    top: 14%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._2 {
    right: 21%;
    top: 26%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._2 {
    right: 19%;
    top: 26%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._2 {
    right: 16%;
    top: 26%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._2 {
    right: 14%;
    top: 26%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._2 {
    right: 12%;
    top: 25%;
  }
}
.lp .graph .office ._3 {
  left: 4%;
  top: 45%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._3 {
    left: 5%;
    top: 48%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._3 {
    left: 3%;
    top: 48%;
  }
}
@media only screen and (max-width: 1170px) {
  .lp .graph .office ._3 {
    left: 1%;
    top: 48%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._3 {
    left: 0%;
    top: 48%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._3 {
    left: 5%;
    top: 53%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._3 {
    left: 4%;
    top: 53%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._3 {
    left: 6%;
    top: 51%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._3 {
    left: 5%;
    top: 51%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._3 {
    left: 2%;
    top: 51%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._3 {
    left: 1%;
    top: 51%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._3 {
    left: 0%;
    top: 51%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._3 {
    left: 5%;
    top: 49%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._3 {
    left: 9%;
    top: 46%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._3 {
    left: 8%;
    top: 46%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._3 {
    left: 11%;
    top: 52%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._3 {
    left: 9%;
    top: 52%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._3 {
    left: 4%;
    top: 52%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._3 {
    left: 2%;
    top: 52%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._3 {
    left: 1%;
    top: 52%;
  }
}
.lp .graph .office ._4 {
  right: 4%;
  top: 40%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._4 {
    right: 6%;
    top: 43%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._4 {
    right: 3%;
    top: 43%;
  }
}
@media only screen and (max-width: 1170px) {
  .lp .graph .office ._4 {
    right: 1%;
    top: 43%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._4 {
    right: 0%;
    top: 43%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._4 {
    right: 5%;
    top: 50%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._4 {
    right: 4%;
    top: 49%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._4 {
    right: 6%;
    top: 48%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._4 {
    right: 5%;
    top: 48%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._4 {
    right: 2%;
    top: 48%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._4 {
    right: 1%;
    top: 48%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._4 {
    right: 0%;
    top: 48%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._4 {
    right: 5%;
    top: 46%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._4 {
    right: 9%;
    top: 42%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._4 {
    right: 8%;
    top: 42%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._4 {
    right: 11%;
    top: 49%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._4 {
    right: 9%;
    top: 49%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._4 {
    right: 4%;
    top: 49%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._4 {
    right: 2%;
    top: 49%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._4 {
    right: 1%;
    top: 48%;
  }
}
.lp .graph .office ._5 {
  left: 17%;
  top: 70%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._5 {
    left: 18%;
    top: 72%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._5 {
    left: 15%;
    top: 72%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._5 {
    left: 12%;
    top: 72%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._5 {
    left: 18%;
    top: 76%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._5 {
    left: 17%;
    top: 76%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._5 {
    left: 18%;
    top: 71%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._5 {
    left: 17%;
    top: 71%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._5 {
    left: 15%;
    top: 71%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._5 {
    left: 14%;
    top: 71%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._5 {
    left: 12%;
    top: 71%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._5 {
    left: 17%;
    top: 66%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._5 {
    left: 20%;
    top: 74%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._5 {
    left: 19%;
    top: 74%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._5 {
    left: 22%;
    top: 74%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._5 {
    left: 20%;
    top: 74%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._5 {
    left: 17%;
    top: 74%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._5 {
    left: 15%;
    top: 74%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._5 {
    left: 13%;
    top: 74%;
  }
}
.lp .graph .office ._6 {
  right: 11%;
  top: 70%;
}
@media only screen and (max-width: 1280px) {
  .lp .graph .office ._6 {
    right: 13%;
    top: 72%;
  }
}
@media only screen and (max-width: 1200px) {
  .lp .graph .office ._6 {
    right: 10%;
    top: 72%;
  }
}
@media only screen and (max-width: 1130px) {
  .lp .graph .office ._6 {
    right: 7%;
    top: 72%;
  }
}
@media only screen and (max-width: 1080px) {
  .lp .graph .office ._6 {
    right: 13%;
    top: 76%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .office ._6 {
    right: 12%;
    top: 76%;
  }
}
@media only screen and (max-width: 1010px) {
  .lp .graph .office ._6 {
    right: 13%;
    top: 71%;
  }
}
@media only screen and (max-width: 960px) {
  .lp .graph .office ._6 {
    right: 12%;
    top: 71%;
  }
}
@media only screen and (max-width: 930px) {
  .lp .graph .office ._6 {
    right: 9%;
    top: 71%;
  }
}
@media only screen and (max-width: 880px) {
  .lp .graph .office ._6 {
    right: 8%;
    top: 71%;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .office ._6 {
    right: 6%;
    top: 71%;
  }
}
@media only screen and (max-width: 820px) {
  .lp .graph .office ._6 {
    right: 12%;
    top: 66%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .office ._6 {
    right: 15%;
    top: 74%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .office ._6 {
    right: 14%;
    top: 74%;
  }
}
@media only screen and (max-width: 470px) {
  .lp .graph .office ._6 {
    right: 16%;
    top: 75%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .office ._6 {
    right: 14%;
    top: 75%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .office ._6 {
    right: 11%;
    top: 74%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .office ._6 {
    right: 9%;
    top: 74%;
  }
}
@media only screen and (max-width: 370px) {
  .lp .graph .office ._6 {
    right: 7%;
    top: 74%;
  }
}
.lp .graph .industry {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .lp .graph .industry {
    height: 200px;
  }
}
.lp .graph .industry figure {
  margin-top: 40px;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .industry figure {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .industry figure {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .industry figure {
    margin: 10px auto 0;
    width: 90%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .industry figure {
    width: 100%;
  }
}
@media only screen and (max-width: 400px) {
  .lp .graph .industry figure {
    margin-top: 30px;
    width: 100%;
  }
}
.lp .graph .support {
  padding-top: 90px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .support {
    padding-top: 25px;
  }
}
.lp .graph .utilizationRatio {
  position: relative;
}
.lp .graph .utilizationRatio__bgImg {
  -webkit-transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .utilizationRatio__bgImg {
    width: 80%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .utilizationRatio__bgImg {
    width: 90%;
  }
}
@media only screen and (max-width: 780px) {
  .lp .graph .utilizationRatio__bgImg {
    width: 95%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .utilizationRatio__bgImg {
    width: 85%;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .utilizationRatio__bgImg {
    width: 90%;
  }
}
.lp .graph .utilizationRatio__num {
  -webkit-transform: translate(-50%, -30%);
  font-size: 8.5rem;
  left: 50%;
  letter-spacing: -0.03em;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -30%);
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .utilizationRatio__num {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .utilizationRatio__num {
    font-size: 4.2rem;
  }
}
.lp .graph .utilizationRatio__num .js_counter {
  font-size: 17rem;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .utilizationRatio__num .js_counter {
    font-size: 12rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .utilizationRatio__num .js_counter {
    font-size: 11rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .utilizationRatio__num .js_counter {
    font-size: 8.4rem;
  }
}
.lp .graph .utilizationRatio__num .js_counter.decimal {
  font-size: 8.5rem;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .utilizationRatio__num .js_counter.decimal {
    font-size: 6rem;
  }
}
.lp .graph .satisfaction {
  position: relative;
}
.lp .graph .satisfaction__bgImg {
  -webkit-transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .satisfaction__bgImg {
    width: 60%;
  }
}
@media only screen and (max-width: 1040px) {
  .lp .graph .satisfaction__bgImg {
    width: 70%;
  }
}
@media only screen and (max-width: 840px) {
  .lp .graph .satisfaction__bgImg {
    width: 75%;
  }
}
@media only screen and (max-width: 780px) {
  .lp .graph .satisfaction__bgImg {
    width: 80%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .satisfaction__bgImg {
    width: 55%;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .satisfaction__bgImg {
    width: 60%;
  }
}
.lp .graph .satisfaction__num {
  -webkit-transform: translate(-50%, -80%);
  color: #FFF;
  font-size: 8.5rem;
  left: 50%;
  letter-spacing: -0.03em;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -80%);
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .satisfaction__num {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .satisfaction__num {
    font-size: 4.2rem;
  }
}
.lp .graph .satisfaction__num .js_counter {
  font-size: 17rem;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .satisfaction__num .js_counter {
    font-size: 12rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .satisfaction__num .js_counter {
    font-size: 11rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .satisfaction__num .js_counter {
    font-size: 8.4rem;
  }
}
.lp .graph .satisfaction__num .js_counter.decimal {
  font-size: 8.5rem;
}
@media only screen and (max-width: 1200px) {
  .lp .graph .satisfaction__num .js_counter.decimal {
    font-size: 6rem;
  }
}
.lp .graph .supporter {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .lp .graph .supporter {
    height: 200px;
  }
}
.lp .graph .supporter__bgImg {
  -webkit-transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .supporter__bgImg {
    width: 70%;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .supporter__bgImg {
    width: 90%;
  }
}
.lp .graph .supporter__num {
  font-size: 12rem;
  left: 25%;
  letter-spacing: -0.05em;
  line-height: 1;
  position: absolute;
  top: 29%;
}
@media only screen and (min-width: 1280px) and (max-width: ) {
  .lp .graph .supporter__num {
    left: 23%;
  }
}
@media only screen and (max-width: 1160px) {
  .lp .graph .supporter__num {
    left: 21%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .supporter__num {
    font-size: 9rem;
    left: 25%;
    top: 32%;
  }
}
@media only screen and (max-width: 940px) {
  .lp .graph .supporter__num {
    left: 22%;
  }
}
@media only screen and (max-width: 840px) {
  .lp .graph .supporter__num {
    left: 22%;
    top: 33%;
  }
}
@media only screen and (max-width: 780px) {
  .lp .graph .supporter__num {
    left: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .supporter__num {
    font-size: 4rem;
    left: 24%;
    top: 29%;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .supporter__num {
    font-size: 5rem;
    left: 25%;
    top: 32%;
  }
}
@media only screen and (max-width: 440px) {
  .lp .graph .supporter__num {
    left: 24%;
    top: 28%;
  }
}
@media only screen and (max-width: 420px) {
  .lp .graph .supporter__num {
    left: 22%;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .supporter__num {
    font-size: 3.6rem;
    left: 25%;
    top: 37%;
  }
}
.lp .graph .supporter__num .js_counter {
  font-size: 30rem;
}
@media only screen and (max-width: 1000px) {
  .lp .graph .supporter__num .js_counter {
    font-size: 25rem;
  }
}
@media only screen and (max-width: 840px) {
  .lp .graph .supporter__num .js_counter {
    font-size: 22rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .supporter__num .js_counter {
    font-size: 10rem;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .supporter__num .js_counter {
    font-size: 10rem;
  }
}
@media only screen and (max-width: 390px) {
  .lp .graph .supporter__num .js_counter {
    font-size: 7.2rem;
  }
}
.lp .graph .operation {
  position: relative;
}
.lp .graph .operation .graph__item-headIcon {
  position: absolute;
  right: 24px;
  top: 24px;
}
@media only screen and (max-width: 960px) {
  .lp .graph .operation .graph__item-headIcon {
    width: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation .graph__item-headIcon {
    right: 15px;
    top: 15px;
    width: 60px;
  }
}
.lp .graph .operation .graph__item-headIcon img {
  max-width: 118px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation .graph__item-headIcon img {
    max-width: 60px;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .operation .graph__title {
    font-size: 2rem;
  }
}
.lp .graph .operation__above {
  line-height: 1;
  margin-top: 25px;
  text-align: center;
}
@media only screen and (max-width: 960px) {
  .lp .graph .operation__above {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__above {
    margin-top: 15px;
  }
}
.lp .graph .operation__above figure {
  display: inline-block;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__above figure {
    width: 25px;
  }
}
.lp .graph .operation__above figure img {
  max-width: 50px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__above figure img {
    max-width: 25px;
  }
}
.lp .graph .operation__num-time {
  font-size: 2.8rem;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 780px) {
  .lp .graph .operation__num-time {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__num-time {
    font-size: 1.4rem;
  }
}
.lp .graph .operation__num-time .js_counter {
  font-size: 11rem;
  margin-right: 5px;
}
@media only screen and (max-width: 960px) {
  .lp .graph .operation__num-time .js_counter {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__num-time .js_counter {
    font-size: 5.5rem;
  }
}
.lp .graph .operation__below {
  border-top: 1px dashed #000000;
  padding-top: 25px;
  text-align: center;
}
.lp .graph .operation__below p {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__below p {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
}
.lp .graph .operation__num-times {
  font-size: 6.8rem;
  line-height: 1;
}
@media only screen and (max-width: 960px) {
  .lp .graph .operation__num-times {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__num-times {
    font-size: 3.4rem;
  }
}
.lp .graph .operation__num-times .js_counter {
  font-size: 20rem;
}
@media only screen and (max-width: 960px) {
  .lp .graph .operation__num-times .js_counter {
    font-size: 15rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .operation__num-times .js_counter {
    font-size: 10rem;
  }
}
.lp .graph .reduction {
  position: relative;
}
.lp .graph .reduction .graph__item-headIcon {
  position: absolute;
  right: 24px;
  top: 24px;
}
@media only screen and (max-width: 960px) {
  .lp .graph .reduction .graph__item-headIcon {
    width: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction .graph__item-headIcon {
    right: 15px;
    top: 15px;
    width: 60px;
  }
}
.lp .graph .reduction .graph__item-headIcon img {
  max-width: 177px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction .graph__item-headIcon img {
    max-width: 60px;
  }
}
@media only screen and (max-width: 860px) {
  .lp .graph .reduction .graph__title {
    font-size: 2rem;
  }
}
.lp .graph .reduction__above {
  line-height: 1;
  margin-top: 25px;
  text-align: center;
}
@media only screen and (max-width: 960px) {
  .lp .graph .reduction__above {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__above {
    margin-top: 15px;
  }
}
.lp .graph .reduction__above figure {
  display: inline-block;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__above figure {
    width: 25px;
  }
}
.lp .graph .reduction__above figure img {
  max-width: 50px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__above figure img {
    max-width: 25px;
  }
}
.lp .graph .reduction__num-time {
  font-size: 2.8rem;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 780px) {
  .lp .graph .reduction__num-time {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__num-time {
    font-size: 1.4rem;
  }
}
.lp .graph .reduction__num-time .js_counter {
  font-size: 11rem;
  margin-right: 5px;
}
@media only screen and (max-width: 960px) {
  .lp .graph .reduction__num-time .js_counter {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__num-time .js_counter {
    font-size: 5.5rem;
  }
}
.lp .graph .reduction__below {
  border-top: 1px dashed #000000;
  padding-top: 25px;
  text-align: center;
}
.lp .graph .reduction__below p {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__below p {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
}
.lp .graph .reduction__num-times {
  font-size: 6.8rem;
  line-height: 1;
}
@media only screen and (max-width: 960px) {
  .lp .graph .reduction__num-times {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__num-times {
    font-size: 3.4rem;
  }
}
.lp .graph .reduction__num-times .js_counter {
  font-size: 20rem;
}
@media only screen and (max-width: 960px) {
  .lp .graph .reduction__num-times .js_counter {
    font-size: 15rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .reduction__num-times .js_counter {
    font-size: 10rem;
  }
}
.lp .graph .utilization {
  padding-top: 90px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .utilization {
    padding-top: 25px;
  }
}
.lp .graph .upload {
  position: relative;
}
.lp .graph .upload .grid-sm {
  align-items: flex-start;
  margin-top: 50px;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .upload .grid-sm {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .upload .grid-sm {
    margin-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .grid-sm {
    align-items: flex-start;
    margin: 20px auto 0;
  }
}
@media only screen and (max-width: 400px) {
  .lp .graph .upload .grid-sm {
    margin-top: 50px;
  }
}
.lp .graph .upload .grid__item-left,
.lp .graph .upload .grid__item-right {
  text-align: center;
}
@media only screen and (min-width: 1101px) {
  .lp .graph .upload .grid__item-left,
.lp .graph .upload .grid__item-right {
    flex: 50% 0 0;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .upload .grid__item-left,
.lp .graph .upload .grid__item-right {
    flex: 50% 0 0;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .grid__item-left,
.lp .graph .upload .grid__item-right {
    flex: initial;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .upload .grid__item-left {
    width: 35%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .upload .grid__item-left {
    width: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .grid__item-left {
    width: auto;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .upload .grid__item-left {
    width: 20%;
  }
}
@media only screen and (max-width: 450px) {
  .lp .graph .upload .grid__item-left {
    width: 30%;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .upload .grid__item-right {
    margin-left: 5%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .upload .grid__item-right {
    margin-left: 10%;
    width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .grid__item-right {
    margin-left: 10%;
    width: 35%;
  }
}
@media only screen and (max-width: 450px) {
  .lp .graph .upload .grid__item-right {
    width: 45%;
  }
}
.lp .graph .upload .grid__item-right .graph__image img {
  max-width: 232px;
  width: 100%;
}
.lp .graph .upload .graph__num {
  font-size: 6rem;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .upload .graph__num {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .upload .graph__num {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .upload .graph__num {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .graph__num {
    display: inline-block;
    font-size: 3rem;
    margin-top: 20px;
  }
}
.lp .graph .upload .graph__icon {
  text-align: center;
}
.lp .graph .upload .graph__icon img {
  max-width: 120px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload .graph__icon img {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .upload figure {
    margin: 0 auto;
  }
}
.lp .graph .view {
  position: relative;
}
.lp .graph .view .grid-sm {
  margin-top: 13px;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .view .grid-sm {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .view .grid-sm {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .view .grid-sm {
    align-items: flex-start;
    margin: 20px auto 0;
  }
}
@media only screen and (max-width: 380px) {
  .lp .graph .view .grid-sm {
    margin-top: 50px;
  }
}
.lp .graph .view .grid__item-left,
.lp .graph .view .grid__item-right {
  text-align: center;
}
@media only screen and (min-width: 1101px) {
  .lp .graph .view .grid__item-left,
.lp .graph .view .grid__item-right {
    flex: 50% 0 0;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .view .grid__item-left,
.lp .graph .view .grid__item-right {
    flex: 50% 0 0;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .view .grid__item-left,
.lp .graph .view .grid__item-right {
    flex: initial;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .view .grid__item-left {
    width: 35%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .view .grid__item-left {
    width: 30%;
  }
}
@media only screen and (max-width: 500px) {
  .lp .graph .view .grid__item-left {
    width: 20%;
  }
}
@media only screen and (max-width: 450px) {
  .lp .graph .view .grid__item-left {
    width: 30%;
  }
}
.lp .graph .view .grid__item-left .graph__icon img {
  max-width: 170px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .view .grid__item-left .graph__icon img {
    max-width: 99px;
  }
}
@media only screen and (max-width: 1100px) {
  .lp .graph .view .grid__item-right {
    margin-left: 5%;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .view .grid__item-right {
    margin-left: 10%;
    width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .view .grid__item-right {
    margin-left: 10%;
    width: 32%;
  }
}
@media only screen and (max-width: 450px) {
  .lp .graph .view .grid__item-right {
    width: 38%;
  }
}
.lp .graph .view .grid__item-right .graph__image img {
  max-width: 239px;
  width: 100%;
}
.lp .graph .view .graph__num {
  font-size: 6rem;
}
@media only screen and (max-width: 1100px) {
  .lp .graph .view .graph__num {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1000px) {
  .lp .graph .view .graph__num {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 900px) {
  .lp .graph .view .graph__num {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .view .graph__num {
    display: inline-block;
    font-size: 3rem;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .view figure {
    margin: 0 auto;
  }
}
.lp .graph .remote {
  position: relative;
}
.lp .graph .remote__label {
  font-size: 2rem;
}
@media only screen and (max-width: 1080px) {
  .lp .graph .remote__label {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote__label {
    font-size: 1rem;
  }
}
.lp .graph .remote .graph__num {
  font-size: 6rem;
}
@media only screen and (max-width: 1080px) {
  .lp .graph .remote .graph__num {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .graph__num {
    font-size: 3rem;
  }
}
.lp .graph .remote .grid-sm {
  align-items: flex-end;
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid-sm {
    margin-top: 10px;
  }
}
.lp .graph .remote .grid__item-left,
.lp .graph .remote .grid__item-right {
  text-align: center;
}
.lp .graph .remote .grid__item-left {
  position: relative;
}
.lp .graph .remote .grid__item-left .graph__img {
  text-align: center;
}
.lp .graph .remote .grid__item-left .graph__img img {
  max-width: 213px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-left {
    -webkit-transform: translateX(40px);
    flex: 50% 0 0;
    transform: translateX(40px);
  }
  .lp .graph .remote .grid__item-left .graph__img {
    width: 130px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .remote .grid__item-left {
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }
}
.lp .graph .remote .grid__item-left .graph__num {
  left: 8%;
  position: absolute;
  top: -7%;
}
@media only screen and (max-width: 820px) {
  .lp .graph .remote .grid__item-left .graph__num {
    top: -20%;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-left .graph__num {
    top: 0;
  }
}
.lp .graph .remote .grid__item-right {
  margin-left: 60px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-right {
    margin-left: 20px;
  }
}
.lp .graph .remote .grid__item-right .graph__img {
  text-align: center;
}
.lp .graph .remote .grid__item-right .graph__img img {
  max-width: 213px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-right .graph__img img {
    max-width: 143.5px;
  }
}
.lp .graph .remote .grid__item-right .graph__num {
  display: inline-block;
  line-height: 1;
  margin-top: 60px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-right .graph__num {
    margin-top: 30px;
  }
}
.lp .graph .remote .grid__item-right .graph__icon {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-right .graph__icon {
    margin: 0 auto;
    width: 56px;
  }
}
.lp .graph .remote .grid__item-right .graph__icon img {
  max-width: 120px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .remote .grid__item-right .graph__icon img {
    max-width: 56px;
  }
}
@media only screen and (max-width: 480px) {
  .lp .graph .remote .grid__item-right .graph__img {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
.lp .graph .correction {
  position: relative;
}
.lp .graph .correction .graph__title {
  letter-spacing: -0.05em;
}
.lp .graph .correction .graph__num {
  font-size: 6rem;
}
@media only screen and (max-width: 1080px) {
  .lp .graph .correction .graph__num {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .correction .graph__num {
    font-size: 3rem;
  }
}
.lp .graph .correction .grid-sm {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .correction .grid-sm {
    margin-top: 20px;
  }
}
.lp .graph .correction .grid__item-left,
.lp .graph .correction .grid__item-right {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .correction .grid__item-left .graph__icon {
    width: 50px;
  }
}
.lp .graph .correction .grid__item-right {
  margin-left: 60px;
}
.lp .graph .correction .grid__item-right .graph__image img {
  max-width: 232px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .lp .graph .correction .grid__item-right {
    margin-left: 30px;
  }
  .lp .graph .correction .grid__item-right .graph__image {
    width: 130px;
  }
}
.lp .graph .correction .caution {
  bottom: 15px;
  font-size: 1.2rem;
  position: absolute;
  right: 24px;
}
.lp .graph .correction .graph__icon {
  text-align: center;
}
.lp .graph .correction .graph__icon img {
  max-width: 100px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .correction .graph__icon img {
    max-width: 50px;
  }
}
.lp .graph .alignment {
  padding-top: 90px;
}
@media only screen and (max-width: 767px) {
  .lp .graph .alignment {
    padding-top: 25px;
  }
}
.lp .graph .collaborative {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .lp .graph .collaborative {
    height: 200px;
  }
}
.lp .graph .collaborative .graph__num {
  -webkit-transform: translateX(-50%);
  font-size: 10rem;
  left: 50%;
  letter-spacing: -0.03em;
  line-height: 1;
  position: absolute;
  top: 18%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 1080px) {
  .lp .graph .collaborative .graph__num {
    font-size: 8rem;
  }
}
@media only screen and (max-width: 950px) {
  .lp .graph .collaborative .graph__num {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .collaborative .graph__num {
    font-size: 2.4rem;
    top: 22%;
  }
}
.lp .graph .collaborative .graph__num .js_counter {
  font-size: 20rem;
}
@media only screen and (max-width: 1080px) {
  .lp .graph .collaborative .graph__num .js_counter {
    font-size: 18rem;
  }
}
@media only screen and (max-width: 950px) {
  .lp .graph .collaborative .graph__num .js_counter {
    font-size: 15rem;
  }
}
@media only screen and (max-width: 767px) {
  .lp .graph .collaborative .graph__num .js_counter {
    font-size: 5rem;
  }
}
.lp .graph .collaborative .graph__image {
  margin-top: 180px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .graph .collaborative .graph__image {
    margin: 50px auto 0;
    width: 80%;
  }
}
.lp .graph .collaborative .graph__image img {
  max-width: 90%;
}
.lp .useCase {
  padding-top: 120px;
}
@media only screen and (max-width: 767px) {
  .lp .useCase {
    padding-top: 80px;
  }
}
.lp .useCase__item {
  background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%);
  border-radius: 16px;
  margin-top: 80px;
  padding: 1px;
  width: calc(50% - 20px);
}
@media only screen and (max-width: 767px) {
  .lp .useCase__item {
    margin: 24px auto 0;
    max-width: 480px;
    width: 100%;
  }
}
.lp .useCase__item:nth-of-type(2n) {
  margin-left: 40px;
}
@media only screen and (max-width: 767px) {
  .lp .useCase__item:nth-of-type(2n) {
    margin-left: auto;
  }
}
.lp .useCase__inner {
  background-color: #FFF;
  border-radius: 16px;
  padding: 40px;
}
@media only screen and (max-width: 767px) {
  .lp .useCase__inner {
    padding: 24px;
  }
}
.lp .useCase__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-top: 16px;
}
@media only screen and (max-width: 767px) {
  .lp .useCase__title {
    font-size: 1.4rem;
  }
}
.lp .useCase__logo img {
  max-height: 56px;
}
.lp .useCase__introductionWrap {
  margin-top: 15px;
}
.lp .useCase__introduction {
  color: #4F4F4F;
  font-size: 1.4rem;
  line-height: 1.35714286;
}
.lp .useCase__img {
  margin-top: 15px;
}
.lp .useCase__more {
  margin-top: 15px;
}
.lp .useCase .grid {
  flex-wrap: wrap;
}
.lp .business {
  padding-bottom: 120px;
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .lp .business {
    padding: 24px 0 80px;
  }
}
.lp .business .section__title {
  line-height: 1.46875;
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .lp .business .section__title {
    margin-bottom: 24px;
  }
}
.lp .business__logo {
  text-align: center;
}
.lp .footer-5th {
  background-color: #EDEDED;
  padding: 185px 0;
  position: relative;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lp .footer-5th {
    padding: 240px 0;
  }
}
.lp .footer-5th__snsItem {
  flex: 50px 0 0;
}
.lp .footer-5th__snsItem:not(:first-child) {
  margin-left: 30px;
}
.lp .footer-5th__character {
  margin-top: 40px;
}
.lp .footer-5th .grid {
  justify-content: center;
}
.lp .footer-5th__copyright {
  bottom: 10px;
  display: inline-block;
  font-size: 1.3rem;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.lp .spacer {
  position: relative;
}
.lp .spacer img {
  -webkit-transform: translateY(-50%);
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
}

@-webkit-keyframes mousemove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 5px;
  }
  100% {
    bottom: 10px;
  }
}

@keyframes mousemove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 5px;
  }
  100% {
    bottom: 10px;
  }
}
.asterisk {
  -webkit-transform: translateY(-15px);
  display: inline-block;
  transform: translateY(-15px);
}
@media only screen and (max-width: 1080px) {
  .asterisk {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@media only screen and (max-width: 767px) {
  .asterisk {
    -webkit-transform: translateY(-3px);
    font-size: 0.6rem;
    transform: translateY(-3px);
  }
}

.character-icon {
  max-width: 182px !important;
}

.graph__percent {
  font-weight: 400 !important;
}

.js_counter {
  overflow: hidden;
  padding-top: 3px;
}

.js_body.android .js_counter {
  font-weight: 400 !important;
}
.js_body.android .graph__num {
  font-weight: 400 !important;
}

/* Program
--------------------------------------------------*/
/* drawerBtn
--------------------------------------------------*/
.js_drawerNav {
  background: #fff;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 80px;
  z-index: 40;
}

.js_drawerBtn._open .hamburger__icon:nth-child(1) {
  -webkit-transform: translateY(-0.7px) rotate(45deg);
  top: 15px;
  transform: translateY(-0.7px) rotate(45deg);
  width: 40px;
}
.js_drawerBtn._open .hamburger__icon:nth-child(2) {
  -webkit-transform: translateY(-50%);
  opacity: 0;
  transform: translateY(-50%);
}
.js_drawerBtn._open .hamburger__icon:nth-child(3) {
  -webkit-transform: translateY(0.7px) rotate(-45deg);
  top: -10px;
  transform: translateY(0.7px) rotate(-45deg);
  width: 40px;
}

#js_loading__text svg {
  display: none !important;
  height: 0;
}

.progressbar-text {
  line-height: 1;
}

/* Helper
--------------------------------------------------*/
/* helper
--------------------------------------------------*/
.hp_hoverOpacity {
  transition: opacity 0.7s ease !important;
}
@media only screen and (min-width: 768px) {
  .hp_hoverOpacity:hover {
    opacity: 0.7 !important;
  }
}

.ff_sans {
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif !important;
}

@media only screen and (max-width: 1080px) {
  .md_hidden {
    display: none !important;
  }
}

.md_show {
  display: none !important;
}
@media only screen and (max-width: 1080px) {
  .md_show {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  .sm_hidden {
    display: none !important;
  }
}

.sm_show {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .sm_show {
    display: block !important;
  }
}

.hp_bg__gradient {
  background: linear-gradient(86.65deg, #6666CC 0%, #FF3366 100%) !important;
}

.hp_bg__primary {
  background-color: #FF3366;
}

.hp_bg__secondary {
  background-color: #6260A1;
}

.hp_color__primary {
  color: #FF3366 !important;
}

.hp_color__secondary {
  color: #6260A1 !important;
}

.hover-opacity {
  transition: opacity 0.7s ease;
}
.hover-opacity:hover {
  opacity: 0.7;
}