*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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

a:active,
a:hover {
    outline: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
embed,
object,
iframe,
audio,
video,
canvas,
progress,
meter,
output,
textarea {
    display: block;
}


a img,
th img,
td img {
    vertical-align: top;
}

button,
input,
select,
textarea {
    margin: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}


img,
video,
audio,
embed,
object {
    max-width: 100%;
}

img,
video,
embed,
object {
    height: auto;
}

embed,
object {
    height: 100%;
}

img {
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

body {
    font-family:M PLUS 1p", -apple-system, BlinkMacSystemFont, "Helvetica Neue", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
/*    font-family: "Overpass",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Original Yu Gothic","Yu Gothic",YuGothic,Verdana,Meiryo,"M+ 1p",sans-serif;*/
    font-size: 0.95em;
    line-height: 1.65em;
    background: #fff;
    color: #333;
    letter-spacing: 2px;
}

a {
    color: #134da5;
}

a:focus,
a:hover {
    color: #de2c3b;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
/*    font-family: "Playfair Display SC", serif;*/
    font-weight: bold;
    text-rendering: optimizeLegibility;
    margin: 0 0 .5em 0;
}

h1,
.h1,
h2,
.h2 {
    line-height: 1.1;
}

h3,
.h3,
h4,
.h4 {
    line-height: 1.3;
}

h1,
.h1 {
    font-size: 2.25em;
}

h2,
.h2 {
    font-size: 2.2em;
    margin-bottom: 1.1em;
}

h3,
.h3 {
    font-size: 1.3125em;
}

h4,
.h4 {
    font-size: 1.125em;
}

h5,
.h5 {
    font-size: 1em;
}

h6,
.h6 {
    font-size: 0.75em;
    text-transform: uppercase;
}

.lead {
    font-size: 1.3125em;
    line-height: 1.5;
    margin-bottom: 1.0999999999999999em;
}

p,
ul,
ol,
dl,
dd,
dt,
blockquote,
td,
th {
    line-height: 1.65em;
}

ul,
ol,
ul ul,
ol ol,
ul ol,
ol ul {
    margin: 0 0 0 3.3em;
}

ul li,
ol li {
    text-align: left;
}

ol ol li {
    list-style-type: lower-alpha;
}

ol ol ol li {
    list-style-type: lower-roman;
}

p,
ul,
ol,
dl,
blockquote,
hr,
pre,
table,
form,
fieldset,
figure,
address {
    margin-bottom: 1.65em;
}

blockquote {
    position: relative;
    font-style: italic;
    font-size: 1.125em;
    margin-left: 2.4749999999999996em;
    padding-left: 1.65em;
    border-left: 2px solid #dddddd;
}

blockquote p {
    margin-bottom: .5em;
}

blockquote small,
cite {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

small,
blockquote cite {
    font-size: 12.75px;
    line-height: 1;
}

s,
del {
    text-decoration: line-through;
}

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

strong,
b {
    font-weight: bold;
}

em,
i {
    font-style: italic;
}

sub,
sup {
    font-size: 11.25px;
    line-height: 0;
    position: relative;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

figcaption {
    margin: .3em 0;
    font-size: 12.75px;
    font-style: italic;
}

ins,
u {
    text-decoration: underline;
}

mark {
    background-color: #ffc800;
    color: #0f0f0f;
    text-decoration: none;
}


.bands-container:after,
.bands-row:after {
    content: "";
    display: table;
    clear: both;
}

.bands-container:after,
.bands-row:after {
    content: "";
    display: table;
    clear: both;
}

.bands-container {
    padding-top: 1px;
    margin-top: -1px;
}

.bands-row {
    margin-bottom: 1.65em;
}

.width-100,
.band-100 {
    width: 100%;
}

.width-90,
.band-90 {
    width: 90%;
}

.width-80,
.band-80 {
    width: 80%;
}

.width-75,
.band-75 {
    width: 75%;
}

.width-70,
.band-70 {
    width: 70%;
}

.width-66,
.band-66 {
    width: 66.6%;
}

.width-65,
.band-65 {
    width: 65%;
}

.width-60,
.band-60 {
    width: 60%;
}

.width-50,
.band-50 {
    width: 50%;
}

.width-40,
.band-40 {
    width: 40%;
}

.width-35,
.band-35 {
    width: 35%;
}

.width-33,
.band-33 {
    width: 33.3%;
}

.width-30,
.band-30 {
    width: 30%;
}

.width-25,
.band-25 {
    width: 25%;
}

.width-20,
.band-20 {
    width: 20%;
}

.width-10,
.band-10 {
    width: 10%;
}

.bands-row .band-90,
.bands-row .band-80,
.bands-row .band-75,
.bands-row .band-70,
.bands-row .band-66,
.bands-row .band-65,
.bands-row .band-60,
.bands-row .band-50,
.bands-row .band-40,
.bands-row .band-35,
.bands-row .band-33,
.bands-row .band-30,
.bands-row .band-25,
.bands-row .band-20,
.bands-row .band-10 {
    float: left;
    margin-left: 3%;
}

.bands-row .band-90:first-child,
.bands-row .band-80:first-child,
.bands-row .band-75:first-child,
.bands-row .band-70:first-child,
.bands-row .band-66:first-child,
.bands-row .band-65:first-child,
.bands-row .band-60:first-child,
.bands-row .band-50:first-child,
.bands-row .band-40:first-child,
.bands-row .band-35:first-child,
.bands-row .band-33:first-child,
.bands-row .band-30:first-child,
.bands-row .band-25:first-child,
.bands-row .band-20:first-child,
.bands-row .band-10:first-child {
    margin-left: 0;
}

.bands-row .band-90 {
    width: 89.7%;
}

.bands-row .band-80 {
    width: 79.4%;
}

.bands-row .band-75 {
    width: 74.25%;
}

.bands-row .band-70 {
    width: 69.1%;
}

.bands-row .band-66 {
    width: 65.66666666666666%;
}

.bands-row .band-65 {
    width: 65.66666666666666%;
}

.bands-row .band-60 {
    width: 58.800000000000004%;
}

.bands-row .band-50 {
    width: 48.5%;
}

.bands-row .band-40 {
    width: 38.2%;
}

.bands-row .band-35 {
    width: 31.333333333333332%;
}

.bands-row .band-33 {
    width: 31.333333333333332%;
}

.bands-row .band-30 {
    width: 27.9%;
}

.bands-row .band-25 {
    width: 22.75%;
}

.bands-row .band-20 {
    width: 17.6%;
}

.bands-row .band-10 {
    width: 7.3%;
}


.bands-row .band-push-right {
    float: right;
}

.bands-row .band-role-right {
    margin-left: 3%;
    float: right;
}

.bands-row .band-role-left {
    margin-left: 0;
}

.centered,
.band-centered {
    float: none !important;
    margin: 0 auto !important;
}

.band-padding {
    padding: 1.65em;
}

.bands-padding .band-100,
.bands-padding .band-90,
.bands-padding .band-80,
.bands-padding .band-75,
.bands-padding .band-70,
.bands-padding .band-66,
.bands-padding .band-65,
.bands-padding .band-60,
.bands-padding .band-50,
.bands-padding .band-40,
.bands-padding .band-35,
.bands-padding .band-33,
.bands-padding .band-30,
.bands-padding .band-25,
.bands-padding .band-20,
.bands-padding .band-10 {
    padding: 1.65em;
}

.bands-split .band-90,
.bands-split .band-80,
.bands-split .band-75,
.bands-split .band-70,
.bands-split .band-66,
.bands-split .band-65,
.bands-split .band-60,
.bands-split .band-50,
.bands-split .band-40,
.bands-split .band-35,
.bands-split .band-33,
.bands-split .band-30,
.bands-split .band-25,
.bands-split .band-20,
.bands-split .band-10 {
    margin-left: 0;
}

.bands-split .band-90 {
    width: 90%;
}

.bands-split .band-80 {
    width: 80%;
}

.bands-split .band-75 {
    width: 75%;
}

.bands-split .band-70 {
    width: 70%;
}

.bands-split .band-66 {
    width: 66.6%;
}

.bands-split .band-65 {
    width: 65%;
}

.bands-split .band-60 {
    width: 60%;
}

.bands-split .band-50 {
    width: 50%;
}

.bands-split .band-40 {
    width: 40%;
}

.bands-split .band-35 {
    width: 35%;
}

.bands-split .band-33 {
    width: 33.3%;
}

.bands-split .band-30 {
    width: 30%;
}

.bands-split .band-25 {
    width: 25%;
}

.bands-split .band-20 {
    width: 20%;
}

.bands-split .band-10 {
    width: 10%;
}

.blocks-2,
.blocks-3,
.blocks-4,
.blocks-5,
.blocks-6 {
    padding-left: 0;
    list-style: none;
    margin-left: -3%;
}

.blocks-2:after,
.blocks-3:after,
.blocks-4:after,
.blocks-5:after,
.blocks-6:after {
    content: "";
    display: table;
    clear: both;
}

.blocks-2:after,
.blocks-3:after,
.blocks-4:after,
.blocks-5:after,
.blocks-6:after {
    content: "";
    display: table;
    clear: both;
}

.blocks-2 > li,
.blocks-3 > li,
.blocks-4 > li,
.blocks-5 > li,
.blocks-6 > li {
    height: auto;
    float: left;
    margin-bottom: 1.65em;
    margin-left: 3%;
}

.blocks-2 > li ul,
.blocks-3 > li ul,
.blocks-4 > li ul,
.blocks-5 > li ul,
.blocks-6 > li ul {
    list-style-type: disc;
}

.blocks-2 > li ul ul,
.blocks-3 > li ul ul,
.blocks-4 > li ul ul,
.blocks-5 > li ul ul,
.blocks-6 > li ul ul {
    list-style-type: circle;
}

.blocks-2 > li li,
.blocks-3 > li li,
.blocks-4 > li li,
.blocks-5 > li li,
.blocks-6 > li li {
    float: none;
    margin: 0;
}

.blocks-2 > li {
    width: 47%;
}

.blocks-3 > li {
    width: 30.333333333333332%;
}

.blocks-4 > li {
    width: 22%;
}

.blocks-5 > li {
    width: 17%;
}

.blocks-6 > li {
    width: 13.666666666666666%;
}

.block-first {
    clear: both;
}


.navbar {
    font-size: 105%;
    margin-bottom: 1.65em;
}

.navbar:after {
    content: "";
    display: table;
    clear: both;
}

.navbar:after {
    content: "";
    display: table;
    clear: both;
}

.navbar.navbar-left {
    float: left;
}

.navbar.navbar-right {
    float: right;
}

.navbar ul {
    list-style: none;
    margin: 0;
}

.navbar ul:after {
    content: "";
    display: table;
    clear: both;
}

.navbar ul:after {
    content: "";
    display: table;
    clear: both;
}

.navbar li {
    float: left;
    margin-right: 1.65em;
}

.navbar.navbar-right li {
    margin-right: 0;
    margin-left: 1.65em;
}

.navbar a,
.navbar span {
    display: block;
    text-decoration: none;
}

.navbar a:hover {
    color: #de2c3b;
    text-decoration: underline;
}

.navbar li.active a,
.navbar span {
    text-decoration: none;
    cursor: text;
    color: rgba(0, 0, 0, 0.4);
}

.navigation-toggle {
    display: none;
    text-transform: uppercase;
    position: relative;
    color: #0f0f0f;
    background-color: #ffffff;
}

.navigation-toggle:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    margin-top: -12px;
    left: 10px;
    content: "\2630";
    font-size: 24px;
    line-height: 1;
}

.navigation-toggle.navigation-toggle-black {
    background-color: #0f0f0f;
    color: #ffffff;
}

.navigation-toggle.navigation-toggle-show {
    margin-bottom: 1.65em;
}

.navigation-toggle span {
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: block;
    padding: 10px 20px 10px 40px;
}

.navigation-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
}

.navbar-pills a,
.navbar-pills span {
    padding: 0.825em 1.65em;
}

.navbar-pills a:hover {
    color: #0f0f0f;
    background: #eee;
}

.navbar-pills li.active a,
.navbar-pills span {
    text-decoration: none;
    cursor: text;
    color: rgba(0, 0, 0, 0.4);
    background: #eee;
}

.navbar-pills li {
    margin-right: 1px;
}

.navbar-pills.navbar-right li {
    margin-left: 1px;
}


.fullwidth ul {
    width: 100%;
}

.fullwidth li {
    float: none !important;
    margin: 0;
    display: table-cell;
    width: 1%;
    text-align: center;
}

.fullwidth li a,
.fullwidth li span {
    display: block;
}

.nav {
    margin-bottom: 1.65em;
}

.nav ul {
    list-style: none;
    margin: 0;
}

.nav ul li ul {
    margin-left: 2em;
    font-size: .95em;
}

.nav a,
.nav span {
    display: block;
    padding: .5em 0;
}

.nav a {
    color: #0f0f0f;
    text-decoration: none;
}

.nav a:hover {
    color: #de2c3b;
    text-decoration: underline;
}

.nav li.active a,
.nav span {
    text-decoration: none;
    cursor: text;
    color: rgba(0, 0, 0, 0.4);
}

.nav i.fa {
    width: 1.65em;
}

.nav-stacked li {
    margin-bottom: 1px;
}

.nav-stacked a,
.nav-stacked span {
    padding: .6em .7em;
}

.nav-stacked a {
    background: #f6f6f6;
}

.nav-stacked a:hover {
    color: #000;
    background: #eee;
}

.nav-stacked li.active a,
.nav-stacked span {
    background: #ffffff;
    text-decoration: none;
    cursor: text;
    color: rgba(0, 0, 0, 0.3);
}

.nav-stats li {
    position: relative;
}

.nav-stats a,
.nav-stats span {
    padding-right: 50px;
}

.nav-stats sup,
.nav-stats .badge {
    position: absolute;
    top: 50%;
    right: 0;
}

.nav-stats sup {
    color: rgba(0, 0, 0, 0.4);
}

.nav-stats .badge {
    margin-top: -8px;
}

.nav-tabs {
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 1.65em;
}

.nav-tabs:after {
    content: "";
    display: table;
    clear: both;
}

.nav-tabs:after {
    content: "";
    display: table;
    clear: both;
}

.nav-tabs ul {
    list-style: none;
    margin: 0;
}

.nav-tabs li {
    float: left;
    margin-right: 2px;
}

.nav-tabs a,
.nav-tabs span {
    display: block;
    line-height: 1;
    padding: 0.825em 1.65em;
    border: 1px solid transparent;
}

.nav-tabs a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.nav-tabs a:focus,
.nav-tabs a:hover {
    color: #0f0f0f;
    text-decoration: underline;
    background-color: #eee;
}

.nav-tabs li.active a,
.nav-tabs span {
    color: #0f0f0f;
    background: #fff;
    position: relative;
    border: 1px solid #ddd;
    border-bottom: 1px solid #fff;
    bottom: -1px;
    cursor: default;
    text-decoration: none;
}

.breadcrumbs {
    margin-bottom: 1.65em;
}

.breadcrumbs:after {
    content: "";
    display: table;
    clear: both;
}

.breadcrumbs:after {
    content: "";
    display: table;
    clear: both;
}

.breadcrumbs ul {
    font-size: .9em;
    color: rgba(0, 0, 0, 0.4);
    list-style: none;
    margin: 0;
}

.breadcrumbs ul:after {
    content: "";
    display: table;
    clear: both;
}

.breadcrumbs ul:after {
    content: "";
    display: table;
    clear: both;
}

.breadcrumbs li {
    float: left;
    margin-right: 5px;
}

.breadcrumbs li + li:before {
    content: " > ";
    color: #aaa;
    font-size: 12px;
    margin: 0 7px 0 5px;
    position: relative;
    top: -1px;
}

.breadcrumbs.breadcrumbs-path li + li:before {
    content: " / ";
    top: 0;
}

.breadcrumbs a {
    color: #0f0f0f;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #0f0f0f;
    text-decoration: underline;
}

.breadcrumbs li.active a,
.breadcrumbs span,
.breadcrumbs li.active a:hover {
    text-decoration: none;
    cursor: text;
    color: rgba(0, 0, 0, 0.4);
}



.group:after {
    content: "";
    display: table;
    clear: both;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

.hide {
    display: none;
}

.highlight {
    background-color: #f7f3e2;
}

.big {
    font-size: 18px;
}

.small {
    font-size: 12.75px;
}

.smaller {
    font-size: 11.25px;
}

.nowrap,
.nowrap td {
    white-space: nowrap;
}

.req,
.required {
    font-weight: normal;
    color: #de2c3b;
}

.error {
    color: #de2c3b;
}

.success {
    color: #2c9f42;
}

.text-centered {
    text-align: center;
}

.text-right {
    text-align: right;
}

.last {
    margin-right: 0 !important;
}

.pause {
    margin-bottom: 0.825em !important;
}

.end {
    margin-bottom: 0 !important;
}

.normal {
    font-weight: normal;
}

.light {
    font-weight: 300;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.left {
    float: left;
}

.right {
    float: right;
}

.upper {
    text-transform: uppercase;
}

.list-flat {
    margin-left: 0;
    list-style: none;
}

.color-black {
    color: #0f0f0f;
}

.color-white {
    color: #ffffff;
}

.color-gray-10 {
    color: rgba(0, 0, 0, 0.1);
}

.color-gray-20 {
    color: rgba(0, 0, 0, 0.2);
}

.color-gray-30 {
    color: rgba(0, 0, 0, 0.3);
}

.color-gray-40 {
    color: rgba(0, 0, 0, 0.4);
}

.color-gray-50 {
    color: rgba(0, 0, 0, 0.5);
}

.color-gray-60 {
    color: rgba(0, 0, 0, 0.6);
}

.color-gray-70 {
    color: rgba(0, 0, 0, 0.7);
}

.color-gray-80 {
    color: rgba(0, 0, 0, 0.8);
}

.color-gray-90 {
    color: rgba(0, 0, 0, 0.9);
}

.color-white-10 {
    color: rgba(255, 255, 255, 0.1);
}

.color-white-20 {
    color: rgba(255, 255, 255, 0.2);
}

.color-white-30 {
    color: rgba(255, 255, 255, 0.3);
}

.color-white-40 {
    color: rgba(255, 255, 255, 0.4);
}

.color-white-50 {
    color: rgba(255, 255, 255, 0.5);
}

.color-white-60 {
    color: rgba(255, 255, 255, 0.6);
}

.color-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

.color-white-80 {
    color: rgba(255, 255, 255, 0.8);
}

.color-white-90 {
    color: rgba(255, 255, 255, 0.9);
}

.video-wrapper {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    margin-bottom: 1.65em;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 767px) {

    .left,
    .right {
        float: none;
    }

    .hide-on-mobile {
        display: none;
    }
}

.str {
    color: #dd1144;
}

.kwd {
    color: #333333;
}

.com {
    color: #999988;
}

.typ {
    color: #445588;
}

.lit {
    color: #445588;
}

.pun {
    color: #888;
}

.opn {
    color: #333333;
}

.clo {
    color: #333333;
}

.tag {
    color: #367ac3;
}

.atn {
    color: #51a7c9;
}

.atv {
    color: #709c1a;
}

.dec {
    color: #666;
}

.var {
    color: teal;
}

.fun {
    color: #990000;
}

.linenums ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

.linenums ol li:after {
    content: counter(list);
    position: absolute;
    left: -3.3em;
    border-right: 1px solid #e5e5e5;
    padding-right: 9px;
    width: 2.45em;
    text-align: right;
    color: rgba(0, 0, 0, 0.3);
    font-size: 12px;
}

@media only screen and (max-width: 767px) {
    .mobile-width-100 {
        width: 100%;
    }

    .bands-row .band-90,
    .bands-row .band-80,
    .bands-row .band-75,
    .bands-row .band-70,
    .bands-row .band-66,
    .bands-row .band-65,
    .bands-row .band-60,
    .bands-row .band-50,
    .bands-row .band-40,
    .bands-row .band-35,
    .bands-row .band-33,
    .bands-row .band-30,
    .bands-row .band-25,
    .bands-row .band-20,
    .bands-row .band-10 {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-bottom: 1.65em;
    }

    .band-push-90,
    .band-push-80,
    .band-push-75,
    .band-push-70,
    .band-push-66,
    .band-push-65,
    .band-push-60,
    .band-push-50,
    .band-push-40,
    .band-push-35,
    .band-push-33,
    .band-push-30,
    .band-push-25,
    .band-push-20,
    .band-push-10 {
        left: 0;
    }

    .bands-row .band-push-right {
        float: none;
    }

    .bands-mobile-50 .band-90,
    .bands-mobile-50 .band-80,
    .bands-mobile-50 .band-75,
    .bands-mobile-50 .band-70,
    .bands-mobile-50 .band-66,
    .bands-mobile-50 .band-65,
    .bands-mobile-50 .band-60,
    .bands-mobile-50 .band-40,
    .bands-mobile-50 .band-30,
    .bands-mobile-50 .band-35,
    .bands-mobile-50 .band-33,
    .bands-mobile-50 .band-25,
    .bands-mobile-50 .band-20,
    .bands-mobile-50 .band-10 {
        float: left;
        margin-left: 3%;
        width: 48.5%;
    }

    .bands-mobile-50 .band-90:first-child,
    .bands-mobile-50 .band-80:first-child,
    .bands-mobile-50 .band-75:first-child,
    .bands-mobile-50 .band-70:first-child,
    .bands-mobile-50 .band-66:first-child,
    .bands-mobile-50 .band-65:first-child,
    .bands-mobile-50 .band-60:first-child,
    .bands-mobile-50 .band-40:first-child,
    .bands-mobile-50 .band-35:first-child,
    .bands-mobile-50 .band-30:first-child,
    .bands-mobile-50 .band-33:first-child,
    .bands-mobile-50 .band-25:first-child,
    .bands-mobile-50 .band-20:first-child,
    .bands-mobile-50 .band-10:first-child {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {

    .blocks-2,
    .blocks-3,
    .blocks-4,
    .blocks-5,
    .blocks-6 {
        margin-left: 0;
        margin-bottom: 1.65em;
    }

    .blocks-2 > li,
    .blocks-3 > li,
    .blocks-4 > li,
    .blocks-5 > li,
    .blocks-6 > li {
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .blocks-mobile-50 > li,
    .blocks-mobile-33 > li {
        float: left;
        margin-left: 3%;
    }

    .blocks-mobile-33,
    .blocks-mobile-50 {
        margin-left: -3%;
    }

    .blocks-mobile-50 > li {
        width: 47%;
    }

    .blocks-mobile-33 > li {
        width: 30.333333333333332%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    h1 {
        font-size: 2.25em;
        line-height: 1.125;
    }

    h2 {
        font-size: 1.5em;
        line-height: 1.25;
    }

    h3 {
        font-size: 1.3125em;
        line-height: 1.25;
    }

    h4 {
        font-size: 1.125em;
        line-height: 1.2c2c2c22;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.75em;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 2.25em;
        line-height: 1.25;
    }

    h2 {
        font-size: 1.5em;
        line-height: 1.15384615;
    }

    h3 {
        font-size: 1.3125em;
        line-height: 1.13636364;
    }

    h4 {
        font-size: 1.125em;
        line-height: 1.11111111;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.75em;
    }

    .lead {
        font-size: 1.2em;
    }

    ul,
    ol,
    ul ul,
    ol ol,
    ul ol,
    ol ul {
        margin-left: 1.65em;
    }

    blockquote {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {

    .navbar.navbar-left,
    .navbar.navbar-right,
    .navbar li,
    .navbar.navbar-left li,
    .navbar.navbar-right li {
        float: none;
        text-align: left;
        width: auto;
    }

    .navbar li,
    .navbar.navbar-right li {
        margin-left: 0;
        margin-right: 0;
    }

    .fullwidth ul,
    .fullwidth li {
        width: auto;
    }

    .fullwidth li {
        display: block;
    }
}


@media print {
    * {
        text-shadow: none !important;
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 12pt;
    }

    .h1,
    h1 {
        font-size: 36pt;
    }

    .h2,
    h2 {
        font-size: 24pt;
    }

    .h3,
    h3 {
        font-size: 18pt;
    }

    .h4,
    h4 {
        font-size: 14pt;
    }

    .h5,
    h5 {
        font-size: 12pt;
    }

    .h6,
    h6 {
        font-size: 12pt;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " ("attr(href) ")";
    }

    abbr[title]:after {
        content: " ("attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        page-break-inside: avoid;
    }

    blockquote {
        border: none;
        font-style: italic;
    }

    img {
        max-width: 100% !important;
    }

    select {
        background: #fff !important;
    }
}







a,
p,
li {
    font-size: 1em;
    line-height: 2em;
}

a:hover {
    text-decoration: none !important;
    color: #b2b2b2 !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.container {
    margin: auto;
    max-width: 1200px;
    padding: 0 20px;
}

@media only screen and (max-width: 767px) {
    .intro img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        text-align: center;
    }
}

.typed-cursor {
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main-nav {
    background: #f4f4f4;
    padding-top: 23px;
    margin-bottom: 25px;
}

.main-nav nav ul li a {
    color: #a7a7a7;
}

.main-nav nav ul li.active a {
    color: #4d4d4d;
}

.section.second {
    margin-bottom: 70px;
}

.section.third {
    margin-bottom: 20px;
}

.section .container {
    position: relative;
}

.section .plug:after {
    position: absolute;
    content: url(../img/sepa.png);
    left: 0px;
    top: 35px;
}

.section .container h1 {
    text-transform: uppercase;
    margin-bottom: 30px;
    position: relative;
    font-size: 4.2em;
}

.intro {
    padding: 0px 0px 0px 0px;
    overflow-x: hidden;
    background-color: #fff;
    height: 100vh;

    
    width: 100%;
    float: none;
/*
    width: 50%;
    float: left;
*/

  display: flex;
  align-items: center;
  justify-content: center;
    
/*
  position: -webkit-sticky;
  position: sticky;
*/
  top: 48px;
}

.intro-pc {
/*
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    background-size: cover;
    height: 100vh;
    width: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;    
*/
    display: none;
}

/*
.content {
  display: flex;
  padding: 20px 0;
}

.main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2000px;
  margin-right: 10px;
  background: #ccc;
  background: linear-gradient(to bottom, #eeeeee 0%,#B7EAE0 100%);
}
.side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;

width: 140px;
  height: 140px;
  color: #fff;
  background: #30b298;
}
*/


.intro-pc .intro-tsht{
    z-index: 1;
}
.intro-pc .intro-tsht img{
    text-align: center;
}

.intro-second{
    background-color: rgba(124, 252, 0, 0.9);
/*    height: 100vh;*/
    overflow: hidden;
}
.intro-second .intro-second-right{
/*    float: right;*/
    background-color: #fff;
    padding: 0px 0px 0px 0px;
    overflow-x: hidden;
    background-size: cover;
/*    height: 100vh;*/
/*    width: 50%;*/
/*    max-width: 980px;*/
    
    /*上下中央*/
    display: flex;
    justify-content: center;
    align-items: center;       
}
.intro-second .intro-second-right .exp1{
    margin: 14px;
    padding: 30px;
    display: table-cell;
}
.intro-second .intro-second-right .exp1 p{
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}
.intro-second-right-inner .img-box div{ 
/*    float: left;*/
    text-align: center;
}
.intro-second-right-inner .img-box img{
    height: 350px;
}
.intro-second-right-inner .img-box .caption{
    font-size: 0.7em;
}
/*
.intro-second-right-inner .img-box .cardsample{ 
    width: 200px;
}
.intro-second-right-inner .img-box .tshsample{ 
    width: 300px;
}
*/


.intro .wrap img{
    max-width: 450px;
}

.intro .wrap {
    text-align: center;
    margin: 30px 0px;
}

.intro h1:before {
    position: absolute;
    left: -148px;
    top: -80px;
    font-size: 243px;
    line-height: 222px;
    z-index: -1;
    color: #f2f2f2;    
}

.intro h1 span {
    font-size: 47px;
}
.intro .supported{
    position: absolute;
    bottom: 0px;
    right: 4px;
    color: #989898;
}
.intro .supported2{
    color: #989898;
}
.intro .credit{
    text-align: right;
}
.intro .supported2 {
    display: none;
}
.message{
    margin-top: 40px;
}
.message .credit{
    text-align: right;
}


.event .event-list {
    margin-left: 0px;
}

.event .event-list li {
    list-style: none;
    font-size: 0.9375em;
    color: #8c8c8c;
}

.event .event-list li a {
    padding-bottom: 5px;
    font-size: 1.1875em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #b3b3b3;
}

.event .event-list li a:hover {
    border-bottom: 1px solid #333333;
}

.guest .guest-list {
    margin-left: 0px;
}
.guest .guest-list li{
    font-size: 1.5em;
    font-weight: bold;
}
.guest .guest-list li:first-child {
    font-size: 0.9375em;
    color: #8c8c8c;
    font-weight: normal;
    margin-bottom: 0px;
}
.guest .guest-list li.guestimg{

}
.guest .guest-list li img{
    width: 400px;
    max-width: 100%;
}
.guest .guest-list li.prof p{
    font-size: 0.6em;
    font-weight: normal!important;
}


.gear .gear-area{
    display: block;
    overflow: hidden;
    margin: 0 auto;
    
}
.gear .gear-list {
    margin-left: 0px;
    width: 48%;
    float: left;
}
.gear .gear-list li{
    font-size: 1.5em;
    font-weight: bold;
}
.gear .gear-list li:first-child {
    font-size: 0.9375em;
    color: #8c8c8c;
    font-weight: normal;
    margin-bottom: 0px;
}

.gear .gear-exp{
    font-weight: normal!important;
    font-size: 1em!important;

}
.gear .product-link{
    font-weight: normal!important;
    font-size: 0.8em!important;
    text-align: center;
    margin-top: 5px;
}

.foot-reserve {
    background: url(../img/abe_logo_w.png)rgb(0, 0, 0)fixed no-repeat;
    background-size: cover;
    padding: 20px 0px;
    margin-top: 120px;
}

.foot-reserve h2 {
    margin: 100px 0px;
    padding: 40px 20px;
    border: 5px solid #fff;
    color: #fff;
}

.foot-reserve a {
    display: block;
    text-decoration: none;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}

@media not all and (hover: none) {
    .foot-reserve a:hover {
        opacity: 0.5;
    }
}

footer {
    padding: 50px 0px 0px 0px;
    font-size: 0.7em;
}




.twitter , .facebook{
    font-size: 1.2em!important;
}


.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

.google-map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.event{
    margin-top: 5px;
}
.event .event-list li.event-date {
    font-size: 1.3em;
    color: #fff;
}

.event .event-list li.event-limit {
/*    font-size: 1.4em;*/
    color: #fff;
}

.event .event-list li.event-cost {
/*    font-size: 1.4em;*/
    color: #fff;
}

.event .event-list li.event-venue a {
/*    font-size: 1.4em;*/
    color: #fff;
}

.event .event-list li div.event-address {
    margin-bottom: 10px;
    color: #fff;
}

.reserve-lnk {
    padding: 18px 30px;
    border: 1px solid #fff;
    text-decoration: none;
    text-align: center;
    margin: 20px auto 0px;
    background-color: rgba(255, 255, 255, 0.4);
    display: inline-block;

    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}


@media not all and (hover: none) {
    .reserve-lnk:hover {
        opacity: 0.5;
    }
}

@media only screen and (max-width: 414px) {
    .intro h2 span{
        line-height: 2em;
        height: 29px!important;
        display: inline-block;
        font-size: 1.2em;
    }
    .section .container h1 {
        font-size: 2.1em;
    }

    .intro h1:before {
        position: absolute;
        left: -17px;
        top: -15px;
        font-size: 107px;
        line-height: 98px;
        z-index: -1;
        color: #f2f2f2;        
    }    
    
/*
    .intro {
        padding: 0px;        
        background: url("../img/onoseigen_sp.png") no-repeat;
        background-size: cover;        
    }    
*/
    .intro .supported {
        display: none;
    }
    .intro .supported2 {
        display: inline-block;
    }    
    .intro .intro-txt{
        font-size: 0.95em;
        margin-bottom: 3px;
    }
    .message .intro-txt{
        font-size: 0.9em;
        margin-bottom: 3px;
    }    
    .foot-reserve {
        background: url(../img/onoseigen_sp.png)rgba(209, 209, 209, 0.84) no-repeat;
        background-size: cover;
        padding: 20px 0px;
        margin-top: 40px;
    }    
    .gear .gear-list {
        width: 100%;
        float: none;
    }    
    .guest .guest-list li img{
        width: 100%;
    }
    
}


.luxbar-menu a.luxbar-brand{
    font-size: 1em;
    color: #fff!important;    
}

.luxbar-item a{
    line-height: 1.2em!important;
    color: #fff!important;
}
.luxbar-menu-light, .luxbar-menu-light .dropdown ul{
    background-color: #000!important;
}
.read-txt{
    margin-top: 70px;
    margin-bottom: 50px;
    font-size: 1.8em;
}
::-webkit-scrollbar {
      display: none;
      -webkit-appearance: none;
}

.intro-area{
}
.intro{
    overflow: hidden;
/*    min-height: 970px;*/
}
.intro-pc{
    min-height: 970px;    
}
.content-list {
    margin-left: 0px;
}
.content-list li{
    list-style: none;
}
.contents h5{
    font-weight: bold;
    font-size: 1.3em;
}
.howreserve{
    padding: 10px;
    border: solid 1px #fff;
    margin-bottom: 10px;
}
.talksession{
    padding: 10px;
    border: solid #fff 1px;
    margin-bottom: 10px;
}
.talksession ul{
    margin-left: 0px;
}
.talksession ul li{
    list-style: none;
    margin-bottom: 5px;
}
.topeatix{
    margin: 10px;
    padding: 10px;
}
.topeatix a{
    padding: 10px;
    border: 1px solid #fff;
    background-color: #fff;  
    color: #000;
}
.topeatix a:hover{
    background-color: #000;
    color: #fff!important;
}
.forpc{
    display: inline;
}
.forsp{
    display: none;
}

.contents-bottom-area .shoei{
    margin-right: 10px;
}
#MEMORABILIA{
    margin-top: 20px;
}
.art-image div{
    overflow: hidden;
}
.art-image img{
    width: 48%;
}




.grade{
    width: 100wh;
/*    height: 90vh;*/
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
.mainlogo img{
    width: 400px;
}


.flow {
    text-align: center;
    padding: 10px 0;
    width: 900px;
    margin: 40px auto;
/*    background: #e89800;*/
    border: solid 5px #19a7ff;
    border-radius: 10px;
}

.flow h2 {
    margin: 0 auto;
    font-weight: bold;
    color: #fff;
}
.flow ul{
    margin: 0;
}
.flow ul li img {
    width: 250px;
}

.flow ul li {
    list-style: none;
    position: relative;
    margin: 0 40px 20px 0;
    display: inline-block;
}

.flow ul li:last-of-type {
    margin: 0 0 20px 0;
}

.flow ul li::after {
    position: absolute;
    bottom: -5px;
    content: url("../img/arrow.png");
    color: #000;
    margin-left: 5px;
}

.flow ul li:last-of-type::after {
    content: none;
}


.designline{
    margin: 100px auto;
}



.cardcost{
    margin: 100px auto;
    
}

.cardcost h2{
    text-align: center;
}
.cardcost .container{
    width: 600px;
    padding: 25px 20px;
    border: 1px solid #333;
    border-radius: 10px;
}

.cardcost .price{
    font-size: 3em;
    font-weight: bold;
}
.cardcost .price span{
    font-size: 0.5em;
    font-weight: normal;
}
.cardcost .cardsample{
    margin: 45px auto;
    text-align: center;
}
.cardcost .cardsample img{
    width:150px;
}
.cardcost h2.section-title span{
    display: block;
}

.bg-logo{
    overflow-x: hidden;
    background: url(../img/emb_bg.png)no-repeat;
    background-size: contain;
}

.naire{
    text-align: center;
}
.naire div{
/*    margin: 5px auto;*/
}
.note{
    font-size: 0.8em;
}
.nairenote{
    width: 90%;
}
.nairenote .note{
    text-align: left;
}
.slick-prev:before,
.slick-next:before {
    color: #000 !important;
}
.slick-slide {
    height: auto !important;
}
.slick-slide {
    margin: 5px;
}

.slick-slide img {
    margin: 0 auto;
}


.slick-dotted.slick-slider {
    padding-bottom: 10px;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #000 !important;
}

.slick-prev:before,
.slick-next:before {
    font-size: 30px !important;
}

.slick-prev,
.slick-next {
    width: 30px !important;
    height: 30px !important;
}


.sizeTbl {
    width: 85%;
    text-align: left;
    margin: 0 auto 50px;
}

.sizeTbl table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-top: 5px;
}

.sizeTbl table th {
    color: #fff;
    width: 16%;
/*    background-color: #d5fcfc;*/
}

.sizeTbl table th,
.sizeTbl table td {
    text-align: center;
    border: solid 1px #333;
    padding: 8px 0;
    font-size: 16px;
}

.sizeTbl table td input {
    width: auto !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}



.formBtns input .sendTbl table th,
.sendTbl table td {
    text-align: center;
    border: solid 1px #6db5a9;
    padding: 8px 0;
    font-size: 16px;
    line-height: 21px;
}

.sendTbl table td input {
    width: auto !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.sendTbl p {
    line-height: 32px
}


.loginBlock{
    background-color: #000;
    color: #fff;
}

.loginArea {
    margin: 0 auto 40px;
    padding: 40px 0;
    text-align: center;
}

.loginArea > p {}

.inpuExp p {
    text-align: left;
    margin: 0;
    padding: 0 20px;
    font-size: 20px;
}

.jkt {
    margin-bottom: 30px;
    width: 300px;
}

.inputArea {
    display: block;
    margin: 0 auto;
    text-align: center;
}

#msg2 {
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
}

.pwarea {
    margin: 20px auto;
}

.formBtns input,
.loginBtn {
    color: #000;
    font-weight: bold;
    padding: 13px 21px;
    background: lawngreen;
    border-radius: 4px;
    border: solid 2px #fff;
    transition: 0.3s;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    background-image: none;
    cursor: pointer;
}

.formBtns input {
    font-size: 16px;
}

.formBtns input:hover,
.loginBtn:hover {
    background: #fff;
    color: #000;
    border-color: lawngreen;
}

.loginBtn {
    display: inline-block;
    overflow: hidden;
    margin: 20px auto 10px;
    font-size: 18px;
}

input[type="text"],
textarea {
    outline: none;
    border-color: lawngreen;
    border-radius: 5px;
    border-width: 1px;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: lawngreen;
    width: 300px;
    padding: 5px;
    -webkit-transition: width .3s;
    transition: width .3s;
    box-shadow: none;
    -webkit-appearance: none;
    background-image: none;
}

input[type="text"]:focus,
textarea:focus {
    box-shadow: 0 0 7px #01b4ee;
    border: 1px solid #b2d6d4;
    /*width: 280px;*/
}

/* Chrome */
::-webkit-input-placeholder {
    color: rgba(0, 160, 233, 0.56);
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

:-moz-placeholder {
    color: rgba(0, 160, 233, 0.56);
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;

}

/* Firefox */
::-moz-placeholder {
    color: rgba(0, 160, 233, 0.56);
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;

}

/* IE */
:-ms-input-placeholder {
    color: rgba(0, 160, 233, 0.56);
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

.inptMove {
    display: none;
}


/*kakomi*/
.orderPeriod {
    padding: 20px;
    margin: 40px 0 0;
    font-size: 20px;
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo UI", "メイリオ", "Meiryo", "游ゴシック", YuGothic, "メイリオ", "Meiryo", 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    color: #000;
    text-align: left !important;
    line-height: 1em;
    display: inline-block;
    background-color: lawngreen;
}

a.orderPeriod {
    color: #000;
}

a.orderPeriod:hover {
    text-decoration: underline;
}


.toiawase{
    padding: 15px;
    border:1px solid #333;
    border-radius: 10px;
    font-size: 0.8em;
}
.toiawase h4{
    margin: 10px auto 20px;
}
.btmtxt p{
    margin-bottom: 5px;
}
.subttl{
    margin-bottom: 0px;
}

.designshu{
    margin: 15px auto;
}
.colortable{
    margin: 0 auto;
    width: 85%;
}
.bodycolorTbl{
    width: 100%;
    text-align: center;
    border: 1px solid #e4e4e4;
}

.slider{margin-bottom: 16px;}

.bodycolorTbl th , .bodycolorTbl td{
    width: 65px;
}
span.mennote{
    font-size: 0.8em;
}
.nairetextlist{
    width: 90%;
}

.naire-area .band-50{
    padding: 0px 20px;
}
.multiple-items6{
    margin-top: 0px!important;
}

@media screen and (max-width: 1024px) {
    .sizeTbl {
        width: 100%;
    }

    .flow {
        width: 100%;
    }
    .intro,.intro-pc{
        height: auto;
    }

}



/*
@media only screen and (max-width: 768px) {
    .intro-second .intro-second-right{
        width: 42%;
    }
    .intro .wrap img{
        width: 100%;
    }
    .intro{
        width: 57%;
        min-height: 970px;
    }
    .intro-pc{
        width: 43%;
        background: url(../img/abe_H1_n.png)no-repeat center;  
        min-height: 970px;   
        background-size: cover;
    }

    .read-txt{
        font-size: 1.4em;
    }
    h2.plug{
        margin-bottom: 1.7em;
    }

    .slick-prev {
        left: -5px !important;
    }

    .slick-next {
        right: -5px !important;
    }

    .slick-prev,
    .slick-next {
        width: 28px !important;
        height: 28px !important;
        z-index: 9999;
    }

    .price {
        margin-bottom: 30px;
    }

    ul.card li span {
        width: 100%;
        font-size: 15px;
    }

    .flow {
        box-sizing: border-box;
        margin-top: 10px;
        padding: 10px 5px;
    }

    .infotxt {
        width: 96%;
        box-sizing: border-box;
        padding: 10px;
    }

    .flow img {
        width: 80%;
    }


    .loginArea p {
        text-align: left;
    }

    .loginBtn {
        padding: 20px;
        margin-bottom: 10px;
    }

    .formBtns input {
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    .orderPeriod {
        line-height: 1.4em;
        display: block;
        width: auto;
        margin: 30px 20px 0;
        text-align: center !important;
    }

    .flow ul li {
        margin: 10px auto 0;
        display: block;
        text-align: center;
    }

    .flow ul li img {
        width: 270px;
        margin: 0 auto 40px;
    }

    .flow ul li::after {
        bottom: -20px;
        content: url(../img/arrow_b.png);
        left: 50%;
        margin-left: -65px;
    }

    .flow ul li:last-of-type img {
        margin: 0 auto;
    }

    .flow p {
        text-align: left;
    }

    .jkt {
        width: 90%;
    }
    .cardcost .container{
        width: 90%;
        margin: 10px auto;
    }
}
*/

/*@media only screen and (max-width: 414px) {*/
@media only screen and (max-width: 970px) {
    .luxbar-menu a.luxbar-brand{
        line-height: 22px;
    }
    .container{
        max-width: 100%;
    }
    .cardcost .container{
        width: 90%;
        margin: 10px auto;
    }
    
    .intro{
        width: 100%;
        overflow: hidden;
        min-height: 600px;
        background-size: cover;  
        
        float: none;
        display: block;
        position: initial;
        height: auto;
        min-height:auto;

    }
    .intro img {
        display: block;
         margin-left: 0px; 
         margin-right: auto; 
        width: 66%;
        text-align: left;
    }
    .featuretxt{
        font-size: 10px;
    }
    .intro-pc{
        width: 100%;
        max-width: 100%;
/*        display: block;*/
        display: none;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 100%;
    }
    .intro .read-txt{
        margin-top: 33px;
        margin-bottom: 37px;
    }    
    .forpc{
        display: none;
    }    
    .forsp{
        display: inline;
    }
    .luxbar-menu-light .luxbar-hamburger span, .luxbar-menu-light .luxbar-hamburger span::before, .luxbar-menu-light .luxbar-hamburger span::after{
        background-color: #fff;
    }
    h2.plug{
        margin-bottom: 2em;
    }    
    .section .plug:after {
        position: absolute;
        content: url(../img/sepa_sp.png);
        left: 0px;
        top: 35px;
    }    
    .section .twosent:after {
        top: 53px!important;
    }    
    .topAmazon{
        margin-top: 20px;
    }
    .read-txt{
        font-size: 1.2em;
        margin-bottom: 14px;
    }
    .contents-bottom-area .shoei{
        margin-right: 0px;
    }
    
    .intro .wrap{
        margin-bottom:0px;
    }
    .intro .wrap img{
        width: 100%;
        margin: 0 auto;
    }
    .intro-second .intro-second-right .exp1{
        margin: 0px auto;
        padding: 0px 20px;
    }
    .intro-area .container{
        margin-top: 0px;
    }
    .intro-second .intro-second-right{
        float: none;
        width: 100%;
        display: block;
    }
    .intro-second-right-inner .img-box div{
        float: none;
        width: 100%;
        margin-bottom: 28px;
    }
    .intro-second .intro-second-right{
        height: auto;
    }    
    .intro-second{
        height: auto;
        margin: 35px auto 20px;
    }
    .cardcost .price{
        font-size: 1.6em;    
    }
    .cardcost .price span{
        font-size: 0.4em;
    }    
    .designline{
        margin: 50px auto!important;
    }
    .cardcost{
/*        margin: 30px auto!important;*/
    }
    .section-title{
        text-align: center;
/*        display: block;*/
    }
    .you-exp{
        line-height: 29px;
        word-break: break-all;
    }
    
    
    
    
    .slick-prev {
        left: -5px !important;
    }

    .slick-next {
        right: -5px !important;
    }

    .slick-prev,
    .slick-next {
        width: 28px !important;
        height: 28px !important;
        z-index: 9999;
    }

    .price {
        margin-bottom: 30px;
    }

    ul.card li span {
        width: 100%;
        font-size: 15px;
    }

    .flow {
        box-sizing: border-box;
        margin-top: 10px;
        padding: 10px 5px;
    }

    .infotxt {
        width: 96%;
        box-sizing: border-box;
        padding: 10px;
    }

    .flow img {
        width: 80%;
    }


    .loginArea p {
        text-align: left;
    }

    .loginBtn {
        padding: 20px;
        margin-bottom: 10px;
    }

    .formBtns input {
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    .orderPeriod {
        line-height: 1.4em;
        display: block;
        width: auto;
        margin: 30px 20px 0;
        text-align: center !important;
    }

    .flow ul li {
        margin: 10px auto 0;
        display: block;
        text-align: center;
    }

    .flow ul li img {
        width: 270px;
        margin: 0 auto 40px;
    }

    .flow ul li::after {
        bottom: -20px;
        content: url(../img/arrow_b.png);
        left: 50%;
        margin-left: -65px;
    }

    .flow ul li:last-of-type img {
        margin: 0 auto;
    }

    .flow p {
        text-align: left;
    }    
    .bodycolorTbl th , .bodycolorTbl td{
        width: 65px;
        height: 70px;
        font-size: 0.7em;
        padding: 10px 0px;
    }
    .naire-area .band-50{
        width: 100%;
        float: none;
        padding: 0px;
    }
    
}
@media only screen and (max-width: 320px) {
    .section .plug:after {
        position: absolute;
        content: url(../img/sepa_sp320.png);
        left: 0px;
        top: 35px;
        
    }    
    input[type="text"],
    textarea {
        font-size: 30px;
        width: 250px;
        padding: 5px;
    }    
    .formBtns input{
        padding: 13px 7px;
    }
}






body .textcontainer {
  padding: 40px 0;
  text-align: center;
}
body .particletext {
/*
  text-align: center;
  font-size: 48px;
*/
  position: relative;
}
body .particletext.bubbles > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  -webkit-animation: bubbles 3s ease-in infinite;
          animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}
body .particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  -webkit-animation: hearts 3s ease-in infinite;
          animation: hearts 3s ease-in infinite;
}
body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}
body .particletext.hearts > .particle:before {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
body .particletext.hearts > .particle:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
body .particletext.lines > .particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  -webkit-animation: lines 3s linear infinite;
          animation: lines 3s linear infinite;
}
body .particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  -webkit-animation: confetti 3s ease-in infinite;
          animation: confetti 3s ease-in infinite;
}
body .particletext.confetti > .particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}
body .particletext.confetti > .particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}


body .particletext.confettitwo > .particle {
  opacity: 0;
  position: absolute;
  -webkit-animation: confettitwo 3s ease-in infinite;
          animation: confettitwo 3s ease-in infinite;
}
body .particletext.confettitwo > .particle.c1 {
  background-color: rgba(65, 255, 255, 0.7);
}
body .particletext.confettitwo > .particle.c2 {
  background-color: rgb(255, 86, 190, 0.7);
}



body .particletext.fire > .particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  -webkit-animation: fires 0.8s linear infinite;
          animation: fires 0.8s linear infinite;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
body .particletext.fire > .particle:before {
  position: absolute;
  content: '';
  top: 60%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}
body .particletext.sunbeams > .particle {
  position: absolute;
  background-color: rgba(253, 216, 53, 0.5);
  -webkit-animation: sunbeams 3s linear infinite;
          animation: sunbeams 3s linear infinite;
}

@-webkit-keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}
@-webkit-keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@-webkit-keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@-webkit-keyframes confettitwo {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes confettitwo {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }    
    
}
@-webkit-keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@-webkit-keyframes sunbeams {
  0% {
    -webkit-transform: translateY(40%) rotate(0deg);
            transform: translateY(40%) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-40%) rotate(180deg);
            transform: translateY(-40%) rotate(180deg);
  }
  100% {
    -webkit-transform: translateY(40%) rotate(360deg);
            transform: translateY(40%) rotate(360deg);
  }
  0%,14%,17%,43%,53%,71%,80%,94%,100% {
    opacity: 0;
  }
  6%,15%,24%,28%,48%,55%,78%,82%,99% {
    opacity: 1;
  }
}
@keyframes sunbeams {
  0% {
    -webkit-transform: translateY(40%) rotate(0deg);
            transform: translateY(40%) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-40%) rotate(180deg);
            transform: translateY(-40%) rotate(180deg);
  }
  100% {
    -webkit-transform: translateY(40%) rotate(360deg);
            transform: translateY(40%) rotate(360deg);
  }
  0%,14%,17%,43%,53%,71%,80%,94%,100% {
    opacity: 0;
  }
  6%,15%,24%,28%,48%,55%,78%,82%,99% {
    opacity: 1;
  }
}





#ui .rotate {
  position: relative;
    top:0px;
    right: 0px;
/*
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 1000px;
  background: #000;
*/
  transform: translate(-55%, -54%);
  filter: blur(40px) contrast(50);
}
#ui .rotate_ball {
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: screen;
 
}
#ui .rotate_ball:nth-child(1) {
  animation: rotate 15321ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball .inner{
    border-radius: 50%;   
}
#ui .rotate_ball:nth-child(1) .inner {
  width: 154px;
  height: 154px;
  border: 12px solid #60ffce;

  animation: translate 2407ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(2) {
  animation: rotate 14751ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(2) .inner {
  width: 197px;
  height: 197px;
  border: 12px solid #f7be71;
  animation: translate 12419ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(3) {
  animation: rotate 15157ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(3) .inner {
  width: 1123px;
  height: 1123px;
  border: 12px solid #e19f2e;
  animation: translate 11836ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(4) {
  animation: rotate 16759ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(4) .inner {
  width: 1111px;
  height: 1111px;
  border: 12px solid #b6f6cf;
  animation: translate 12404ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(5) {
  animation: rotate 16446ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(5) .inner {
  width: 170px;
  height: 170px;
  border: 12px solid #9325c5;
  animation: translate 13404ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(6) {
  animation: rotate 15695ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(6) .inner {
  width: 1106px;
  height: 1106px;
  border: 12px solid #cc9669;
  animation: translate 13971ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(7) {
  animation: rotate 16561ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(7) .inner {
  width: 1121px;
  height: 1121px;
  border: 12px solid #12bd6d;
  animation: translate 13394ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(8) {
  animation: rotate 16180ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(8) .inner {
  width: 112px;
  height: 112px;
  border: 12px solid #589e8f;
  animation: translate 13008ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(9) {
  animation: rotate 4134ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(9) .inner {
  width: 1128px;
  height: 1128px;
  border: 12px solid #16e2af;
  animation: translate 13982ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(10) {
  animation: rotate 5519ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(10) .inner {
  width: 173px;
  height: 173px;
  border: 12px solid #2fc955;
  animation: translate 12523ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(11) {
  animation: rotate 13860ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(11) .inner {
  width: 1104px;
  height: 1104px;
  border: 12px solid #ed75b4;
  animation: translate 13897ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(12) {
  animation: rotate 16643ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(12) .inner {
  width: 168px;
  height: 168px;
  border: 12px solid #fd0243;
  animation: translate 12005ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(13) {
  animation: rotate 13409ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(13) .inner {
  width: 171px;
  height: 71px;
  border: 12px solid #864a9a;
  animation: translate 13371ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(14) {
  animation: rotate 14279ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(14) .inner {
  width: 1120px;
  height: 120px;
  border: 12px solid #e42dec;
  animation: translate 12378ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(15) {
  animation: rotate 13586ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(15) .inner {
  width: 194px;
  height: 194px;
  border: 12px solid #7ec0e3;
  animation: translate 11172ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(16) {
  animation: rotate 13842ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(16) .inner {
  width: 1102px;
  height: 1102px;
  border: 12px solid #e724eb;
  animation: translate 11006ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(17) {
  animation: rotate 14311ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(17) .inner {
  width: 1130px;
  height: 1130px;
  border: 12px solid #2af4cc;
  animation: translate 11777ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(18) {
  animation: rotate 16579ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(18) .inner {
  width: 191px;
  height: 191px;
  border: 12px solid #ffe225;
  animation: translate 12789ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(19) {
  animation: rotate 13577ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(19) .inner {
  width: 1137px;
  height: 137px;
  border: 12px solid #4e7044;
  animation: translate 12912ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(20) {
  animation: rotate 13809ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(20) .inner {
  width: 1131px;
  height: 1131px;
  border: 12px solid #6da297;
  animation: translate 11109ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(21) {
  animation: rotate 16222ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(21) .inner {
  width: 1126px;
  height: 1126px;
  border: 12px solid #ff00f5;
  animation: translate 13536ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(22) {
  animation: rotate 13607ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(22) .inner {
  width: 187px;
  height: 187px;
  border: 12px solid #0cc216;
  animation: translate 12303ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(23) {
  animation: rotate 13873ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(23) .inner {
  width: 171px;
  height: 171px;
  border: 12px solid #c365bf;
  animation: translate 13029ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(24) {
  animation: rotate 15503ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(24) .inner {
  width: 178px;
  height: 178px;
  border: 12px solid #88c7ad;
  animation: translate 11501ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(25) {
  animation: rotate 14444ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(25) .inner {
  width: 710px;
  height: 170px;
  border: 12px solid #ff002d;
  animation: translate 11202ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(26) {
  animation: rotate 14748ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(26) .inner {
  width: 515px;
  height: 515px;
  border: 12px solid #2fc4f0;
  animation: translate 11431ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(27) {
  animation: rotate 16217ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(27) .inner {
  width: 1109px;
  height: 1109px;
  border: 12px solid #20b3ba;
  animation: translate 11075ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(28) {
  animation: rotate 14124ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(28) .inner {
  width: 412px;
  height: 412px;
  border: 12px solid #0dc723;
  animation: translate 13513ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(29) {
  animation: rotate 16358ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(29) .inner {
  width: 517px;
  height: 517px;
  border: 12px solid #649649;
  animation: translate 12771ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}
#ui .rotate_ball:nth-child(30) {
  animation: rotate 15910ms infinite alternate cubic-bezier(0.33, 1.7, 0.51, 0.82);
}
#ui .rotate_ball:nth-child(30) .inner {
  width: 514px;
  height: 514px;
  border: 12px solid #a14c95;
  animation: translate 11279ms infinite alternate cubic-bezier(0.545, 0.08, 0.52, 0.975);
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(720deg);
  }
}
@keyframes translate {
  0% {
    transform: rotateZ(0deg) translate(-200%, 0);
  }
  100% {
    transform: rotateZ(0deg) translate(200%, 0);
  }
}