@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 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: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * 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: button; }

/**
 * 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; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 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 {
  box-sizing: border-box;
  /* 1 */
  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; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 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 odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * 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 */ }

/* 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; }

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

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

/*!
 * @license
 * MyFonts Webfont Build ID 3132611, 2015-11-28T15:37:34-0500
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: CCYouBlockhead by Comicraft
 * URL: http://www.myfonts.com/fonts/comicraft/you-blockhead/regular/
 * Copyright: Copyright (c) Active Images, 2009. All rights reserved.
 * Licensed pageviews: 60,000,000
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3132611
 *
 * © 2015 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: 'ProximaNova-Bold';
  src: url("../fonts/2F995E_0_0.eot");
  src: url("../fonts/2F995E_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2F995E_0_0.woff2") format("woff2"), url("../fonts/2F995E_0_0.woff") format("woff"), url("../fonts/2F995E_0_0.ttf") format("truetype"), url("../fonts/2F995E_0_0.svg#wf") format("svg");
  font-weight: normal;
  font-style: normal; }

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

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

@font-face {
  font-family: 'clashregular';
  src: url("/fonts/clash-regular-webfont.woff2") format("woff2"), url("/fonts/clash-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

html {
  font-size: 62.5%; }

body {
  font-size: 1.4rem; }

/* =14px */
/*
COLORS VARIABLES
*/
/* NEW SCROLL COLORS */
/* GREY SCALE */
/* ACCENT COLORS */
/* OTHER COLORS/OLD */
/* $colorOrange: #ffbe31; */
/*
EASINGS
*/
/*
FONTS VARIABLES
*/
/*
FONTS VARIABLES
*/
/* Viewport sizes - Desktop first approach! */
/*
BREAKPOINTS (try to keep this in sync with the CONSTANTS file)
*/
/*
@custom-media --mobile (max-width: 599px);
@custom-media --tablet (min-width: 600px);
@custom-media --tablet-max (max-width: 1023px);
@custom-media --desktop (min-width: 1024px);
@custom-media --desktop-max (max-width: 1439px);
@custom-media --desktop-xl (min-width: 1440px);
*/
/* Typography */
h1, h2, h3 {
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0.9;
  color: #ffffff;
  margin: 0; }

h1 {
  font-size: 30px;
  line-height: 34px;
  font-weight: normal;
  text-shadow: 0 2px rgba(0, 0, 0, 0.1); }
  @media (min-width: 600px) {
    h1 {
      font-size: 48px;
      line-height: 60px;
      text-shadow: 0 6px rgba(0, 0, 0, 0.1); } }
  @media (min-width: 1024px), (min-width: 1440px) {
    h1 {
      font-size: 56px;
      line-height: 62px;
      text-shadow: 0 6px rgba(0, 0, 0, 0.1); } }

h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: normal;
  text-shadow: 0 2px rgba(0, 0, 0, 0.1); }
  @media (min-width: 600px) {
    h2 {
      font-size: 36px;
      line-height: 43px;
      text-shadow: 0 3px rgba(0, 0, 0, 0.1); } }
  @media (min-width: 1024px), (min-width: 1440px) {
    h2 {
      font-size: 44px;
      line-height: 56px;
      text-shadow: 0 4px rgba(0, 0, 0, 0.1); } }

h3 {
  font-size: 13px;
  font-weight: normal;
  line-height: 21px;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
  @media (min-width: 600px) {
    h3 {
      font-size: 18px;
      line-height: 25px;
      text-shadow: 0 2px rgba(0, 0, 0, 0.1); } }
  @media (min-width: 1024px), (min-width: 1440px) {
    h3 {
      font-size: 26px;
      line-height: 42px;
      text-shadow: 0 2px rgba(0, 0, 0, 0.1); } }

h4 {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.2; }
  @media (min-width: 600px) {
    h4 {
      font-size: 19px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    h4 {
      font-size: 22px; } }

.Header {
  position: fixed;
  width: 100%;
  height: 50px;
  z-index: 111;
  background-color: #f69d2d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  @media (max-width: 375px) and (max-width: 599px) {
    .Header {
      width: 100%; } }
  .Header.unfix {
    top: -50px; }
  .Header.language-selector .Navbar-logo {
    display: none; }
  .Header .social-media {
    display: none; }
  .Header.not-fixed {
    overflow: auto; }

.Header .Header-logo-wrapper {
  text-align: center; }

@media (max-width: 599px), (max-width: 375px) {
  .Header .social-media {
    z-index: 10; }
    .Header .social-media span {
      display: none; } }

@media (min-width: 600px) {
  .Header .social-media {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 50px;
    display: block;
    padding-left: 13px; }
    .Header .social-media span {
      display: none; }
    .Header .social-media a svg {
      height: 20px; } }

@media (min-width: 700px) {
  .Header .social-media span {
    display: inline-block; } }

@media (min-width: 1024px), (min-width: 1440px) {
  .Header {
    height: 70px; }
    .Header .social-media {
      position: absolute;
      top: 0;
      left: 0;
      line-height: 68px;
      display: block;
      padding-left: 30px; }
      .Header .social-media a {
        padding: 0 5px; }
        .Header .social-media a:first-child {
          padding-left: 10px; }
        .Header .social-media a.notactive {
          opacity: 0.6; }
        .Header .social-media a.active {
          opacity: 1; }
        .Header .social-media a svg {
          width: 20px;
          height: 20px; }
          .Header .social-media a svg path {
            fill: white; }
    .Header.unfix {
      top: -70px; } }

.Header__logo {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: all 250ms ease-out;
  top: 10px; }
  .Header__logo img {
    transition: opacity 250ms ease-out;
    width: 0;
    height: 0;
    border: 0;
    outline: 0; }
    @media (max-width: 599px) {
      .Header__logo img.lazyloaded {
        width: 170px;
        height: auto; } }
    @media (min-width: 600px) and (max-width: 1023px) {
      .Header__logo img.lazyloaded {
        width: 170px;
        height: auto; } }
    @media (min-width: 1024px) {
      .Header__logo img.lazyloaded {
        width: 240px;
        height: auto; } }

/* ===============================================
Hamburger Button
=================================================*/
.Navbar-FixedElements {
  position: fixed;
  width: 100%; }

.Navbar-language-button {
  position: relative;
  top: 27px;
  right: -199px;
  color: white;
  z-index: 10000; }
  .Navbar-language-button a {
    cursor: pointer;
    padding: 10px; }

.Navbar-holder {
  position: relative;
  width: 100%; }

.Navbar-hamburger-button {
  position: absolute;
  display: block;
  width: 56px;
  height: 60px;
  top: 0;
  left: inherit;
  right: 0;
  padding: 18px;
  z-index: 10000;
  transition: all 430ms ease-out;
  transform: translate3d(0, 0, 0);
  cursor: pointer; }
  .Navbar-hamburger-button.not-fixed {
    top: 0; }
  .Navbar-hamburger-button .Navbar-hamburger {
    position: relative;
    width: 20px;
    height: 15px; }
    .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line {
      position: absolute;
      display: block;
      width: 100%;
      height: 3px;
      left: 0;
      background-color: #fff;
      border-radius: 6px;
      transform: translate3d(0, 0, 0);
      transition: transform 200ms ease-out;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line1 {
        top: 0; }
      .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line2 {
        top: 6px; }
      .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line3 {
        top: 6px; }
      .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line4 {
        top: 12px; }
  .unfix .Navbar-hamburger-button {
    top: -60px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Navbar-hamburger-button {
      padding: 25px;
      width: 78px;
      height: 70px; }
      .Navbar-hamburger-button .Navbar-hamburger {
        width: 28px;
        height: 20px; }
        .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line {
          height: 4px; }
          .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line1 {
            top: 0; }
          .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line2 {
            top: 8px; }
          .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line3 {
            top: 8px; }
          .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line4 {
            top: 16px; } }

.Navbar-holder {
  position: absolute;
  top: 0;
  right: 0; }

.Navbar-backdrop {
  right: -100%;
  left: inherit !important; }

.Navbar-hamburger-button {
  left: inherit;
  right: 0; }

/* ===============================================
Logo found within the Navbar
=================================================*/
.Navbar-logo {
  position: fixed;
  z-index: 1000;
  margin: 0 auto 20px;
  top: 15px;
  display: none;
  transform: translate3d(0, 0, 0);
  transition: all 250ms ease-out; }
  .Navbar-logo .Navbar--active {
    display: block; }
  .Navbar-logo img {
    transition: opacity 250ms ease-out;
    width: 0;
    height: 0;
    border: 0;
    outline: 0; }
    .Navbar-logo img.lazyloaded {
      width: 115px;
      height: auto; }
  .unfix .Navbar-logo {
    top: -60px; }
  .Navbar-logo.Navbar-logo-inside {
    position: relative;
    display: block;
    top: -4px;
    margin-left: 0; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Navbar-logo {
      display: none; }
      .Navbar-logo img.lazyloaded {
        width: 185px;
        height: auto; } }

.Navbar-logo {
  transition: none; }

/* ===============================================
Navbar, not to be confused with Header
=================================================*/
.Navbar {
  position: fixed;
  text-align: left;
  z-index: 1000;
  left: -100%;
  width: 100%;
  display: block;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  transform: translate3D(0, 0, 0); }
  .Navbar .Navbar-primarynav > .Navbar-item {
    border-bottom: 1px solid #3b3b3b; }
    @media (max-width: 599px), (max-width: 375px) {
      .Navbar .Navbar-primarynav > .Navbar-item:first-child {
        border-top: 1px solid #3b3b3b; } }

@media (min-width: 600px) and (max-width: 1023px) {
  .Navbar-holder, .Navbar-scroller, .Navbar-backdrop {
    width: 226px; }
    .Navbar-holder .Navbar-backdrop, .Navbar-scroller .Navbar-backdrop, .Navbar-backdrop .Navbar-backdrop {
      width: 226px !important;
      top: 50px; } }

@media (min-width: 1024px) {
  .Navbar-holder, .Navbar-scroller, .Navbar-backdrop {
    width: 256px; }
    .Navbar-holder .Navbar-backdrop, .Navbar-scroller .Navbar-backdrop, .Navbar-backdrop .Navbar-backdrop {
      width: 256px !important; } }

@media (min-width: 1440px) {
  .Navbar-holder, .Navbar-scroller, .Navbar-backdrop {
    width: 375px; }
    .Navbar-holder .Navbar-backdrop, .Navbar-scroller .Navbar-backdrop, .Navbar-backdrop .Navbar-backdrop {
      width: 375px !important; } }

/* ===============================================
Navigation background (Expanded)
=================================================*/
.Navbar-backdrop {
  background: #292929;
  height: 557px;
  left: -100%;
  position: fixed;
  width: 100%; }
  .Navbar-backdrop.animate-out {
    left: inherit;
    right: 0;
    animation-name: sneak-out-right;
    animation-duration: 370ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
    @media (max-width: 599px), (max-width: 375px) {
      .Navbar-backdrop.animate-out {
        top: 0; } }
    @media (min-width: 600px) and (max-width: 1023px) {
      .Navbar-backdrop.animate-out {
        top: 50px; } }
    @media (min-width: 1024px), (min-width: 1440px) {
      .Navbar-backdrop.animate-out {
        top: 70px; } }

.Navbar-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  padding-bottom: 50px;
  padding-top: 50px; }

@media (min-width: 1024px), (min-width: 1440px) {
  .Navbar-background {
    padding-top: 70px; } }

/* ===============================================
Navbar Items
- These are used to do the hover effects
=================================================*/
.Navbar-item {
  transition: opacity 200ms ease-out; }
  .Navbar-item.notactive {
    opacity: 0.5; }

/* ===============================================
Navbar Wrapper
=================================================*/
.Navbar-wrapper {
  position: relative;
  max-width: 1440px;
  margin: 0 auto; }

/* ===============================================
Navbar Overlay
=================================================*/
.Navbar-overlay {
  position: fixed;
  display: none;
  z-index: 1;
  height: 60px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #292929; }

.Navbar-primarynav, .Navbar-secondarynav, .Navbar-download {
  padding: 0 43px; }

/* ===============================================
Primary Navigation
=================================================*/
.Navbar-primarynav {
  position: relative;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  color: #fff;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  .Navbar-primarynav a {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    padding: 27px 0;
    display: block;
    transform: translate3d(0, 0, 0); }
    .Navbar-primarynav a.active {
      color: #ff9c00; }
    .Navbar-primarynav a.Navbar-dropdown-main {
      padding: 0; }

/* ===============================================
Secondary Navigation
=================================================*/
.Navbar-secondarynav {
  margin: 28px 0 28px; }
  .Navbar-secondarynav a {
    font-size: 16px;
    padding: 12px 0;
    text-decoration: none;
    color: #767779;
    display: block; }

/* ===============================================
Navigation Dropdowns
=================================================*/
.Navbar-dropdown {
  padding: 25px 0;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* ===============================================
  Open State for Navigation Dropdowns
  =================================================*/ }
  .Navbar-dropdown .icon-arrow {
    position: relative;
    width: 12px;
    height: 24px;
    line-height: 70px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    opacity: 0.5;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: opacity 150ms ease-out;
    display: none; }
    .Navbar-dropdown .icon-arrow path {
      fill: #767779; }
  .Navbar-dropdown ul {
    list-style: none;
    margin: 0 0 0 15px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    max-height: inherit; }
    .Navbar-dropdown ul li {
      margin: 0;
      padding: 0; }
      .Navbar-dropdown ul li a {
        padding: 10px 0;
        display: block;
        font-size: 14px; }
      .Navbar-dropdown ul li:first-child {
        margin-top: 10px; }
      .Navbar-dropdown ul li:last-child {
        margin-bottom: -10px; }
  .Navbar-dropdown.open .icon-arrow path {
    fill: #ffffff; }

/* ===============================================
Download button for mobile
=================================================*/
.Navbar-download {
  width: 300px;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  color: #fff;
  text-align: left;
  font-size: 9px;
  line-height: 9px;
  padding-bottom: 40px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Navbar-download {
      margin-top: 70px; } }
  .Navbar-download img {
    margin-top: 10px;
    width: 125px;
    height: auto; }

.Navbar-logo-outside.is-android {
  margin-left: -35px;
  top: 10px; }
  .Navbar-logo-outside.is-android img {
    width: 70px; }

/* ===============================================
Active State for Navbar
=================================================*/
.Navbar--active {
  /* ===============================================
  Morphs Hamburger button to Close Button
  =================================================*/ }
  .Navbar--active .Navbar-scroller {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 1000px;
    min-height: 100vh;
    height: 100%;
    top: 70px;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    z-index: 1000; }
  .Navbar--active .Navbar-backdrop {
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    animation-name: fade-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    animation-name: sneak-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
    @media (max-width: 599px), (max-width: 375px) {
      .Navbar--active .Navbar-backdrop {
        height: 100%;
        top: 0; } }
    @media (tablet) {
      .Navbar--active .Navbar-backdrop {
        top: 50px; } }
    @media (min-width: 1024px), (min-width: 1440px) {
      .Navbar--active .Navbar-backdrop {
        top: 70px; } }
  .Navbar--active .Navbar {
    position: relative;
    left: 0;
    animation-name: sneak-in-text-right;
    animation-duration: 700ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
  .Navbar--active .Navbar-primarynav, .Navbar--active .Navbar-secondarynav, .Navbar--active .Navbar-download {
    animation-name: fade-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    animation-name: sneak-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
  .Navbar--active .Navbar-overlay {
    display: none; }
  .Navbar--active .Navbar-dropdown .icon-arrow path {
    fill: #ffffff; }
  .Navbar--active .Navbar-dropdown ul {
    max-height: 699px; }
  .Navbar--active .Navbar-hamburger-button {
    position: fixed;
    transform: translate3D(0, 0, 0); }
    .Navbar--active .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line1 {
      top: 8px;
      width: 0;
      left: 50%; }
    .Navbar--active .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line2 {
      transform: rotate(45deg); }
    .Navbar--active .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line3 {
      transform: rotate(-45deg); }
    .Navbar--active .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line.Navbar-hamburger-line4 {
      top: 8px;
      width: 0;
      left: 50%; }
  .Navbar--active .Navbar-background {
    padding-top: 15px;
    position: static;
    display: block; }

@media (tablet) {
  .Navbar--active .Navbar-logo {
    display: none; } }

@media (max-width: 599px) {
  .Navbar--active .Navbar-logo {
    display: inline; } }

@media (max-width: 599px), (max-width: 375px) {
  .Navbar--active .Navbar-logo img {
    width: 100px;
    margin-left: 45px; } }

.no-animations .Navbar-backdrop.animate-out {
  right: -100%;
  animation-name: none !important; }

.no-animations .Navbar-hamburger-button .Navbar-hamburger .Navbar-hamburger-line {
  transition: none !important; }

footer {
  background-color: #000;
  width: 100%;
  color: #fff;
  padding-bottom: 35px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
  footer.hidden {
    display: none; }

.Footer-wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 1440px; }

.Footer-primarynav {
  text-align: center;
  margin: 0 auto;
  padding: 35px 0;
  width: 100%; }
  .Footer-primarynav a {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    line-height: 34px;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    text-decoration: none;
    margin: 0 12px;
    white-space: nowrap; }

.Footer-DownloadButton {
  text-align: center; }
  .Footer-DownloadButton a {
    display: inline-block; }
    .Footer-DownloadButton a img {
      width: 125px;
      height: auto; }

.Footer-secondarynav {
  position: relative;
  text-align: center;
  border-top: 1px solid #262626;
  margin: 35px 0 0;
  padding: 35px 0; }
  .Footer-secondarynav a {
    color: #858585;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    margin: 0 12px;
    display: inline-block; }
    .Footer-secondarynav a:first-of-type {
      margin-left: 0; }
    .Footer-secondarynav a:last-of-type {
      margin-right: 0; }

.Footer .social-media {
  text-align: center;
  padding-top: 0px; }
  .Footer .social-media svg circle,
  .Footer .social-media svg path {
    fill: #858585; }

@media (min-width: 320px) {
  .Footer .Footer .social-media {
    width: 100%;
    text-align: center;
    z-index: 10;
    position: absolute; } }

@media (min-width: 600px) {
  .Footer .Footer .social-media {
    z-index: 10;
    position: absolute; } }

@media (min-width: 700px), (min-width: 1024px), (min-width: 1440px) {
  .Footer .social-media {
    z-index: 10;
    position: absolute;
    right: 0;
    top: 120px; } }

.Footer-footnotes {
  text-align: center;
  opacity: 0.4;
  font-size: 10px; }
  .Footer-footnotes a {
    color: #fff;
    margin: 0 6px; }

.Footer-SocialItems .SocialItem {
  padding: 0 10px;
  opacity: .5;
  transform: translate3d(0, 0, 0);
  display: inline-block; }
  .Footer-SocialItems .SocialItem:first-of-type {
    padding-left: 0; }
  .Footer-SocialItems .SocialItem:last-of-type {
    padding-right: 0; }
  .Footer-SocialItems .SocialItem svg {
    width: 22px;
    height: 23px; }
    .Footer-SocialItems .SocialItem svg * {
      fill: #fff; }
  .Footer-SocialItems .SocialItem.rollover {
    opacity: .3; }
  .Footer-SocialItems .SocialItem.active {
    opacity: 1; }
  .Footer-SocialItems .SocialItem.notactive {
    opacity: .3; }
  .Footer-SocialItems .SocialItem .icon-instagram path {
    fill: #858585 !important; }

.Footer-item {
  transition: opacity 0.2s ease-out; }
  .Footer-item.notactive {
    opacity: 0.5; }

@media (min-width: 600px) {
  footer {
    padding: 0 10% 35px; }
  .Footer-primarynav {
    text-align: center; }
  .Footer .social-media {
    bottom: 0;
    top: inherit; }
  .Footer-SocialItems .SocialItem {
    padding: 0 6px; }
  .Footer-secondarynav {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 0;
    padding: 40px 0; }
    .Footer-secondarynav a {
      margin: 0 6px; }
  .Footer-DownloadButton {
    display: block;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px; } }

@media (min-width: 700px) {
  .Footer .social-media {
    bottom: 35px;
    top: inherit; }
  .Footer-secondarynav {
    width: 100%;
    text-align: left;
    display: block;
    margin-top: 0;
    padding: 40px 0; }
    .Footer-secondarynav a {
      margin: 0 6px; } }

@media (min-width: 1024px), (min-width: 1440px) {
  footer {
    padding: 0 10% 35px; }
  .Footer-primarynav {
    text-align: left;
    display: inline-block;
    padding: 40px 0;
    padding-right: 30px; }
    .Footer-primarynav a {
      line-height: 26px;
      margin: 0 8px; }
      .Footer-primarynav a:first-of-type {
        margin-left: 0; }
  .Footer-secondarynav {
    width: 100%;
    text-align: left;
    display: block;
    margin-top: 0;
    padding: 40px 0; }
    .Footer-secondarynav a {
      margin: 0 6px; }
  .Footer-SocialItems {
    margin-top: 0;
    text-align: right;
    display: inline-block;
    float: right; }
  .Footer-footnotes {
    text-align: right; } }

.Footer-Agerating-TW {
  display: block;
  font-size: 12px;
  left: 50%;
  opacity: 1;
  padding: 15px;
  position: relative;
  text-align: center;
  transition: opacity 250ms ease-out;
  transform: translateX(-50%);
  width: 100%; }
  @media (min-width: 600px) {
    .Footer-Agerating-TW {
      padding: 15px 0; } }
  @media (min-width: 1400px) {
    .Footer-Agerating-TW {
      bottom: 20px;
      text-align: left;
      padding: 0;
      position: absolute;
      width: auto; } }
  .Footer-Agerating-TW-image {
    display: block;
    height: auto;
    margin: 15px auto;
    vertical-align: middle;
    width: 54px; }
    @media (min-width: 600px) {
      .Footer-Agerating-TW-image {
        display: inline-block;
        margin: 0 10px 0 0; } }
  .Footer-Agerating-TW-content {
    display: inline-block;
    vertical-align: middle; }
    @media (min-width: 600px) {
      .Footer-Agerating-TW-content {
        text-align: left; } }
    .Footer-Agerating-TW-content p {
      margin: 0; }
    .Footer-Agerating-TW-content-breakable span {
      display: block; }

.Footer-Agerating-CN {
  display: block;
  font-size: 12px;
  left: 50%;
  opacity: 1;
  padding: 15px;
  position: relative;
  text-align: center;
  transition: opacity 250ms ease-out;
  transform: translateX(-50%);
  width: 100%; }
  @media (min-width: 600px) {
    .Footer-Agerating-CN {
      padding: 15px 0; } }
  .Footer-Agerating-CN-image {
    display: inline-block;
    height: auto;
    vertical-align: bottom;
    width: 15px; }
  .Footer-Agerating-CN-link {
    display: inline-block; }
  .Footer-Agerating-CN-content {
    display: inline-block;
    vertical-align: middle;
    text-align: center; }
    .Footer-Agerating-CN-content p {
      margin: 0; }

@media (min-width: 800px) {
  .Footer-DownloadButton a:first-of-type {
    margin-right: 15px; } }

@media (min-width: 1024px) {
  .Footer-primarynav {
    width: auto;
    text-align: left; }
  .Footer-DownloadButton {
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 34px; } }

.Download-GooglePlay {
  border: 1px solid grey;
  border-radius: 4px;
  overflow: hidden; }

@media (max-width: 799px) {
  .Footer-primarynav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: left;
    padding: 35px 0; }
    .Footer-primarynav a.Footer-item {
      font-size: 16px;
      line-height: 2.6;
      margin: 0; }
  .Footer-DownloadButton {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: start;
        justify-content: flex-start;
    padding: 0;
    text-align: left; }
    .Footer-DownloadButton a {
      -ms-flex: 0 0 175px;
          flex: 0 0 175px; }
      .Footer-DownloadButton a:first-child {
        margin-right: 15px; }
      .Footer-DownloadButton a img {
        width: 100%; } }

@media (max-width: 599px) {
  .Footer-primarynav {
    padding: 35px 30px; }
  .Footer-DownloadButton {
    -ms-flex-pack: center;
        justify-content: center;
    padding: 0 30px; }
    .Footer-DownloadButton a {
      -ms-flex: 0 0 calc(50% - 10px);
          flex: 0 0 calc(50% - 10px);
      max-width: 175px; }
      .Footer-DownloadButton a img {
        width: 100%; } }

.back-to-top {
  -ms-flex-align: center;
      align-items: center;
  background: #ffa518;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  font-size: 16px;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 20px;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
  @media (min-width: 1024px) {
    .back-to-top {
      display: none; } }
  .back-to-top .back-to-top__cta {
    color: #ffffff;
    margin-right: 12px; }
  .back-to-top .back-to-top__svg {
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2)); }
    .back-to-top .back-to-top__svg svg {
      height: 14px;
      width: 14px; }

.HeroImage {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  /* background-color: #030d21; */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  @media (max-width: 599px) {
    .HeroImage {
      margin-top: 50px; } }
  @media (min-width: 600px) {
    .HeroImage {
      margin-top: 50px; } }
  @media (min-width: 1024px) {
    .HeroImage {
      margin-top: 70px;
      height: auto; } }
  .layout__home .HeroImage {
    height: auto; }
    @media (min-width: 1440px) {
      .layout__home .HeroImage {
        width: 100%;
        height: auto;
        margin-top: 70px; } }
  .HeroImage img {
    height: 100%;
    opacity: 0;
    position: relative;
    width: 100%;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    @media (min-width: 375px) {
      .HeroImage img {
        height: auto;
        min-height: 0;
        width: 100%; } }
    .HeroImage img.lazyloading, .HeroImage img.lazyload {
      opacity: 0;
      height: 100%;
      width: 100%; }
    .HeroImage img.lazyloaded {
      transition: all 400ms ease-out;
      opacity: 1; }

/*
Resuable Carousel Class
*/
.Carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #030d21;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.CarouselHolder {
  position: relative;
  height: 100%;
  top: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.CarouselItem {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .CarouselItem img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .CarouselItem:nth-child(2) {
    left: 100%; }
  .CarouselItem:nth-child(3) {
    left: 200%; }
  .CarouselItem:nth-child(4) {
    left: 300%; }
  .CarouselItem:nth-child(5) {
    left: 400%; }
  .CarouselItem:nth-child(6) {
    left: 500%; }
  .CarouselItem:nth-child(7) {
    left: 600%; }

.CarouselBullets {
  position: absolute;
  bottom: 16px;
  width: 100%;
  text-align: center;
  transition: all 250ms ease-out; }
  .CarouselBullets.state-start {
    opacity: 0; }
  .CarouselBullets .CarouselBullet {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative; }
    .CarouselBullets .CarouselBullet span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      display: inline-block;
      vertical-align: middle;
      margin: 0;
      border: 0 transparent;
      transition: all 250ms ease-out;
      box-sizing: content-box; }
    .CarouselBullets .CarouselBullet:hover span {
      background-color: white; }
    .CarouselBullets .CarouselBullet.active span {
      border: 3px solid #fff;
      background-color: transparent; }
  @media (min-width: 600px), (min-width: 1024px) {
    .CarouselBullets {
      bottom: 30px; } }
  @media (min-width: 1440px) {
    .CarouselBullets {
      bottom: 55px; }
      .CarouselBullets span {
        width: 10px;
        height: 10px; }
        .CarouselBullets span.active {
          width: 6px;
          height: 6px;
          border: 3px solid #fff; } }

.Carousel-leftarrow, .Carousel-rightarrow {
  display: none; }

@media (min-width: 1024px), (min-width: 1440px) {
  .HomepageHero .Carousel {
    max-height: 620px; }
  .Carousel-leftarrow, .Carousel-rightarrow {
    position: absolute;
    z-index: 2;
    display: block;
    top: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    cursor: pointer;
    transition: all 250ms ease-out;
    background-color: rgba(0, 0, 0, 0); }
    .Carousel-leftarrow .svg-container, .Carousel-rightarrow .svg-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 28px;
      height: 28px; }
    .Carousel-leftarrow.state-start, .Carousel-rightarrow.state-start {
      opacity: 0; }
    .Carousel-leftarrow.disabled, .Carousel-rightarrow.disabled {
      opacity: 0.2;
      pointer-events: none; }
      .Carousel-leftarrow.disabled:hover svg path, .Carousel-rightarrow.disabled:hover svg path {
        fill: #ffffff; }
  .Carousel-leftarrow {
    left: 40px;
    transform: rotate(180deg); }
    .Carousel-leftarrow:hover {
      left: 30px; }
  .Carousel-rightarrow {
    right: 40px; }
    .Carousel-rightarrow:hover {
      right: 30px; } }

@media (min-width: 1024px), (min-width: 1440px) {
  .HomepageHero .Carousel {
    height: 80vh; } }

@media (min-width: 1440px) {
  .HomepageHero .Carousel {
    max-height: 80vh; } }

.icon-facebook, .icon-twitter, .icon-instagram, .icon-youtube {
  width: 24px;
  height: 24px; }
  .icon-facebook path, .icon-twitter path, .icon-instagram path, .icon-youtube path {
    fill: #488bf4; }

.button-primary {
  background-color: #ffa518;
  color: #ffffff !important;
  display: inline-block;
  border-radius: 8px;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif !important;
  font-size: 21px !important;
  margin-bottom: 35px;
  padding: 15px 20px;
  position: relative;
  text-decoration: none;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  transition: background-color 250ms ease-out; }
  .button-primary:hover {
    background-color: #fb9a00; }

.button-secondary {
  position: relative;
  background-color: #ffab18;
  display: inline-block;
  padding: 15px 20px;
  text-decoration: none;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif !important;
  color: #ffffff !important;
  font-size: 12px !important;
  transform: translate3d(0, 0, 0);
  border-radius: 5px; }

.social-media {
  color: #ffffff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
  .social-media a {
    display: inline-block;
    position: relative;
    top: 0;
    transition: top ease 0.2s; }
    .social-media a path {
      fill: #ffffff; }
  .social-media a:hover {
    top: -3px; }

/********************
* PRELOADER KEYFRAMES
********************/
@keyframes preloader {
  0% {
    opacity: .2; }
  30% {
    opacity: 1; }
  60% {
    opacity: .2; } }

/********************
* PRELOADER
********************/
.preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 18px;
  opacity: .5;
  width: 40px;
  z-index: 0; }
  .preloader.light span {
    background-color: #fff; }
  .preloader span {
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    margin: 0 2px;
    background-color: #000;
    border-radius: 50%;
    animation: preloader 2s linear infinite;
    opacity: .2; }
    .preloader span.dot-1 {
      animation-delay: 0;
      margin-left: 0; }
    .preloader span.dot-2 {
      animation-delay: 666ms; }
    .preloader span.dot-3 {
      animation-delay: 1333ms;
      margin-right: 0; }
  .preloader img {
    width: 100%;
    height: 100%; }
  .preloader.hidden {
    display: none; }

.video-icon {
  display: none; }

.section-wrapper {
  background-color: #f7f7f7;
  display: block;
  margin: 0 auto;
  padding: 30px;
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  margin-top: 60px; }
  .section-homepage-main .section-wrapper {
    padding-bottom: 0;
    z-index: 1;
    background: transparent; }
    @media (max-width: 375px) {
      .section-homepage-main .section-wrapper {
        margin-top: -150px; } }
    @media (min-width: 600px) {
      .section-homepage-main .section-wrapper {
        margin-top: -150px;
        margin-bottom: 0; } }
    @media (min-width: 825px) {
      .section-homepage-main .section-wrapper {
        margin-top: -130px;
        padding: 0;
        padding-top: 30px;
        padding-bottom: 30px; } }
    @media (min-width: 1024px) {
      .section-homepage-main .section-wrapper {
        margin-top: -100px;
        padding: 30px;
        margin-bottom: 65px; } }
    @media (min-width: 1440px) {
      .section-homepage-main .section-wrapper {
        margin-top: -150px;
        padding: 30px; } }

.section__cta {
  display: block;
  position: relative;
  text-align: center;
  width: 100%; }

.home, .blog {
  margin: 0 auto; }

.home-main-news-item {
  border-radius: 10px;
  transform: translate3d(0, 0, 0);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background: transparent;
  height: 350px; }
  @media (max-width: 599px) {
    .home-main-news-item {
      -ms-flex-align: center;
          align-items: center;
      height: 100%; } }
  @media (min-width: 600px) {
    .home-main-news-item {
      height: 100%;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-align: center;
          align-items: center; } }
  @media (min-width: 825px) {
    .home-main-news-item {
      -ms-flex-direction: row;
          flex-direction: row; } }
  @media (min-width: 1024px) {
    .home-main-news-item {
      -ms-flex-direction: row;
          flex-direction: row; } }
  .home-main-news-item:hover .home-main-news-item__picture img {
    transform: translate(-50%, -50%) scale(1.1); }
  .home-main-news-item .home-main-news-item-image {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column; }
    @media (min-width: 280px) and (max-width: 375px) {
      .home-main-news-item .home-main-news-item-image {
        width: 100%; } }
    @media (min-width: 600px) {
      .home-main-news-item .home-main-news-item-image {
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        margin-top: 20px; } }
    @media (min-width: 825px) {
      .home-main-news-item .home-main-news-item-image {
        -ms-flex: 1;
            flex: 1;
        margin-top: 60px;
        margin-right: 8.5px;
        -ms-flex-align: end;
            align-items: flex-end; } }
    @media (min-width: 1440px) {
      .home-main-news-item .home-main-news-item-image {
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        margin-top: 0; } }
  .home-main-news-item .home-main-news-item-content-category {
    color: #ffffff;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    padding: 0 20px;
    text-decoration: none; }
    .home-main-news-item .home-main-news-item-content-category h4 {
      font-size: 14px; }
  .home-main-news-item .home-main-news-item__picture {
    display: block;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    transform: translateZ(0); }
    @media (min-width: 375px) {
      .home-main-news-item .home-main-news-item__picture {
        width: 315px;
        height: 100%; } }
    @media (min-width: 440px) {
      .home-main-news-item .home-main-news-item__picture {
        width: 350px;
        height: 100%; } }
    @media (min-width: 600px) {
      .home-main-news-item .home-main-news-item__picture {
        height: 100%;
        width: 393px; } }
    @media (min-width: 825px) {
      .home-main-news-item .home-main-news-item__picture {
        margin-top: 70px;
        height: 100%;
        width: 393px;
        margin-left: 0; } }
    @media (min-width: 1440px) {
      .home-main-news-item .home-main-news-item__picture {
        margin-top: 0;
        height: 377px;
        width: 607px;
        margin-left: auto; } }
    .home-main-news-item .home-main-news-item__picture:before {
      content: '';
      display: block;
      padding-top: 56.1%;
      position: relative; }
    .home-main-news-item .home-main-news-item__picture img {
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      transition: transform 250ms ease-out, opacity 450ms ease-out; }
      @media (max-width: 599px) {
        .home-main-news-item .home-main-news-item__picture img {
          width: 100%; } }
      @media (min-width: 600px) and (max-width: 1023px) {
        .home-main-news-item .home-main-news-item__picture img {
          width: 100%;
          height: 100%; } }
      @media (min-width: 1024px) {
        .home-main-news-item .home-main-news-item__picture img {
          width: 393px;
          height: 100%; } }
      @media (min-width: 1440px) {
        .home-main-news-item .home-main-news-item__picture img {
          width: 607px;
          height: 377px; } }
  .home-main-news-item .home-main-news-item-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    padding: 16px 20px;
    min-height: 138px;
    color: black; }
    .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore {
      color: #000; }
      @media (max-width: 599px) {
        .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore .icon {
          position: relative;
          display: inline-block;
          width: 33px;
          height: 33px;
          border-radius: 30px;
          color: #ffffff;
          text-align: center;
          font-size: 16px;
          line-height: 33px;
          transition: background-color 250ms ease-out; }
          .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore .icon svg {
            display: inline-block;
            vertical-align: middle;
            width: 29px;
            height: 19px; }
          .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore .icon.icon-next svg {
            margin-top: 0;
            margin-left: 2px;
            transform: rotate(180deg); }
          .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore .icon.icon-prev svg {
            margin-top: -2px;
            margin-right: 2px; } }
      @media (min-width: 600px) {
        .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper a.link__readmore .icon {
          display: none; } }
    @media (min-width: 825px) {
      .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper {
        width: 393px; } }
    @media (min-width: 1024px) {
      .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper {
        width: 393px; } }
    @media (min-width: 1440px) {
      .home-main-news-item .home-main-news-item-content .home-main-news-item-content-wrapper {
        width: 600px; } }
    @media (min-width: 375px) {
      .home-main-news-item .home-main-news-item-content {
        -ms-flex-pack: center;
            justify-content: center;
        width: 315px; } }
    @media (min-width: 440px) {
      .home-main-news-item .home-main-news-item-content {
        -ms-flex-pack: center;
            justify-content: center;
        width: 350px; } }
    @media (min-width: 600px) {
      .home-main-news-item .home-main-news-item-content {
        -ms-flex-pack: start;
            justify-content: flex-start;
        padding: 30px;
        width: 393px; } }
    @media (min-width: 825px) {
      .home-main-news-item .home-main-news-item-content {
        -ms-flex-pack: start;
            justify-content: flex-start;
        padding: 0;
        -ms-flex: 1;
            flex: 1;
        margin-left: 8.5px;
        width: 100%; } }
    @media (min-width: 1024px) {
      .home-main-news-item .home-main-news-item-content {
        width: 393px; } }
    @media (min-width: 1440px) {
      .home-main-news-item .home-main-news-item-content {
        -ms-flex-pack: start;
            justify-content: flex-start;
        padding: 30px 50px 30px 10px;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%; } }
    .home-main-news-item .home-main-news-item-content h2 {
      font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
      font-size: 20px;
      line-height: 1;
      margin-top: 12px;
      margin-bottom: 12px;
      text-shadow: none; }
      @media (min-width: 600px) {
        .home-main-news-item .home-main-news-item-content h2 {
          font-size: 26px; } }
      @media (min-width: 1440px) {
        .home-main-news-item .home-main-news-item-content h2 {
          font-size: 36px; } }
      .home-main-news-item .home-main-news-item-content h2 a {
        color: #363636; }
    .home-main-news-item .home-main-news-item-content a {
      text-decoration: none; }
  .home-main-news-item .link__readmore {
    display: block;
    font-family: 'Clash', Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 22px; }
  .home-main-news-item .home-main-news-item-date {
    color: #acacac;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    margin-top: 130px; }
    @media (max-width: 599px) {
      .home-main-news-item .home-main-news-item-date {
        margin-top: 150px;
        margin-top: 50px; } }
    @media (min-width: 600px) {
      .home-main-news-item .home-main-news-item-date {
        margin-top: 30px; } }
    @media (min-width: 825px) {
      .home-main-news-item .home-main-news-item-date {
        margin-top: 150px; } }

.home-news-primary-item {
  background-color: white;
  border-radius: 8px;
  transform: translate3d(0, 0, 0);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  overflow: hidden;
  margin-bottom: 60px; }
  .home-news-primary-item:last-of-type {
    margin-bottom: 0; }
  .home-news-primary-item:hover .home-news-primary-item__picture img {
    transform: translate(-50%, -50%) scale(1.1); }
  .home-news-primary-item .home-news-primary-item-content h3 {
    font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.57;
    margin-bottom: 10px;
    text-shadow: none;
    color: black; }
    .home-news-primary-item .home-news-primary-item-content h3 a {
      color: black;
      text-transform: uppercase; }
  .home-news-primary-item .home-news-primary-item-content a {
    text-decoration: none;
    color: black; }
  @media (max-width: 599px) {
    .home-news-primary-item .home-news-primary-item-content-category {
      background: none !important; } }
  .home-news-primary-item .home-news-primary-item-content-category h4 {
    font-size: 14px;
    margin: 0; }
  .home-news-primary-item .home-news-primary-item {
    background-color: white;
    border-radius: 8px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    overflow: hidden; }
  .home-news-primary-item .home-news-primary-item__image-wrap {
    display: block;
    -ms-flex: 0 0 115px;
        flex: 0 0 115px;
    overflow: hidden;
    position: relative; }
    @media (max-width: 599px) {
      .home-news-primary-item .home-news-primary-item__image-wrap {
        height: 100%; } }
  .home-news-primary-item .home-news-primary-item__picture {
    display: block;
    height: auto;
    overflow: hidden;
    position: relative; }
    @media (max-width: 599px) {
      .home-news-primary-item .home-news-primary-item__picture {
        height: 200px;
        margin-top: 0; } }
    .home-news-primary-item .home-news-primary-item__picture:before {
      content: '';
      display: block;
      padding-top: 100%;
      position: relative; }
    .home-news-primary-item .home-news-primary-item__picture img {
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      transition: transform 250ms ease-out, opacity 450ms ease-out; }
      @media (max-width: 599px) {
        .home-news-primary-item .home-news-primary-item__picture img {
          height: 200px;
          width: 100%; } }
  .home-news-primary-item .home-news-primary-item-content {
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center; }
    @media (max-width: 375px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 20px 15px 20px; } }
    @media (max-width: 599px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 26px 15px 18px; } }
    @media (min-width: 600px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 26px 15px 18px; } }
    @media (min-width: 825px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 26px 15px 18px; } }
    @media (min-width: 1024px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 26px 15px 18px; } }
    @media (min-width: 1440px) {
      .home-news-primary-item .home-news-primary-item-content {
        padding: 15px 18px 15px 18px; } }
  .home-news-primary-item .home-news-primary-item-date {
    color: white;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin: auto 0 0 0;
    -ms-flex-order: 1;
        order: 1;
    text-align: start;
    margin-left: 20px; }

.home-news-primary-item__picture img.lazyload, .home-news-primary-item__picture img.lazyloading,
.home-main-news-item__picture img.lazyload,
.home-main-news-item__picture img.lazyloading {
  opacity: 0; }

@media (max-width: 375px) {
  .home .section-homepage-main .section-wrapper, .blog .section-homepage-main .section-wrapper {
    width: 100%; } }

@media (max-width: 599px) {
  .home .section-homepage-main .section-wrapper, .blog .section-homepage-main .section-wrapper {
    width: 100%;
    margin-top: -100px; } }

@media (min-width: 600px) and (max-width: 1023px) {
  .home .section-homepage-main .section-wrapper, .blog .section-homepage-main .section-wrapper {
    width: 100%; } }

@media (min-width: 1024px) {
  .home .section-homepage-main .section-wrapper, .blog .section-homepage-main .section-wrapper {
    width: 1000px;
    padding: 0; } }

@media (min-width: 1440px) {
  .home .section-homepage-main .section-wrapper, .blog .section-homepage-main .section-wrapper {
    width: 1400px; } }

@media (max-width: 599px) {
  .home .section-homepage-news-primary, .blog .section-homepage-news-primary {
    padding-left: 20px;
    padding-right: 20px; } }

.home .section-homepage-news-primary .section-wrapper, .blog .section-homepage-news-primary .section-wrapper {
  padding: 10px;
  text-align: center; }
  @media (max-width: 599px) {
    .home .section-homepage-news-primary .section-wrapper, .blog .section-homepage-news-primary .section-wrapper {
      width: 100%;
      margin-top: 0; } }
  @media (min-width: 600px) {
    .home .section-homepage-news-primary .section-wrapper, .blog .section-homepage-news-primary .section-wrapper {
      margin-top: 0;
      width: 100%; } }
  @media (min-width: 1024px) {
    .home .section-homepage-news-primary .section-wrapper, .blog .section-homepage-news-primary .section-wrapper {
      width: 1000px;
      margin-top: 0;
      padding: 0; } }
  @media (min-width: 1440px) {
    .home .section-homepage-news-primary .section-wrapper, .blog .section-homepage-news-primary .section-wrapper {
      width: 1400px; } }

@media (min-width: 280px), (max-width: 280px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    width: 100%;
    height: 100%;
    -ms-flex-direction: column;
        flex-direction: column; } }

@media (min-width: 375px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    width: 315px;
    height: 100%;
    -ms-flex-direction: column;
        flex-direction: column; } }

@media (min-width: 440px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    width: 350px;
    height: 100%;
    -ms-flex-direction: column;
        flex-direction: column; } }

@media (min-width: 600px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    border-radius: 10px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-direction: column;
        flex-direction: column;
    width: 393px;
    margin-left: 5px;
    margin-right: 5px; } }

@media (min-width: 825px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    margin-left: 0;
    margin-right: 0; }
    .home .home-news-primary-item:nth-child(2n), .blog .home-news-primary-item:nth-child(2n) {
      margin-left: 15px; } }

@media (min-width: 1024px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    margin-left: 0;
    margin-right: 0;
    width: 393px; }
    .home .home-news-primary-item:nth-child(2n), .blog .home-news-primary-item:nth-child(2n) {
      margin-left: 15px; } }

@media (min-width: 1440px) {
  .home .home-news-primary-item, .blog .home-news-primary-item {
    margin-left: 0;
    margin-right: 0; }
    .home .home-news-primary-item:nth-child(2n), .blog .home-news-primary-item:nth-child(2n) {
      margin-right: 17px;
      margin-left: 17px; }
    .home .home-news-primary-item:nth-child(odd), .blog .home-news-primary-item:nth-child(odd) {
      margin-right: 0; } }

.home .home-news-primary-item .home-news-primary-item-category-color .home-news-primary-item-date a, .blog .home-news-primary-item .home-news-primary-item-category-color .home-news-primary-item-date a {
  color: #ffffff;
  text-decoration: none; }

@media (min-width: 1440px) {
  .home .home-news-primary-item .home-news-primary-item-category-color, .blog .home-news-primary-item .home-news-primary-item-category-color {
    height: 25px; } }

@media (min-width: 600px) {
  .home .home-news-primary-item .home-news-primary-item__picture, .blog .home-news-primary-item .home-news-primary-item__picture {
    height: 240px; }
    .home .home-news-primary-item .home-news-primary-item__picture:before, .blog .home-news-primary-item .home-news-primary-item__picture:before {
      content: none; } }

@media (min-width: 1024px) {
  .home .home-news-primary-item .home-news-primary-item__picture, .blog .home-news-primary-item .home-news-primary-item__picture {
    height: 240px; }
    .home .home-news-primary-item .home-news-primary-item__picture:before, .blog .home-news-primary-item .home-news-primary-item__picture:before {
      content: none; } }

.home .home-news-primary-item .home-news-primary-item-content p, .blog .home-news-primary-item .home-news-primary-item-content p {
  visibility: hidden;
  display: none; }

@media (min-width: 375px) {
  .home .home-news-primary-item .home-news-primary-item-content h3, .blog .home-news-primary-item .home-news-primary-item-content h3 {
    font-size: 14px;
    margin-bottom: 5px; } }

@media (min-width: 600px) {
  .home .home-news-primary-item .home-news-primary-item-content h3, .blog .home-news-primary-item .home-news-primary-item-content h3 {
    font-size: 15px;
    margin: 0; } }

@media (min-width: 600px) {
  .home .home-news-primary-item .home-news-primary-item-content-category, .blog .home-news-primary-item .home-news-primary-item-content-category {
    display: block;
    margin-left: -20px;
    margin-right: -20px; }
    .home .home-news-primary-item .home-news-primary-item-content-category h4, .blog .home-news-primary-item .home-news-primary-item-content-category h4 {
      color: #ffffff !important;
      padding: 5px 20px; } }

@media (min-width: 600px) {
  .home .home-news-primary-item .home-news-primary-item__image-wrap, .blog .home-news-primary-item .home-news-primary-item__image-wrap {
    -ms-flex: 0 0 240px;
        flex: 0 0 240px; } }

@media (min-width: 600px) {
  .home .home-news-primary-item .home-news-primary-item-date, .blog .home-news-primary-item .home-news-primary-item-date {
    margin-top: 5px;
    margin-bottom: 5px;
    -ms-flex-order: 0;
        order: 0;
    margin-left: 20px; } }

@media (max-width: 599px) {
  .home .home-news-primary-item .home-news-primary-item-date, .blog .home-news-primary-item .home-news-primary-item-date {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-lefT: 20px; } }

@media (max-width: 374px) {
  .home .home-news-primary-item .home-news-primary-item-date, .blog .home-news-primary-item .home-news-primary-item-date {
    font-size: 13px; } }

.home .home-news-primary-item .link__readmore, .blog .home-news-primary-item .link__readmore {
  font-family: 'Clash', Arial, sans-serif;
  line-height: 1.57;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal; }
  @media (min-width: 1440px) {
    .home .home-news-primary-item .link__readmore, .blog .home-news-primary-item .link__readmore {
      margin-top: 5px; } }
  @media (max-width: 280px) {
    .home .home-news-primary-item .link__readmore, .blog .home-news-primary-item .link__readmore {
      line-height: 1.37; } }
  @media (min-width: 600px) {
    .home .home-news-primary-item .link__readmore, .blog .home-news-primary-item .link__readmore {
      display: block;
      color: black; } }

.FAQ h1 {
  color: #000000;
  text-shadow: none;
  margin-bottom: 25px; }

.FAQ .FAQ-content {
  padding: 45px 25px 50px;
  position: relative;
  /* view forum button */ }
  .FAQ .FAQ-content h4 {
    color: #414243; }
  .FAQ .FAQ-content h4, .FAQ .FAQ-content b {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 15px;
    font-weight: bolder;
    text-shadow: none; }
  .FAQ .FAQ-content a:hover {
    color: #000; }
  .FAQ .FAQ-content .FAQ-icon {
    text-align: center;
    height: 80px; }
    .FAQ .FAQ-content .FAQ-icon img {
      height: 100%; }
  .FAQ .FAQ-content .button-primary {
    margin-top: 25px; }
  .FAQ .FAQ-content .FAQ-faq {
    border-bottom: 2px solid #f1f1f1; }
    .FAQ .FAQ-content .FAQ-faq p, .FAQ .FAQ-content .FAQ-faq li, .FAQ .FAQ-content .FAQ-faq a {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
      font-size: 15px;
      color: #7d7d7d;
      transition: color 200ms ease-out; }
    .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item {
      border-top: 2px solid #f1f1f1;
      overflow: hidden; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question {
        position: relative;
        cursor: pointer;
        padding: 15px 0;
        transition: opacity 0.2s ease-out; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question h4 {
          width: 85%;
          margin: 0; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-plus, .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-minus {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          background-color: #e6e6e6;
          border-radius: 20px;
          width: 25px;
          height: 25px;
          text-align: center;
          padding: 7px;
          transition: all 250ms ease-out; }
          .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-plus svg, .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-minus svg {
            display: inline-block;
            height: 14px;
            width: 14px; }
            .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-plus svg path, .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-minus svg path {
              fill: #ffffff; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question .FAQ-svg-container-minus {
          display: none; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer {
        height: 0;
        position: relative; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content {
          position: absolute;
          box-sizing: border-box; }
          .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content p {
            margin-top: 10px; }
          .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content:after {
            content: '';
            display: block;
            height: 25px; }
          .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content strong {
            font-weight: bolder; }
          .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content img {
            width: 80%;
            margin: 9px 0;
            border-radius: 10px; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer p:last-child {
          margin-bottom: 0; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item:hover .svg-container {
        background-color: #000000; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item.is-open {
        opacity: 1; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item.is-open h4 {
          color: #ff9c00; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item.is-open .FAQ-svg-container-plus {
          display: none; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item.is-open .FAQ-svg-container-minus {
          display: block;
          background-color: #ff9c00; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item.notactive .FAQ-question {
        opacity: 0.5; }

@media (min-width: 600px) {
  .FAQ h1 {
    font-size: 27px;
    line-height: 1; }
  .FAQ .FAQ-content {
    padding: 50px 60px; }
    .FAQ .FAQ-content .FAQ-icon {
      height: 90px; }
    .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content img {
      width: 40%;
      margin: 10px 20px 10px 0; } }

@media (min-width: 1024px), (min-width: 1440px) {
  .FAQ {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 70px !important; }
    .FAQ h1 {
      font-size: 36px;
      margin-bottom: 30px; }
    .FAQ .FAQ-content {
      padding: 0; }
      .FAQ .FAQ-content h4 {
        font-size: 18px;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
      .FAQ .FAQ-content p:first-child {
        margin-top: 0; }
      .FAQ .FAQ-content p, .FAQ .FAQ-content li, .FAQ .FAQ-content a {
        font-size: 18px; }
      .FAQ .FAQ-content .FAQ-icon {
        height: 100px; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question {
        padding: 25px 0; }
        .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-question h4 {
          margin: 0; }
      .FAQ .FAQ-content .FAQ-faq .FAQ-faq-item .FAQ-answer .FAQ-answer-content img {
        width: 40%;
        margin: 10px 20px 10px 0; } }

/* body {
	overflow: hidden;
} */
.popup-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  overflow-x: hidden;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch; }

.popup-background {
  position: fixed;
  width: 100%;
  height: 9999px;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  opacity: 0;
  z-index: 999; }

.popup-container {
  position: absolute;
  left: 5%;
  width: 90%;
  max-width: 860px; }

.popup-letter {
  position: relative;
  display: block;
  z-index: 1001;
  padding-bottom: 100px; }

.popup-language-selector, .js-multilanguage .multilanguage-language-selector {
  position: relative;
  padding: 25px 0;
  font-size: 0;
  text-align: center; }
  .popup-language-selector a, .js-multilanguage .multilanguage-language-selector a, .popup-language-selector span, .js-multilanguage .multilanguage-language-selector span {
    display: inline-block;
    color: #adadad;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    text-decoration: none;
    font-size: 12px;
    margin: 0 10px;
    transition: all 250ms ease-out;
    -webkit-font-smoothing: auto; }
    .popup-language-selector a:hover, .js-multilanguage .multilanguage-language-selector a:hover, .popup-language-selector a.selected, .js-multilanguage .multilanguage-language-selector a.selected, .popup-language-selector span:hover, .js-multilanguage .multilanguage-language-selector span:hover, .popup-language-selector span.selected, .js-multilanguage .multilanguage-language-selector span.selected {
      color: #ffffff; }
    .popup-language-selector a.notactive, .js-multilanguage .multilanguage-language-selector a.notactive, .popup-language-selector span.notactive, .js-multilanguage .multilanguage-language-selector span.notactive {
      opacity: 0.5; }
  .popup-language-selector span, .js-multilanguage .multilanguage-language-selector span {
    display: none; }

.popup-content {
  position: relative;
  border-radius: 10px;
  display: block; }
  .popup-content .popup-header {
    position: relative;
    background-image: url("../img/letter-header-bg.png");
    background-size: cover;
    height: 117px;
    border-radius: 10px 10px 0 0;
    text-align: center; }
    .popup-content .popup-header .popup-header-assets {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 100%;
      margin: 0 auto;
      display: block; }
    .popup-content .popup-header .popup-header-prince {
      position: absolute;
      height: 127px;
      width: auto;
      left: 3%;
      bottom: 0; }
    .popup-content .popup-header .popup-header-knight {
      position: absolute;
      height: 102px;
      width: auto;
      right: 3%;
      bottom: 0; }
    .popup-content .popup-header .popup-header-logo {
      position: absolute;
      height: auto;
      width: 134px;
      margin-left: -67px;
      left: 50%;
      bottom: -24px; }
    .popup-content .popup-header .icon-close {
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;
      z-index: 20; }
      .popup-content .popup-header .icon-close svg {
        width: 20px;
        height: 20px; }
        .popup-content .popup-header .icon-close svg path {
          fill: #ffffff;
          transition: all 250ms ease-out; }
      .popup-content .popup-header .icon-close:hover svg path {
        fill: #ffab18; }
  .popup-content .popup-content-inner {
    border-radius: 0 0 10px 10px;
    background-color: #ffffff;
    padding: 55px 35px 223px;
    color: #7d7d7d;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    line-height: 1.5;
    display: none; }
    .popup-content .popup-content-inner p:last-of-type {
      margin-bottom: 5px; }
    .popup-content .popup-content-inner.active {
      display: block; }
    .popup-content .popup-content-inner a {
      color: #ffab18; }
      .popup-content .popup-content-inner a:hover {
        text-decoration: none; }
  .popup-content h1 {
    font-size: 18px;
    color: #000000;
    line-height: 1.3;
    text-shadow: none;
    letter-spacing: -1px; }
  .popup-content h2 {
    margin-top: 0;
    font-size: 18px;
    line-height: 1;
    color: #363636;
    text-shadow: none;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
  .popup-content h4 {
    font-size: 14px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    margin-top: 0;
    margin-bottom: 5px; }
  .popup-content .popup-letter-seal {
    position: absolute;
    bottom: -75px;
    left: 50%; }
    .popup-content .popup-letter-seal img {
      width: 120px;
      margin-left: -60px; }

.popup-close-cta {
  display: block;
  width: 100%;
  margin-top: 137px;
  text-align: center;
  color: #ffffff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  font-size: 12px;
  text-decoration: underline; }

@media (min-width: 900px) {
  .popup-container {
    left: 50%;
    margin-left: -430px;
    top: 100px; }
  .popup-language-selector, .js-multilanguage .multilanguage-language-selector {
    padding: 25px 0 35px;
    text-align: right; }
    .popup-language-selector span, .js-multilanguage .multilanguage-language-selector span {
      display: inline-block; }
  .popup-content .popup-header {
    height: 165px; }
    .popup-content .popup-header .popup-header-assets {
      max-width: 571px; }
    .popup-content .popup-header .popup-header-prince {
      right: -5px;
      left: inherit;
      height: 188px; }
    .popup-content .popup-header .popup-header-knight {
      left: 15px;
      right: inherit;
      height: 183px; }
    .popup-content .popup-header .popup-header-logo {
      width: 232px;
      bottom: -42px;
      margin-left: -116px; }
    .popup-content .popup-header .icon-close {
      right: 20px;
      top: 20px; }
  .popup-content .popup-content-inner {
    padding-bottom: 145px;
    padding-right: 80px;
    padding-left: 80px;
    padding-top: 90px; }
  .popup-content h1 {
    font-size: 24px;
    margin-bottom: 35px; }
  .popup-content h2 {
    font-size: 18px; }
  .popup-content .popup-letter-seal {
    position: absolute;
    bottom: -75px;
    left: inherit;
    right: 146px; }
    .popup-content .popup-letter-seal img {
      width: 144px;
      margin-left: 0; }
  .popup-close-cta {
    display: none; } }

.content-wrapper {
  background-color: #f7f7f7;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative; }
  @media (min-width: 1024px) {
    .content-wrapper {
      -ms-flex-direction: row;
          flex-direction: row;
      -ms-flex-order: revert;
          order: revert; } }

.home, .blog,
.article {
  background-color: #f7f7f7;
  -ms-flex: 0 1 auto;
      flex: 0 1 auto;
  z-index: 1; }
  @media (min-width: 1024px) {
    .home, .blog,
    .article {
      margin-left: auto;
      margin-right: auto; } }

.sidebar {
  background-color: #e9e9e9;
  z-index: 0; }
  @media (min-width: 1024px) {
    .sidebar {
      -ms-flex: 0 0 395px;
          flex: 0 0 395px; } }

.sidebar .BlogDetail-Side {
  -ms-flex: none;
      flex: none; }

.BlogDetail-Side {
  display: inline-block;
  margin: 0;
  padding-bottom: 30px;
  vertical-align: top;
  width: 100%; }

.BlogDetail-Side-title {
  color: #363636;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  font-size: 24px;
  letter-spacing: -.3px;
  line-height: 1;
  margin: 30px auto 0;
  max-width: 302px;
  padding: 0;
  position: relative;
  text-align: center;
  text-shadow: none; }
  @media (min-width: 1024px) {
    .BlogDetail-Side-title {
      margin: 32px auto 0; } }
  @media (min-width: 1440px) {
    .BlogDetail-Side-title {
      margin: 58px auto 0; } }

.BlogDetail-Side-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 27px auto 0;
  max-width: 322px;
  padding: 0; }
  .BlogDetail-Side-list li {
    display: inline-block;
    margin: 0 0 0 14px;
    position: relative; }
    @media (min-width: 375px) {
      .BlogDetail-Side-list li {
        margin: 0 0 0 15px; } }
    .BlogDetail-Side-list li:first-child, .BlogDetail-Side-list li:nth-child(4n) {
      margin-left: 0; }
    .BlogDetail-Side-list li:nth-child(n + 4) {
      margin-top: 15px; }
    .BlogDetail-Side-list li a {
      cursor: pointer;
      display: inline-block;
      height: 95px;
      padding: 0 25px;
      text-align: center;
      transition: all 550ms ease-out;
      width: 95px;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
      transition: all 250ms ease-out 0ms; }
      .BlogDetail-Side-list li a:hover {
        transform: scale(1.1); }

.BlogDetail-Side-list .BlogDetail-Side-svg-wrapper {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  vertical-align: middle; }

.BlogDetail-Side-list .icon-facebook,
.BlogDetail-Side-list .icon-instagram,
.BlogDetail-Side-list .icon-reddit,
.BlogDetail-Side-list .icon-twitch,
.BlogDetail-Side-list .icon-youtube,
.BlogDetail-Side-list .icon-wikia,
.BlogDetail-Side-list .icon-lobi,
.BlogDetail-Side-list .icon-wechat,
.BlogDetail-Side-list .icon-weibo,
.BlogDetail-Side-list .icon-youku {
  height: 35px;
  width: 35px; }

.article {
  position: relative;
  transition: all linear 150ms; }
  .article.multiLanguage-menu-up {
    padding-top: 100px; }
  .article__meta {
    color: white;
    display: block;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 14px;
    padding: 16px 30px;
    position: relative;
    text-decoration: none;
    width: 100%; }
    @media (min-width: 1024px) {
      .article__meta {
        position: absolute;
        top: 0;
        z-index: 2; } }
    .article__meta span {
      margin-right: 10px; }
    .article__meta time {
      opacity: .6; }
  .article h1 {
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: -1px;
    margin: 12px 0 20px;
    color: #414243;
    text-shadow: none; }
    @media (min-width: 1024px) {
      .article h1 {
        font-size: 22px; } }
  .article .wrapper {
    margin: 0 auto;
    padding: 30px 25px 0;
    z-index: 1;
    background: transparent;
    /*
          p:first-of-type{
              margin-top: 0;
          } */ }
    @media (min-width: 1440px) {
      .article .wrapper {
        margin-top: -130px;
        padding-left: 4%;
        padding-right: 4%; } }
    @media (min-width: 1024px) {
      .article .wrapper {
        padding-left: 10%;
        padding-right: 10%;
        margin-top: -55px; } }
    @media (min-width: 600px) and (max-width: 799px) {
      .article .wrapper {
        padding-left: 5%;
        padding-right: 5%; } }
    @media (min-width: 800px) and (max-width: 1023px) {
      .article .wrapper {
        margin-top: -100px;
        padding-left: 10%;
        padding-right: 10%; } }
    @media (max-width: 599px) {
      .article .wrapper {
        margin-top: -100px; } }
    .article .wrapper .blog-content {
      /* This is a bit hack-ish. But forces wrongly formated CMS articles to look nicer... */ }
      .article .wrapper .blog-content h1, .article .wrapper .blog-content h2, .article .wrapper .blog-content h3, .article .wrapper .blog-content h4, .article .wrapper .blog-content h5 {
        color: #000;
        text-shadow: none;
        display: block;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
        font-weight: normal;
        margin: 16px auto;
        line-height: 22px; }
      .article .wrapper .blog-content h1 {
        font-size: 28px; }
      .article .wrapper .blog-content h2 {
        font-size: 22px; }
      .article .wrapper .blog-content h3 {
        font-size: 18px; }
      .article .wrapper .blog-content h4 {
        font-size: 16px; }
      .article .wrapper .blog-content h5 {
        font-size: 12px;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
        color: #000; }
      .article .wrapper .blog-content a {
        text-decoration: underline; }
        .article .wrapper .blog-content a:hover {
          text-decoration: none; }
      .article .wrapper .blog-content div {
        color: #858585;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
        font-size: 16px;
        line-height: 1.4; }
      .article .wrapper .blog-content table {
        width: 100%;
        font-size: 15px;
        font-family: "ProximaNova-Regular", Arial, sans-serif;
        border-spacing: 0;
        border-collapse: collapse;
        color: #000; }
        @media (max-width: 600px) {
          .article .wrapper .blog-content table {
            font-size: 11px; } }
        .article .wrapper .blog-content table thead tr th {
          border: 1px solid #989898;
          text-align: center;
          padding: 8px;
          font-weight: 900; }
          @media (min-width: 1px) and (max-width: 490px) {
            .article .wrapper .blog-content table thead tr th {
              padding: 0; } }
        .article .wrapper .blog-content table tr td {
          border: 1px solid #989898;
          text-align: center;
          padding: 8px; }
          .article .wrapper .blog-content table tr td a {
            text-decoration: none;
            color: #000; }
          @media (min-width: 1px) and (max-width: 490px) {
            .article .wrapper .blog-content table tr td {
              padding: 0; } }
    .article .wrapper a {
      color: #ffab18;
      text-decoration: none; }
      .article .wrapper a:hover {
        text-decoration: none; }
    .article .wrapper p, .article .wrapper iframe, .article .wrapper blockquote {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
      margin: 16px auto; }
    .article .wrapper iframe {
      max-width: 100%;
      width: calc(100vw - 50px);
      height: 50vw; }
    .article .wrapper blockquote {
      font-size: 24px;
      color: #414243;
      line-height: 1.3;
      text-align: center; }
    .article .wrapper p, .article .wrapper li {
      font-size: 14px;
      color: #000;
      line-height: 22px; }
    .article .wrapper img {
      max-width: 100%;
      border-radius: 5px;
      display: block;
      margin: 0 auto; }
    .article .wrapper li {
      margin: 5px;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
    .article .wrapper ul {
      margin-bottom: 40px;
      margin-left: 1em;
      padding-left: 0; }
  .article .share {
    padding-top: 20px;
    padding-bottom: 35px;
    font-size: 12px;
    color: #858585;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
    .article .share .share-item {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      cursor: pointer; }
  .article .links {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-top: 40px;
    padding-bottom: 40px;
    padding-top: 15px;
    /*the previous entry is on the right side */ }
    @media (min-width: 600px) {
      .article .links {
        width: 100%;
        padding-left: 10%;
        padding-right: 10%; } }
    @media (min-width: 1024px) {
      .article .links {
        width: 100%;
        padding-left: 15%;
        padding-right: 15%; } }
    @media (min-width: 1440px) {
      .article .links {
        width: 100%;
        padding-left: 20%;
        padding-right: 20%; } }
    @media (max-width: 599px) {
      .article .links span {
        display: none; } }
    .article .links .next {
      padding: 15px 15px 15px 0; }
    .article .links .prev {
      padding: 15px 0 15px 15px; }
    .article .links .disabled-link {
      pointer-events: none; }
      .article .links .disabled-link span {
        color: #e4e4e4; }
      .article .links .disabled-link .icon svg path {
        fill: #e4e4e4; }
        .article .links .disabled-link .icon svg path:hover {
          color: #fb9a00; }
      .article .links .disabled-link .icon-prev {
        transform: rotate(180deg); }
    .article .links a {
      display: inline-block;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
      text-decoration: none;
      color: #858585;
      font-size: 16px;
      transition: color 250ms; }
      .article .links a:hover {
        color: #656565; }
    .article .links .button-primary {
      margin-top: 35px;
      text-align: center; }
    .article .links .prev {
      text-align: right; }
    .article .links .mobile-only {
      display: inline-block; }
    .article .links .icon {
      position: relative;
      display: inline-block;
      width: 33px;
      height: 33px;
      border-radius: 30px;
      color: #ffffff;
      text-align: center;
      font-size: 16px;
      line-height: 33px;
      transition: background-color 250ms ease-out; }
      .article .links .icon svg {
        display: inline-block;
        vertical-align: middle;
        width: 41px;
        height: 29px; }
        .article .links .icon svg path {
          fill: #ffab18; }
      .article .links .icon.icon-prev {
        margin-left: 20px;
        transform: rotate(180deg); }
        .article .links .icon.icon-prev svg {
          margin-left: 2px; }
      .article .links .icon.icon-next {
        margin-right: 20px; }
        .article .links .icon.icon-next svg {
          margin-bottom: 3px;
          margin-right: 2px; }
  @media (min-width: 600px) {
    .article .wrapper {
      padding-bottom: 35px; }
      .article .wrapper iframe {
        width: 600px;
        height: 295px; }
      .article .wrapper blockquote {
        width: 75%;
        margin: 0 auto; } }
  @media (min-width: 1024px) {
    .article {
      padding: 0 20px 0 0;
      width: 100%; }
      .article h3, .article h4 {
        display: inline-block;
        vertical-align: middle;
        line-height: 18px;
        margin: 0; }
      .article h3 {
        font-size: 16px; }
      .article .wrapper {
        padding: 0 90px 90px; }
        .article .wrapper h1 {
          margin-bottom: 30px;
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: -1.1px; }
        .article .wrapper .blog-content h1 {
          font-size: 28px; }
        .article .wrapper .blog-content h2 {
          font-size: 22px; }
        .article .wrapper .blog-content h3 {
          font-size: 18px; }
        .article .wrapper .blog-content h4 {
          font-size: 16px; }
        .article .wrapper .blog-content h5 {
          font-size: 12px; }
        .article .wrapper iframe {
          width: 720px;
          height: 407px; }
        .article .wrapper .screenshots {
          margin: 30px auto;
          font-size: 0;
          text-align: left; }
          .article .wrapper .screenshots img {
            display: inline-block;
            width: 345px;
            margin: 0 15px; }
            .article .wrapper .screenshots img:nth-child(odd) {
              margin-left: 0; }
            .article .wrapper .screenshots img:nth-child(even) {
              margin-right: 0; }
      .article .links span {
        color: #ffab18;
        display: inline; }
        .article .links span:hover {
          color: #fb9a00; } }
  @media (min-width: 1440px) {
    .article {
      padding: 0 20px 0 0;
      width: 1400px; }
      .article h3, .article h4 {
        display: inline-block;
        vertical-align: middle;
        line-height: 18px;
        margin: 0; }
      .article h3 {
        font-size: 16px; }
      .article .wrapper {
        padding: 0 90px 90px; }
        .article .wrapper h1 {
          margin-bottom: 30px;
          font-size: 44px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: -1.1px; }
        .article .wrapper .blog-content h1 {
          font-size: 28px; }
        .article .wrapper .blog-content h2 {
          font-size: 22px; }
        .article .wrapper .blog-content h3 {
          font-size: 18px; }
        .article .wrapper .blog-content h4 {
          font-size: 16px; }
        .article .wrapper .blog-content h5 {
          font-size: 12px; }
        .article .wrapper iframe {
          width: 720px;
          height: 407px; }
        .article .wrapper .screenshots {
          margin: 30px auto;
          font-size: 0;
          text-align: left; }
          .article .wrapper .screenshots img {
            display: inline-block;
            width: 345px;
            margin: 0 15px; }
            .article .wrapper .screenshots img:nth-child(odd) {
              margin-left: 0; }
            .article .wrapper .screenshots img:nth-child(even) {
              margin-right: 0; }
      .article .links span {
        display: inline; } }

.article-hero__picture {
  border-radius: 5px;
  display: block;
  overflow: hidden;
  position: relative;
  margin-left: auto; }
  @media (max-width: 375px) and (max-width: 599px) {
    .article-hero__picture {
      width: 100%; } }
  @media (min-width: 1024px) {
    .article-hero__picture {
      width: 100%; } }
  @media (min-width: 1440px) {
    .article-hero__picture {
      width: 607px;
      height: 377px; } }
  @media (min-width: 600px) and (max-width: 1023px) {
    .article-hero__picture {
      width: 100%; } }

.article-hero__img {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.article .image--stack {
  margin-bottom: 0;
  margin-top: 0; }
  .article .image--stack img {
    margin-bottom: 0;
    margin-top: 0; }

.article .imageBlock__wrapper.is-first .pf-figure--stack,
.article .imageBlock__wrapper .pf-figure,
.article .fullImageBlock__wrapper.is-first .pf-figure--stack,
.article .fullImageBlock__wrapper .pf-figure {
  margin-top: 30px; }

.article .imageBlock__wrapper img,
.article .fullImageBlock__wrapper img {
  height: auto;
  width: 100%; }

.article figcaption .title {
  margin: 1rem 0 0 0; }

.article figcaption .author {
  margin: .3rem 0 0 0; }

.article .js-offset-reference {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px; }
  @media (min-width: 600px), (max-width: 1023px) {
    .article .js-offset-reference {
      -ms-flex-direction: row;
          flex-direction: row; } }
  @media (min-width: 1024px) {
    .article .js-offset-reference {
      -ms-flex-direction: row;
          flex-direction: row;
      margin-left: auto; } }
  @media (min-width: 1440px) {
    .article .js-offset-reference {
      -ms-flex-direction: row;
          flex-direction: row; } }
  @media (max-width: 599px) {
    .article .js-offset-reference {
      width: 100%;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-pack: center;
          justify-content: center; } }

.article .hero-image__wrapper {
  background: transparent;
  -ms-flex: 1;
      flex: 1;
  text-align: -webkit-right;
  text-align: -moz-right;
  text-align: -o-right;
  text-align: -ms-right;
  text-align: right; }
  @media (max-width: 375px) and (max-width: 599px) {
    .article .hero-image__wrapper {
      width: 100%;
      margin-left: auto;
      padding-left: 5px;
      padding-right: 5px; } }
  @media (min-width: 1024px) {
    .article .hero-image__wrapper {
      margin-top: -20px; } }
  @media (min-width: 1200px) {
    .article .hero-image__wrapper {
      margin-top: -40px; } }
  @media (min-width: 1440px) {
    .article .hero-image__wrapper {
      margin-top: -40px; } }
  .article .hero-image__wrapper .article-hero__picture {
    border-radius: 10px 10px 10px 10px; }
  .article .hero-image__wrapper img {
    margin: 0;
    border-radius: 10px; }
    @media (max-width: 599px) {
      .article .hero-image__wrapper img {
        height: 100%;
        width: 100%; } }
    @media (min-width: 600px), (max-width: 1023px) {
      .article .hero-image__wrapper img {
        height: 100%;
        width: 100%; } }
    @media (min-width: 1024px) {
      .article .hero-image__wrapper img {
        width: 100%;
        height: 100%; } }
    @media (min-width: 1440px) {
      .article .hero-image__wrapper img {
        height: 377px;
        width: 607px; } }

.article .hero-image__content {
  -ms-flex: 1;
      flex: 1;
  margin-top: 160px; }
  @media (min-width: 600px) and (max-width: 799px) {
    .article .hero-image__content {
      margin-top: 40px; } }
  @media (min-width: 800px) and (max-width: 1023px) {
    .article .hero-image__content {
      margin-top: 80px; } }
  @media (min-width: 1024px) {
    .article .hero-image__content {
      margin-top: 75px; } }
  @media (min-width: 1440px) {
    .article .hero-image__content {
      margin-top: 75px; } }
  @media (max-width: 599px) {
    .article .hero-image__content {
      width: 100%;
      margin-left: auto;
      margin-top: 10px; } }
  .article .hero-image__content p {
    padding-left: 40px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
    @media (max-width: 599px) {
      .article .hero-image__content p {
        padding-left: 5px; } }
  .article .hero-image__content h1 {
    padding-left: 40px; }
    @media (max-width: 599px) {
      .article .hero-image__content h1 {
        padding-left: 5px; } }

.article .image-wrap {
  position: relative; }
  .article .image-wrap .is-still {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0; }
    .article .image-wrap .is-still picture img {
      height: auto;
      margin: 0;
      position: relative;
      width: 100%; }

.article-line-break {
  position: relative;
  display: block; }
  .article-line-break.pad-bottom {
    margin-bottom: 30px; }
  .article-line-break.pad-top {
    margin-top: 30px; }

.article .quoteBlock__wrapper {
  margin: 20px 0;
  white-space: nowrap; }
  .article .quoteBlock__wrapper picture {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 30%; }
  .article .quoteBlock__wrapper img {
    height: auto;
    margin: 0;
    width: 100%; }
  .article .quoteBlock__wrapper blockquote {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    width: 70%; }
  .article .quoteBlock__wrapper .right blockquote {
    padding-right: 1rem; }
  .article .quoteBlock__wrapper .left blockquote {
    padding-left: 1rem; }

@media (max-width: 375px) and (max-width: 599px) {
  .article .wrapper .blog-content {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 20px; } }

@media (min-width: 600px) and (max-width: 1023px) {
  .article .wrapper .blog-content {
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px; } }

@media (min-width: 1024px) {
  .article .wrapper .blog-content {
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 20px; } }

@media (min-width: 1440px) {
  .article .wrapper .blog-content {
    width: 100%;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 10px; } }

.article .wrapper .blog-content .textBlock__wrapper h5 {
  font-size: 16px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }

.article .wrapper .blog-content .textBlock__wrapper ol {
  list-style-position: inside;
  padding-left: 0; }

.article .videoBlock__wrapper {
  margin-top: 20px; }
  .article .videoBlock__wrapper picture img {
    height: auto;
    margin: 0;
    width: 100%; }
  .article .videoBlock__wrapper .article-video {
    position: relative; }
    .article .videoBlock__wrapper .article-video:after {
      background: transparent url("/blog-assets/img/01_btn_play-v3.png") no-repeat center 8px;
      background-size: cover;
      bottom: 15px;
      content: "";
      display: block;
      height: 82px;
      left: 15px;
      opacity: 1;
      pointer-events: none;
      position: absolute;
      transition: opacity 350ms ease-out;
      width: 82px; }
    .article .videoBlock__wrapper .article-video.active:after {
      opacity: 0; }
  .article .videoBlock__wrapper .player-wrapper {
    display: block;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  .article .videoBlock__wrapper figcaption .title {
    margin: 1rem 0 0 0; }
  .article .videoBlock__wrapper figcaption .author {
    margin: .3rem 0 0 0; }

.sidebar-wrapper {
  margin: 0 auto;
  max-width: 865px;
  padding: 30px; }
  @media (min-width: 600px) and (max-width: 1023px) {
    .sidebar-wrapper {
      font-size: 0; } }
  @media (min-width: 1024px) {
    .sidebar-wrapper {
      padding: 120px 30px 10px 30px; } }

.ShareWidget {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  left: 0;
  position: absolute;
  top: 78px;
  transition: width 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 51px; }
  .ShareWidget.open {
    margin: 0 5%;
    width: 90%; }
  .ShareWidget .svg-container {
    display: block;
    position: relative;
    top: 1px;
    width: 54px; }
  .ShareWidget svg {
    fill: white;
    margin: 10px 12px;
    vertical-align: middle; }

.ShareWidget-Message {
  position: absolute;
  z-index: 102;
  width: 100%;
  top: -38px;
  height: 35px;
  text-align: center;
  opacity: 0;
  visibility: hidden; }
  .ShareWidget-Message .ShareWidget-Message--ctn {
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 0 20px;
    border-radius: 5px;
    font: normal 14px/35px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    background-color: #ffa518;
    color: white; }
    .ShareWidget-Message .ShareWidget-Message--ctn:after {
      content: '';
      position: absolute;
      z-index: 102;
      top: 35px;
      left: 0;
      right: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 8px 0 8px;
      border-color: #ffa518 transparent transparent transparent; }
  .ShareWidget-Message.active {
    transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    visibility: visible;
    opacity: 1; }

.ShareWidget-button {
  position: relative;
  background-color: #ffa518;
  z-index: 101;
  transform: translate3d(0, 0, 0);
  width: 51px;
  height: 51px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
  text-align: center;
  line-height: 51px;
  color: #acacac;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  cursor: pointer;
  transition: width 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 500ms ease-out; }
  .no-touch .ShareWidget-button:hover {
    box-shadow: inset 1000px 0 0px rgba(0, 0, 0, 0.1); }
  .ShareWidget-button .ShareWidget-closed {
    width: 100%;
    height: 100%; }
  .ShareWidget-button .icon-share {
    display: block;
    margin: 10px;
    width: 30px;
    height: 30px;
    webkit-filter: drop-shadow(0px 2px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px 2px rgba(0, 0, 0, 0.1)); }
  .ShareWidget-button .ShareWidget-divider {
    -ms-flex: 0 0 1px;
        flex: 0 0 1px;
    width: 1px;
    height: 20px;
    display: inline-block;
    background-color: #acacac;
    vertical-align: middle;
    opacity: 0.3; }
  .ShareWidget-button .ShareWidget-open {
    position: relative;
    width: 0;
    overflow: hidden; }
    .ShareWidget-button .ShareWidget-open svg {
      width: 20px;
      height: 20px;
      fill: #acacac !important; }
      .ShareWidget-button .ShareWidget-open svg path {
        fill: #acacac;
        transition: all 250ms ease-out; }
    .ShareWidget-button .ShareWidget-open .ShareWidget-icon {
      display: inline;
      padding-right: 20px;
      padding-left: 20px;
      position: relative;
      vertical-align: middle;
      cursor: pointer; }
      .ShareWidget-button .ShareWidget-open .ShareWidget-icon:hover svg path {
        fill: #acacac; }
  .ShareWidget-button .ShareWidget-url {
    position: relative;
    margin: 0;
    top: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 11px;
    color: #acacac;
    opacity: 0.5;
    padding: 0 0 0 20px;
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    display: block;
    overflow: hidden; }
    .ShareWidget-button .ShareWidget-url .ShareWidget-url-inner {
      display: inline-block;
      font-size: 14px;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap; }
    .ShareWidget-button .ShareWidget-url:hover {
      color: #8e8e8e; }
  .ShareWidget-button .ShareWidget-copyUrl {
    display: none;
    color: #acacac;
    cursor: pointer;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    font-size: 14px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    padding-left: 20px;
    position: relative;
    transition: color 250ms ease-out;
    vertical-align: middle; }
    .ShareWidget-button .ShareWidget-copyUrl:before {
      content: '';
      display: block;
      width: 1px;
      height: 20px;
      background-color: #acacac;
      vertical-align: middle;
      opacity: 0.3;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
    .ShareWidget-button .ShareWidget-copyUrl:hover {
      color: #acacac; }
  .ShareWidget-button .ShareWidget-hidden {
    display: none; }
  .open .ShareWidget-button {
    background-color: #f7f7f7;
    border-radius: 5px;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
    padding: 0 20px 0 0;
    width: 100%; }
    .open .ShareWidget-button .ShareWidget-closed {
      display: none; }
    .open .ShareWidget-button .ShareWidget-open {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
          flex-direction: row;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: start;
          justify-content: flex-start;
      overflow: hidden;
      text-align: left;
      width: auto; }

.ShareWidget-overlay {
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  top: -50px;
  left: -5%;
  right: -5%;
  width: 110%;
  height: 120%;
  z-index: 100;
  border-radius: 5px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  .open .ShareWidget-overlay {
    display: block; }

@media (min-width: 600px) {
  .ShareWidget.open {
    margin: 0;
    width: 75%; }
  .ShareWidget-button .ShareWidget-url {
    position: relative;
    display: inline;
    margin: 0;
    padding-left: 20px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 11px;
    color: #757575;
    opacity: 0.5; }
    .ShareWidget-button .ShareWidget-url .ShareWidget-url-inner {
      display: inline-block;
      overflow: hidden;
      max-width: 100%;
      vertical-align: middle; }
  .open .ShareWidget-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .open .ShareWidget-overlay {
    display: none; } }

@media (min-width: 1024px), (min-width: 1440px) {
  .ShareWidget {
    top: 120px; }
    .ShareWidget.open {
      margin: 0;
      width: 45%; }
  .ShareWidget-button {
    width: 100%;
    height: 54px; }
    .ShareWidget-button .ShareWidget-closed {
      width: auto; }
    .ShareWidget-button .icon-share {
      float: left;
      margin: 12px 10px 12px 16px; }
    .ShareWidget-button .ShareWidget-url {
      position: relative;
      display: inline;
      margin: 0;
      padding-left: 20px;
      padding-right: 20px;
      vertical-align: middle;
      text-decoration: none;
      font-size: 11px; }
      .ShareWidget-button .ShareWidget-url .ShareWidget-url-inner {
        display: inline-block;
        overflow: hidden;
        max-width: 100%;
        vertical-align: middle; }
    .ShareWidget-button .ShareWidget-copyUrl {
      display: inline-block; }
    .open .ShareWidget-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
  .open .ShareWidget-overlay {
    display: none; } }

.featureBlock__wrapper {
  margin-top: 20px; }
  .featureBlock__wrapper .image-wrap {
    position: relative; }
    .featureBlock__wrapper .image-wrap .is-still {
      position: relative; }

.layout__blog-entry .content-wrapper,
.layout__blog-entry .article {
  background: white; }

.layout__blog-entry .BlogDetail-Side {
  background-color: #e9e9e9; }

@media (min-width: 1024px) {
  .layout__blog-entry .BlogDetail-Side-title {
    margin-top: 64px; } }

.layout__blog-entry .sidebar-wrapper {
  background-color: #f7f7f7; }
  @media (min-width: 600px) {
    .layout__blog-entry .sidebar-wrapper {
      background-color: #e9e9e9; } }
  .layout__blog-entry .sidebar-wrapper .home-news-primary-item-content-category {
    background: none !important; }

.layout__blog-index .section-wrapper {
  padding-top: 0; }

@media (min-width: 1024px) {
  .layout__blog-index .blog .home-news-primary-item:nth-last-child(2) {
    margin-bottom: 30px; } }

@media (min-width: 1220px) {
  .layout__blog-index .blog .home-news-primary-item:nth-last-child(2) {
    margin-bottom: 30px; } }

.svg-icon__facebook {
  fill: red; }

.svg-icon__instagram {
  fill: blue; }

.BlogDetail-Side-svg-wrapper .icon-facebook path {
  fill: #3b5998; }

.BlogDetail-Side-svg-wrapper .icon-instagram path {
  fill: #9b6954; }

.BlogDetail-Side-svg-wrapper .icon-reddit path {
  fill: #ff4500; }

.BlogDetail-Side-svg-wrapper .icon-twitch rect,
.BlogDetail-Side-svg-wrapper .icon-twitch path {
  fill: #6441a5; }

.BlogDetail-Side-svg-wrapper .icon-youtube path {
  fill: #FF0000; }

.BlogDetail-Side-svg-wrapper .icon-wikia path {
  fill: #082346; }

.BlogDetail-Side-svg-wrapper .icon-lobi path {
  fill: #FF6633; }

.BlogDetail-Side-svg-wrapper .icon-wechat path {
  fill: #3cb035; }

.BlogDetail-Side-svg-wrapper .icon-youku path {
  fill: #010101; }

.back-to-blog {
  padding: 26px 0; }
  @media (min-width: 1024px) {
    .back-to-blog {
      padding: 55px 0; } }
  .back-to-blog__cta {
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    text-decoration: none;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center; }
  .back-to-blog svg {
    display: block;
    fill: #7f7f7f;
    height: 10px;
    position: relative;
    width: 10px; }
  .back-to-blog__text {
    color: #7f7f7f;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    margin-left: 10px; }

@media (min-width: 1024px) {
  body.archive .home .home-news-primary-item, body.archive .blog .home-news-primary-item {
    width: calc(33% - 20px); }
    body.archive .home .home-news-primary-item:nth-child(even), body.archive .blog .home-news-primary-item:nth-child(even), body.archive .home .home-news-primary-item:nth-child(odd), body.archive .blog .home-news-primary-item:nth-child(odd) {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 30px; }
    body.archive .home .home-news-primary-item:nth-child(3n - 1), body.archive .blog .home-news-primary-item:nth-child(3n - 1) {
      margin-left: 30px;
      margin-right: 30px;
      margin-bottom: 30px; }
    body.archive .home .home-news-primary-item:nth-last-child(-n+4), body.archive .blog .home-news-primary-item:nth-last-child(-n+4) {
      margin-bottom: 0; } }

/*************************************************
* Clan Details Preloader
*************************************************/
.ClanDetails-preloader {
  position: relative;
  height: 430px;
  width: 100%;
  background-color: #000; }

/*************************************************
* Clan Details Overlay
*************************************************/
.ClanDetails-Overlay {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 250ms ease-out; }
  .ClanDetails-Overlay.active {
    height: 100%;
    opacity: 1; }

/*************************************************
* Clan Details Hero
*************************************************/
.ClanDetails-Hero {
  position: relative;
  overflow: hidden;
  max-height: inherit; }
  .ClanDetails-Hero .Hero-content {
    position: relative;
    width: 88%;
    top: 0;
    margin-top: 110px;
    margin-bottom: 50px;
    color: #ffffff;
    transform: translate3d(0, 0, 0);
    left: 0; }
    .ClanDetails-Hero .Hero-content h1 {
      font-size: 19px;
      letter-spacing: -0.02em;
      margin-bottom: 5px;
      margin-top: -10px; }
  .ClanDetails-Hero .ClanDetails-head--bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0); }
    .ClanDetails-Hero .ClanDetails-head--bg img {
      position: absolute;
      width: 101%;
      height: auto; }
    .ClanDetails-Hero .ClanDetails-head--bg.is-tall img {
      height: 101%;
      width: auto; }
  .ClanDetails-Hero .ClanDetails-HeroInfo {
    opacity: 0;
    transform: translateY(30px); }
  .ClanDetails-Hero .ClanDetails-Hero-Tag {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font: normal 11px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: translateY(30px); }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeCtn {
    display: inline-block;
    width: 55px;
    height: 55px;
    opacity: 0; }
  .ClanDetails-Hero .ClanDetails-Hero-Badge {
    width: 100%;
    height: 100%; }
    .ClanDetails-Hero .ClanDetails-Hero-Badge img {
      width: 100%; }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay {
    position: absolute;
    display: block;
    z-index: 2;
    top: 7px;
    left: 2px;
    right: 0;
    margin: auto;
    width: 30px; }
    .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay span {
      position: absolute;
      z-index: 2;
      display: block;
      top: 2px;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      font: normal 7px "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif; }
    .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay img {
      position: relative;
      display: block;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; }
  .ClanDetails-Hero .ClanDetails-Hero-Box {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    margin-top: 15px;
    padding: 10px;
    display: block;
    font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
    font-size: 8px;
    color: #ffffff; }
    .ClanDetails-Hero .ClanDetails-Hero-Box .ClanDetails-Hero-Box-Text {
      text-align: left;
      display: inline-block;
      vertical-align: middle; }
  .ClanDetails-Hero .ClanDetails-Hero-Box-Subtitle {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    white-space: nowrap; }
  .ClanDetails-Hero .ClanDetails-Hero-Col {
    max-width: 350px;
    margin: 0 auto; }
  .ClanDetails-Hero .ClanDetails-Hero-Col50 {
    display: inline-block;
    width: 50%;
    padding: 10px 8px; }
    .ClanDetails-Hero .ClanDetails-Hero-Col50.noLeftPadding {
      padding-left: 0; }
    .ClanDetails-Hero .ClanDetails-Hero-Col50.noRightPadding {
      padding-right: 0; }
  .ClanDetails-Hero .ClanDetailsHero-Hero-Info {
    font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
    font-size: 8px;
    padding: 0px 8px;
    vertical-align: top;
    margin-top: 5px; }
    .ClanDetails-Hero .ClanDetailsHero-Hero-Info span {
      display: inline-block; }
    .ClanDetails-Hero .ClanDetailsHero-Hero-Info .ClanDetails-Hero-Box-Subtitle {
      font-size: 12px;
      letter-spacing: -0.01em;
      font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
      margin-right: 3px; }
  .ClanDetails-Hero .ClanDetails-Hero-Country {
    opacity: 0;
    transform: translateY(30px); }
    .ClanDetails-Hero .ClanDetails-Hero-Country .ClanDetails-Hero-CountryFlag, .ClanDetails-Hero .ClanDetails-Hero-Country img {
      display: inline-block;
      vertical-align: middle; }
    .ClanDetails-Hero .ClanDetails-Hero-Country img {
      height: 25px;
      margin-right: 10px; }
    .ClanDetails-Hero .ClanDetails-Hero-Country span {
      display: inline-block;
      vertical-align: middle;
      height: 26px;
      line-height: 28px; }
  .ClanDetails-Hero .ClanDetails-Hero-Points, .ClanDetails-Hero .ClanDetails-Hero-Wars {
    margin-top: 5px;
    padding: 20px 10px;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(30px); }
    .ClanDetails-Hero .ClanDetails-Hero-Points img, .ClanDetails-Hero .ClanDetails-Hero-Wars img {
      display: inline-block;
      vertical-align: middle;
      height: 30px;
      margin-right: 15px;
      text-align: right; }
    @media screen and (max-width: 360px) {
      .ClanDetails-Hero .ClanDetails-Hero-Points, .ClanDetails-Hero .ClanDetails-Hero-Wars {
        padding: 20px 6px; }
        .ClanDetails-Hero .ClanDetails-Hero-Points img, .ClanDetails-Hero .ClanDetails-Hero-Wars img {
          margin-right: 6px; } }
    .ClanDetails-Hero .ClanDetails-Hero-Points .ClanDetails-Hero-Box-Subtitle, .ClanDetails-Hero .ClanDetails-Hero-Wars .ClanDetails-Hero-Box-Subtitle {
      font-size: 10px; }

.ClanDetails-ReportButton {
  position: absolute;
  top: 55px;
  right: 5px;
  display: inline-block;
  vertical-align: top;
  color: #ffffff;
  font: normal 16px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  text-decoration: none;
  margin-right: 15px;
  transition: all 250ms ease-out; }
  .ClanDetails-ReportButton:hover {
    color: #ffbe31; }

.ClanDetails-MemberResults {
  position: relative; }
  .ClanDetails-MemberResults .PlayerListItem-wins-container {
    float: left; }
  .ClanDetails-MemberResults span:first-of-type .PlayerListItem {
    border-top: none; }
  .ClanDetails-MemberResults .ClanDetails-LoadMore-Container {
    text-align: center; }
  .ClanDetails-MemberResults .ClanDetails-Empty {
    padding: 60px 10%;
    color: #363636; }
    .ClanDetails-MemberResults .ClanDetails-Empty.ClanDetails-Empty-hidden {
      display: none; }

.ClanDetails-LoadMore {
  text-align: center;
  margin: 40px auto; }
  .ClanDetails-LoadMore.ClanDetails-LoadMore--hidden {
    display: none; }

.ShareWidget {
  top: 90px; }

/*************************************************
* MEDIA TABLET
*************************************************/
@media (min-width: 600px) {
  /*************************************************
  * Clan Details Preloader
  *************************************************/
  .ClanDetails-preloader {
    height: 350px; }
  .ClanDetails-Hero .Hero-content {
    margin-top: 150px;
    margin-bottom: 110px;
    transform: translate3d(0, 0, 0); }
    .ClanDetails-Hero .Hero-content h1 {
      font-size: 36px;
      margin-top: -15px;
      margin-bottom: 15px; }
  .ClanDetails-Hero .ClanDetails-head--bg img {
    width: 120%;
    height: auto; }
  .ClanDetails-Hero .ClanDetails-search-holder {
    margin: 25px auto; }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay {
    top: 12px;
    width: 38px;
    left: 4px; }
    .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay span {
      font-size: 9px; }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeCtn {
    width: 100px;
    height: 100px; }
  .ClanDetails-Hero .ClanDetails-Hero-Tag {
    font-size: 12px;
    margin-top: 16px; }
  .ClanDetails-Hero .ClanDetails-Hero-Box {
    font-size: 9px; }
  .ClanDetails-Hero .ClanDetails-Hero-Points, .ClanDetails-Hero .ClanDetails-Hero-Wars {
    padding: 20px;
    font-size: 15px;
    margin-bottom: 20px; }
    .ClanDetails-Hero .ClanDetails-Hero-Points img, .ClanDetails-Hero .ClanDetails-Hero-Wars img {
      height: 32px; }
    .ClanDetails-Hero .ClanDetails-Hero-Points .ClanDetails-Hero-Box-Subtitle, .ClanDetails-Hero .ClanDetails-Hero-Wars .ClanDetails-Hero-Box-Subtitle {
      font-size: 11px; }
  .ClanDetails-Hero .ClanDetailsHero-Hero-Info {
    font-size: 11px; }
    .ClanDetails-Hero .ClanDetailsHero-Hero-Info .ClanDetails-Hero-Box-Subtitle {
      font-size: 14px;
      margin-right: 5px; }
  .ClanDetails-MemberResults {
    text-align: left; }
  .ShareWidget {
    top: 100px; } }

/*************************************************
* MEDIA DESKTOP
*************************************************/
@media (min-width: 1024px), (min-width: 1440px) {
  /*************************************************
  * Clan Details Preloader
  *************************************************/
  .ClanDetails-preloader {
    height: 450px; }
  .ClanDetails-Hero .Hero-content {
    margin-top: 190px;
    margin-bottom: 70px; }
    .ClanDetails-Hero .Hero-content h1 {
      font-size: 44px;
      margin-bottom: 20px; }
  .ClanDetails-Hero .ClanDetails-search-holder {
    margin: 35px auto;
    padding: 35px 30px;
    font-size: 18px; }
  .ClanDetails-Hero .ClanDetails-head--bg img {
    position: absolute;
    height: auto;
    width: 101%; }
  .ClanDetails-Hero .ClanDetails-Hero-Tag {
    margin-top: 25px;
    margin-bottom: 30px;
    font-size: 16px; }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay {
    width: 45px;
    top: 14px;
    left: 5px; }
    .ClanDetails-Hero .ClanDetails-Hero-BadgeOverlay span {
      font-size: 10px; }
  .ClanDetails-Hero .ClanDetails-Hero-BadgeCtn {
    width: 122px;
    height: 122px; }
  .ClanDetails-Hero .ClanDetails-Hero-Box {
    font-size: 13px;
    margin-top: 10px;
    border-radius: 10px; }
  .ClanDetails-Hero .ClanDetails-Hero-Country {
    padding: 20px;
    margin-bottom: 10px; }
  .ClanDetails-Hero .ClanDetails-Hero-Col {
    max-width: 575px; }
  .ClanDetails-Hero .ClanDetails-Hero-Col50 {
    padding: 0px 10px; }
  .ClanDetails-Hero .ClanDetailsHero-Hero-Info {
    font-size: 12px; }
    .ClanDetails-Hero .ClanDetailsHero-Hero-Info .ClanDetails-Hero-Box-Subtitle {
      font-size: 14px;
      margin-right: 5px; }
  .ClanDetails-Hero .ClanDetails-Hero-Points, .ClanDetails-Hero .ClanDetails-Hero-Wars {
    padding: 30px;
    font-size: 18px;
    line-height: 1.2em;
    margin-bottom: 35px; }
    .ClanDetails-Hero .ClanDetails-Hero-Points .ClanDetails-Hero-Box-Subtitle, .ClanDetails-Hero .ClanDetails-Hero-Wars .ClanDetails-Hero-Box-Subtitle {
      font-size: 18px; }
    .ClanDetails-Hero .ClanDetails-Hero-Points img, .ClanDetails-Hero .ClanDetails-Hero-Wars img {
      height: 47px; }
  .ClanDetails-ReportButton {
    top: 90px;
    right: 20px; }
  .ClanDetails-LoadMore {
    margin: 75px auto 110px; }
  .ShareWidget {
    top: 115px; } }

/* Clan Details when in a popup */
.ClanDetails-TopCta {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 15px;
  transform: translate3d(0, 0, 0); }
  .ClanDetails-TopCta a, .ClanDetails-TopCta .ClanDetails-Close {
    display: inline-block;
    vertical-align: top;
    transition: all 250ms ease-out; }
    .ClanDetails-TopCta a.rollover, .ClanDetails-TopCta .ClanDetails-Close.rollover {
      opacity: .3; }
    .ClanDetails-TopCta a.active, .ClanDetails-TopCta .ClanDetails-Close.active {
      opacity: 1; }
  .ClanDetails-TopCta a {
    position: relative;
    top: 1px;
    color: #ffffff;
    font: normal 16px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    text-decoration: none;
    padding-right: 15px;
    text-shadow: 0px 2px rgba(0, 0, 0, 0.2); }
    .ClanDetails-TopCta a:after {
      content: '';
      position: absolute;
      top: 3px;
      right: 0px;
      height: 12px;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.4); }

.ClanDetails-Close {
  width: 46px;
  height: 46px;
  cursor: pointer;
  text-align: center;
  margin: -10px -14px 0 0; }
  .ClanDetails-Close .icon-close {
    width: 17px;
    height: 17px;
    text-align: right;
    vertical-align: middle;
    margin-top: 10px;
    display: inline-block;
    filter: drop-shadow(0px 2px rgba(0, 0, 0, 0.2)); }

.ClanDetails-Popup {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 100vh;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  position: absolute;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
  z-index: 10000;
  -webkit-overflow-scrolling: touch; }
  .ClanDetails-Popup .ClanDetails {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
    margin: 20px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);
    transition: all 550ms ease-out;
    transition-property: transform, opacity;
    -webkit-mask-image: -webkit-radial-gradient(white, black); }
    .ClanDetails-Popup .ClanDetails.is-loading {
      opacity: 0;
      transform: translate3d(0, 100px, 0); }
    .ClanDetails-Popup .ClanDetails .ClanDetails-Hero .Hero-content {
      margin-bottom: 60px;
      margin-top: 60px;
      padding-left: 5%;
      padding-right: 5%;
      width: 100%; }
    .ClanDetails-Popup .ClanDetails .ClanDetails-Hero .HeroImage {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      overflow: hidden;
      -webkit-mask-image: -webkit-radial-gradient(white, black); }
    .ClanDetails-Popup .ClanDetails .ClanDetails-head--bg {
      border-radius: 10px; }
    .ClanDetails-Popup .ClanDetails .ClanDetails-LoadMore {
      margin: 30px auto; }
  .ClanDetails-Popup .ClanDetails__HeroImage {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0; }
    .ClanDetails-Popup .ClanDetails__HeroImage img {
      display: block;
      height: 100%;
      left: 50%;
      opacity: 0;
      position: absolute;
      transform: scale(1.2) translateX(-50%);
      transform-origin: 0 50%;
      transition: all 400ms ease-out 1s;
      width: auto; }
      @media (min-width: 1024px) {
        .ClanDetails-Popup .ClanDetails__HeroImage img {
          height: auto;
          left: 50%;
          transform: scale(1.2) translate(-50%, -50%);
          transform-origin: 0 0;
          top: 50%;
          width: 100%; } }
    .ClanDetails-Popup .ClanDetails__HeroImage.show img {
      opacity: 1;
      transform: scale(1) translate(-50%, 0); }
      @media (min-width: 1024px) {
        .ClanDetails-Popup .ClanDetails__HeroImage.show img {
          transform: scale(1) translate(-50%, -50%); } }
  .ClanDetails-Popup .ClanDetails-MemberResults {
    background-color: #ffffff; }
  .ClanDetails-Popup .ShareWidget {
    top: 46px; }
  @media only screen and (min-width: 361px) and (max-width: 739px) {
    .ClanDetails-Popup .PlayerListItem {
      padding: 30px 5%; }
      .ClanDetails-Popup .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
        width: 110px; } }
  @media only screen and (max-width: 360px) {
    .ClanDetails-Popup .PlayerListItem {
      padding: 30px 5%; }
      .ClanDetails-Popup .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
        width: 74px; } }
  @media (min-width: 600px) {
    .ClanDetails-Popup .ClanDetails .ClanDetails-Hero {
      min-height: 734px; }
      .ClanDetails-Popup .ClanDetails .ClanDetails-Hero .Hero-content {
        margin-top: 120px;
        margin-bottom: 120px;
        padding-left: 0;
        padding-right: 0; }
    .ClanDetails-Popup .ShareWidget {
      top: 50px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .ClanDetails-Popup .ClanDetails {
      border-radius: 20px;
      margin: 50px auto 0;
      max-width: 1024px;
      width: 90%; }
      .ClanDetails-Popup .ClanDetails .ClanDetails-Hero {
        min-height: 0; }
        .ClanDetails-Popup .ClanDetails .ClanDetails-Hero .Hero-content {
          margin-top: 120px;
          margin-bottom: 120px; }
      .ClanDetails-Popup .ClanDetails .ClanDetails-head--bg {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px; }
      .ClanDetails-Popup .ClanDetails .ClanDetails-TopCta {
        top: 24px;
        right: 30px; }
      .ClanDetails-Popup .ClanDetails .ClanDetails-LoadMore {
        margin: 40px auto; }
    .ClanDetails-Popup .ShareWidget {
      top: 44px; } }
  @media only screen and (min-width: 1120px) {
    .ClanDetails-Popup .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
      font-size: 18px;
      width: 150px; } }

.PlayerListItem {
  transition: all 350ms ease-out;
  transition-property: opacity, transform; }

.ClanDetails-Hero .Hero-content > h1,
.ClanDetails-Hero .ClanDetails-Hero-BadgeCtn,
.ClanDetails-Hero .ClanDetails-Hero-Tag,
.ClanDetails-Hero .ClanDetails-Hero-Box,
.ClanDetails-Hero .ClanDetails-Hero-Points,
.ClanDetails-Hero .ClanDetails-Hero-Wars,
.ClanDetails-Hero .ClanDetails-HeroInfo.left,
.ClanDetails-Hero .ClanDetails-HeroInfo.right {
  transition: all 600ms ease-out;
  transition-property: opacity, transform; }

.ClanDetails-Hero .Hero-content > h1 {
  transition-delay: 250ms; }

.ClanDetails-Hero .ClanDetails-Hero-BadgeCtn {
  transition-delay: 250ms; }

.ClanDetails-Hero .ClanDetails-Hero-Tag {
  transition-delay: 400ms; }

.ClanDetails-Hero .ClanDetails-Hero-Box {
  transition-delay: 500ms; }

.ClanDetails-Hero .ClanDetails-Hero-Points {
  transition-delay: 700ms; }

.ClanDetails-Hero .ClanDetails-Hero-Wars {
  transition-delay: 900ms; }

.ClanDetails-Hero .ClanDetails-HeroInfo.left {
  transition-delay: 1200ms; }

.ClanDetails-Hero .ClanDetails-HeroInfo.right {
  transition-delay: 1400ms; }

.ClanDetails-Hero.show .Hero-content > h1,
.ClanDetails-Hero.show .ClanDetails-Hero-BadgeCtn,
.ClanDetails-Hero.show .ClanDetails-Hero-Tag,
.ClanDetails-Hero.show .ClanDetails-Hero-Box,
.ClanDetails-Hero.show .ClanDetails-Hero-Points,
.ClanDetails-Hero.show .ClanDetails-Hero-Wars,
.ClanDetails-Hero.show .ClanDetails-HeroInfo.left,
.ClanDetails-Hero.show .ClanDetails-HeroInfo.right {
  opacity: 1;
  transform: translateY(0); }

/********************
* SEARCHBAR
********************/
.SearchBar {
  position: relative;
  margin: 20px auto;
  padding: 22px 25px 21px 22px;
  border-radius: 5px;
  background-color: #ffffff;
  display: block;
  text-align: left;
  width: 300px; }
  .SearchBar:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 5px;
    background-color: #f3781e;
    opacity: 0;
    transform: scale(0.9);
    transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .SearchBar .SearchBar-search, .SearchBar path, .SearchBar .SearchBar-divider {
    transition: all 250ms ease-out; }
  .SearchBar.focused:after {
    opacity: 1;
    transform: scale(1); }
  .SearchBar.focused .SearchBar-search {
    color: #363636; }
  .SearchBar.focused .SearchBar-divider {
    opacity: 0; }
  .SearchBar.focused .icon-search path {
    fill: #fff; }
  .SearchBar form {
    display: inline; }
  .SearchBar .SearchBar-submit {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    height: 100%;
    width: 73px;
    cursor: pointer; }
    .SearchBar .SearchBar-submit svg {
      position: absolute;
      top: 0;
      left: 10px;
      right: 0;
      bottom: 0;
      margin: auto; }
  .SearchBar .SearchBar-search {
    outline: none;
    border: 0;
    font-size: 15px;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    color: #acacac;
    width: 198px;
    margin-right: 10px; }
  .SearchBar .SearchBar-divider {
    background-color: #acacac;
    width: 1px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    position: relative; }
  .SearchBar .icon-search {
    position: relative;
    z-index: 3;
    margin-left: 19px;
    width: 19px; }
    .SearchBar .icon-search path {
      fill: #363636; }

.SearchBar-error {
  position: absolute;
  left: 50%;
  top: -75px;
  width: 210px;
  height: 65px;
  margin-left: -105px;
  text-align: center;
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .SearchBar-error .SearchBar-error--ctn {
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 16px 20px 0;
    border-radius: 5px;
    font: normal 14px/16px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    background-color: #dc563f;
    color: #ffffff; }
    .SearchBar-error .SearchBar-error--ctn:after {
      content: '';
      position: absolute;
      z-index: 102;
      top: 100%;
      left: 0;
      right: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 8px 0 8px;
      border-color: #dc563f transparent transparent transparent; }

/********************
* MEDIA TABLET
********************/
@media (min-width: 600px) {
  .SearchBar {
    margin: 25px auto;
    padding: 26px 25px 27px 30px; }
    .SearchBar:after {
      width: 60px;
      height: 60px;
      right: 7px; }
    .SearchBar .SearchBar-search {
      width: 188px; }
    .SearchBar .SearchBar-submit {
      width: 80px; }
      .SearchBar .SearchBar-submit svg {
        left: 7px; } }

/********************
* MEDIA DESKTOP + XL
********************/
@media (min-width: 1024px), (min-width: 1440px) {
  .SearchBar {
    margin: 35px auto;
    padding: 34px 30px;
    font-size: 18px;
    width: 390px; }
    .SearchBar .SearchBar-search {
      width: 260px; }
    .SearchBar:after {
      width: 71px;
      height: 71px;
      right: 10px; }
    .SearchBar .SearchBar-submit {
      width: 80px; }
      .SearchBar .SearchBar-submit svg {
        left: -10px; }
    .SearchBar .icon-search {
      width: 22px; } }

/********************
* SEARCH
********************/
.ClanLanding .BlockBackground.animated {
  transform: scale(1);
  opacity: 1; }

.ClanLanding .BlockBackground.height-first img {
  width: auto;
  height: 101%; }

.ClanLanding .ContentBlock {
  height: 130px;
  width: 210px;
  top: 0;
  opacity: 1;
  margin: 0 auto; }

.ClanLanding .ColoredButton {
  margin-top: 20px; }

.ClanLandingSearch {
  height: 475px; }

.ClanLandingSearch-Hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.ClanLandingSearch {
  position: relative;
  overflow: hidden;
  background-color: #000; }
  .ClanLandingSearch .SearchBar, .ClanLandingSearch h2 {
    position: relative;
    z-index: 2; }
  .ClanLandingSearch h2 {
    padding-top: 120px;
    text-align: center; }

.ClanLandingSearch-browse {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 50px; }
  .ClanLandingSearch-browse svg {
    display: inline-block;
    margin-right: 8px;
    width: 22px;
    height: 22px;
    fill: #fff; }
  .ClanLandingSearch-browse .or {
    display: block;
    margin: 22px 0 15px;
    text-transform: uppercase;
    text-decoration: none; }
  .ClanLandingSearch-browse span {
    display: inline-block;
    vertical-align: middle;
    font: normal 14px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
    text-decoration: underline;
    color: #ffffff;
    white-space: nowrap; }
  .ClanLandingSearch-browse svg, .ClanLandingSearch-browse span {
    transition: all 250ms ease-out; }
  .ClanLandingSearch-browse a span {
    text-decoration: none;
    border-bottom: 1px solid white;
    transition: border 200ms ease-out; }
  .ClanLandingSearch-browse a:hover span {
    border-bottom: 1px solid rgba(255, 255, 255, 0); }

.ClanLandingSearch-push {
  position: relative;
  display: table;
  z-index: 2;
  width: 300px;
  margin: 0 auto; }
  .ClanLandingSearch-push picture, .ClanLandingSearch-push p {
    display: table-cell;
    vertical-align: middle; }
  .ClanLandingSearch-push picture {
    width: 45px; }
    .ClanLandingSearch-push picture img {
      width: 100%; }
  .ClanLandingSearch-push p {
    padding-left: 20px;
    font: normal 14px/15px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    color: #ffffff; }

/********************
* FEATURED CLAN
********************/
.ClanLandingFeatured {
  position: relative;
  height: 475px;
  background-color: #000;
  overflow: hidden; }

.ClanLandingFeatured-Hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/***************************
* FEATURED CLAN CONTENT
***************************/
.ClanLandingFeatured-Ctn {
  position: relative;
  z-index: 2;
  width: 70%;
  height: 100%;
  margin: 0 auto;
  text-align: center; }

.ClanLandingFeatured-Clan > span, .ClanLandingFeatured-Clan > p {
  display: block;
  color: #ffffff;
  text-shadow: 0 2px rgba(0, 0, 0, 0.1); }

.ClanLandingFeatured-Clan > span {
  margin-bottom: 5px;
  font: normal 12px "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif; }

.ClanLandingFeatured-Clan > p {
  margin-top: 10px;
  font: normal 14px/15px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }

.ClanLandingFeatured-Clan > p a {
  transition: border 200ms ease-out;
  text-decoration: none;
  border-bottom: 1px solid white; }
  .ClanLandingFeatured-Clan > p a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0); }

.ClanLandingFeatured-Clan a {
  color: #fff;
  text-decoration: underline; }

.ClanLandingFeatured-Clan .ColoredButton {
  text-decoration: none; }

.ClanLandingFeatured-Clan--badge {
  display: block;
  width: 45px;
  margin: 0 auto 5px;
  padding-top: 40px; }
  .ClanLandingFeatured-Clan--badge img {
    width: 100%;
    opacity: 0; }

.ClanLandingFeatured-Push {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto; }
  .ClanLandingFeatured-Push span {
    display: inline-block;
    text-decoration: underline; }
  .ClanLandingFeatured-Push p {
    color: #ffffff;
    text-shadow: 0 2px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    font: normal 14px/15px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif; }
  .ClanLandingFeatured-Push a {
    color: #ffffff;
    transition: border 200ms ease-out;
    text-decoration: none;
    border-bottom: 1px solid white; }
    .ClanLandingFeatured-Push a:hover {
      border-bottom: 1px solid rgba(255, 255, 255, 0); }

/********************
* MEDIA TABLET
********************/
@media (min-width: 600px) {
  /********************
  * BLOCKBACKGROUND
  ********************/
  .ClanLanding .BlockBackground {
    height: 100%; }
    .ClanLanding .BlockBackground img {
      height: 101%;
      width: auto; }
  .ClanLanding .hero-subtitle {
    width: 70%;
    margin: 0 auto; }
  /********************
  * SEARCH
  ********************/
  .ClanLandingSearch {
    height: 815px; }
    .ClanLandingSearch .SearchBar {
      width: 450px; }
      .ClanLandingSearch .SearchBar .SearchBar-search {
        width: 85%; }
  .ClanLandingSearch h2 {
    padding-top: 300px; }
  .ClanLandingSearch-browse {
    margin-bottom: 160px; }
  .ClanLandingSearch-push {
    width: 400px; }
  /********************
  * FEATURED
  ********************/
  .ClanLandingFeatured {
    height: 815px; }
  /***************************
  * FEATURED CLAN CONTENT
  ***************************/
  .ClanLandingFeatured-Ctn {
    width: 45%; }
  .ClanLandingFeatured-Clan > span {
    font-size: 18px; }
  .ClanLandingFeatured-Clan--badge {
    padding-top: 130px;
    width: 70px; } }

/*******************************
* BLOCK BACKGROUND SPECIFIC MQ
*******************************/
@media only screen and (min-width: 800px) and (max-width: 1023px) {
  /********************
  * BLOCKBACKGROUND
  ********************/
  .ClanLanding .BlockBackground img {
    width: 101%;
    height: auto; } }

/********************
* MEDIA DESKTOP + XL
********************/
@media (min-width: 1024px), (min-width: 1440px) {
  .ClanLanding .ContentBlock {
    height: 220px;
    width: 380px;
    max-width: 380px;
    margin: 0 auto 60px; }
  /********************
  * SEARCH
  ********************/
  .ClanLandingSearch {
    height: 815px; }
    .ClanLandingSearch .SearchBar {
      width: 580px;
      padding: 30px;
      margin-bottom: 0; }
      .ClanLandingSearch .SearchBar:after {
        width: 70px;
        height: 70px;
        right: 7px; }
      .ClanLandingSearch .SearchBar .SearchBar-search {
        width: 87%;
        font-size: 18px; }
      .ClanLandingSearch .SearchBar .SearchBar-submit svg {
        left: -4px; }
  .ClanLandingSearch h2 {
    padding-top: 250px; }
  .ClanLandingSearch-browse {
    margin-bottom: 130px; }
    .ClanLandingSearch-browse span {
      font-size: 18px; }
  .ClanLandingSearch-push {
    width: 580px; }
    .ClanLandingSearch-push picture {
      position: relative;
      width: 63px;
      top: -10px; }
    .ClanLandingSearch-push p {
      font-size: 20px;
      line-height: 22px; }
  /********************
  * FEATURED
  ********************/
  .ClanLandingFeatured {
    height: 810px; }
  /***************************
  * FEATURED CLAN CONTENT
  ***************************/
  .ClanLandingFeatured-Ctn {
    width: 80%; }
  .ClanLandingFeatured-Clan > span {
    margin-bottom: 10px;
    font-size: 18px; }
  .ClanLandingFeatured-Clan > p {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 20px;
    line-height: 22px; }
  .ClanLandingFeatured-Clan--badge {
    padding-top: 160px;
    width: 70px; }
  .ClanLandingFeatured-Push span {
    font-size: 22px; }
  .ClanLandingFeatured-Push p {
    font-size: 20px;
    line-height: 22px; }
  .ClanLandingFeatured-Clan {
    width: 50%;
    margin: 0 auto; } }

.Dropdown-Select {
  position: relative;
  padding: 0 15px;
  color: #acacac;
  border-radius: 5px;
  cursor: pointer; }
  .Dropdown-Select.Dropdown-warFrequency {
    z-index: 3; }
  .Dropdown-Select .Dropdown-Scroller {
    position: absolute;
    display: block;
    z-index: 2;
    top: 50px;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    transition: height 50ms ease-out; }
  .Dropdown-Select input {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    border: none;
    outline: none;
    opacity: 0; }
  .Dropdown-Select ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0; }
  .Dropdown-Select li {
    position: relative;
    cursor: pointer;
    padding: 0 15px;
    transition: all 250ms ease-out; }
    .Dropdown-Select li:hover {
      background-color: #fafafa;
      color: #363636; }
    .Dropdown-Select li.active {
      color: #363636; }
  .Dropdown-Select.Dropdown-Select-active .Dropdown-Scroller {
    height: 250px;
    overflow: auto; }
  .Dropdown-Select.Dropdown-Select-active .AdvancedSearch-select-arrow {
    transform: rotate(180deg);
    background-color: #ce5600; }
    .Dropdown-Select.Dropdown-Select-active .AdvancedSearch-select-arrow svg {
      margin-left: -2px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Dropdown-Select {
      font-size: 16px;
      padding: 0 30px;
      line-height: 60px; }
      .Dropdown-Select .Dropdown-Scroller {
        top: 60px; }
      .Dropdown-Select li {
        padding: 0 30px; }
      .Dropdown-Select.Dropdown-Select-active .AdvancedSearch-select-arrow svg {
        margin-left: 0; } }

.MemberPicker-thumbmin {
  z-index: 4; }

#clan-search,
.ClanSearch {
  display: block;
  position: relative;
  width: 100%; }

/*
	Clan Search Hero
*/
.ClanSearch-Hero {
  position: relative;
  height: 305px;
  overflow: hidden; }
  .ClanSearch-Hero img {
    width: 101%;
    height: auto; }
  .ClanSearch-Hero .Hero-content {
    width: 100%; }
  @media (min-width: 600px) {
    .ClanSearch-Hero {
      height: 378px; }
      .ClanSearch-Hero .Hero-content {
        left: 0;
        max-width: 100%;
        padding: 0 10%;
        top: 50%;
        transform: translate3d(0, -50%, 0); } }
  @media (min-width: 1024px) {
    .ClanSearch-Hero {
      height: 620px; }
      .ClanSearch-Hero .Hero-content .SearchBar {
        opacity: 0;
        transform: translate3d(0, 50px, 0); }
      .ClanSearch-Hero .ClanSearch-head--bg img {
        position: absolute;
        height: auto;
        width: 101%; } }

.ClanSearch-Results {
  position: relative;
  text-align: center; }
  .ClanSearch-Results .ClanSearch-Empty {
    padding: 60px 10%;
    color: #363636; }
    .ClanSearch-Results .ClanSearch-Empty.ClanSearch-Empty-hidden {
      display: none; }
  .ClanSearch-Results.AdvancedSearch-active .ClanSearch-Results-overlay {
    display: block; }

.AdvancedSearch {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  height: 50px;
  background-color: #f4f4f4;
  transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1); }
  .AdvancedSearch.AdvancedSearch-active {
    height: 762px;
    overflow: inherit; }
    .AdvancedSearch.AdvancedSearch-active .icon-arrow {
      transform: rotate(90deg); }
    .AdvancedSearch.AdvancedSearch-active .AdvancedSearch-Content {
      opacity: 1;
      transition-delay: 200ms; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .AdvancedSearch {
      height: 70px; } }
  @media (min-width: 600px), (min-width: 1024px), (min-width: 1440px) {
    .AdvancedSearch.AdvancedSearch-active {
      height: 505px; } }

.AdvancedSearch-Bar {
  -ms-flex-align: center;
      align-items: center;
  background-color: #f3781e;
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  font-size: 12px;
  height: 50px;
  -ms-flex-pack: center;
      justify-content: center;
  line-height: 50px;
  padding: 0 10%;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  highlight: none; }
  .AdvancedSearch-Bar .icon-arrow {
    position: relative;
    width: 12px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: all 200ms ease-out;
    transform: rotate(0); }
  .AdvancedSearch-Bar .AdvancedSearch-Bar-left, .AdvancedSearch-Bar .AdvancedSearch-Bar-right {
    display: block;
    width: auto; }
  .AdvancedSearch-Bar .AdvancedSearch-Bar-right {
    text-align: right;
    color: #000;
    opacity: 0.5; }
  @media (min-width: 600px) {
    .AdvancedSearch-Bar {
      font-size: 14px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .AdvancedSearch-Bar {
      font-size: 16px;
      height: 70px;
      line-height: 70px; } }

.AdvancedSearch-Content {
  padding: 0 10% 60px;
  text-align: left;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  highlight: none;
  opacity: 0;
  transition: all 250ms ease-out; }
  .AdvancedSearch-Content .AdvancedSearch-InnerContent {
    margin: 0 auto;
    width: 100%;
    max-width: 880px; }
  .AdvancedSearch-Content .AdvancedSearch-Option {
    margin-top: 30px;
    height: 85px; }
  .AdvancedSearch-Content .AdvancedSearch-select {
    position: relative;
    display: block;
    padding: 0;
    background-color: #ffffff;
    content: '';
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 5px; }
    .AdvancedSearch-Content .AdvancedSearch-select .AdvancedSearch-select-arrow {
      position: absolute;
      right: 5px;
      top: 5px;
      height: 40px;
      width: 40px;
      padding: 15px;
      background-color: #fa832b;
      border-radius: 5px;
      cursor: pointer;
      z-index: 1;
      transition: background-color 250ms ease-out;
      pointer-events: none; }
    .AdvancedSearch-Content .AdvancedSearch-select .icon-arrow {
      width: 12px;
      height: 12px;
      line-height: 24px;
      display: inline-block;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      transform: rotate(90deg);
      vertical-align: top !important; }
    .AdvancedSearch-Content .AdvancedSearch-select select {
      width: 100%;
      padding: 0 20px;
      color: #acacac;
      border: 0;
      outline: none;
      position: relative;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
  .AdvancedSearch-Content .AdvancedSearch-col50 {
    display: block;
    position: relative;
    width: 100%;
    z-index: 4; }
  .AdvancedSearch-Content .AdvancedSearch-Buttons {
    margin-top: 30px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    highlight: none;
    display: inline-block;
    width: 100%;
    text-align: center; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-col50 {
      display: inline-block;
      margin: 0 10px; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons a {
      letter-spacing: -0.2px; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-SearchButton, .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-ResetLink {
      transition: all 250ms ease-out; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-SearchButton:hover {
      background-color: #1a1a1a; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-ResetLink {
      background-color: #ffffff;
      color: #acacac; }
      .AdvancedSearch-Content .AdvancedSearch-Buttons .AdvancedSearch-ResetLink:hover {
        background-color: #e6e6e6; }
    .AdvancedSearch-Content .AdvancedSearch-Buttons a {
      cursor: pointer;
      padding: 18px 38px;
      margin: 0 0 0 10px; }
      .AdvancedSearch-Content .AdvancedSearch-Buttons a:first-child {
        margin-left: 0; }
  @media (min-width: 600px) {
    .AdvancedSearch-Content .AdvancedSearch-Buttons a {
      padding: 18px 30px; } }
  @media (min-width: 600px), (min-width: 1024px), (min-width: 1440px) {
    .AdvancedSearch-Content {
      padding-top: 30px; }
      .AdvancedSearch-Content .AdvancedSearch-select {
        height: 60px;
        line-height: 60px; }
        .AdvancedSearch-Content .AdvancedSearch-select .AdvancedSearch-select-arrow {
          width: 50px;
          height: 50px;
          padding: 19px; }
      .AdvancedSearch-Content .AdvancedSearch-col50 {
        display: inline-block;
        width: 50%;
        margin: 0;
        vertical-align: top; }
        .AdvancedSearch-Content .AdvancedSearch-col50:nth-child(odd) {
          padding-right: 55px;
          border-right: 1px solid #fff; }
        .AdvancedSearch-Content .AdvancedSearch-col50:nth-child(even) {
          padding-left: 55px; }
      .AdvancedSearch-Content .AdvancedSearch-Buttons {
        margin-top: 52px;
        text-align: right; } }

.NumberStepper {
  position: relative;
  display: block;
  padding: 0;
  background-color: #ffffff;
  content: '';
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
  color: #acacac;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  font-size: 12px; }
  .NumberStepper .NumberStepper-button {
    position: absolute;
    top: 5px;
    padding: 15px;
    background-color: #fa832b;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 5px; }
  .NumberStepper .NumberStepper-button-right {
    right: 5px; }
  .NumberStepper .NumberStepper-button-left {
    left: 5px; }
  .NumberStepper .icon {
    width: 12px;
    height: 12px;
    line-height: 24px;
    display: inline-block;
    vertical-align: top !important;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
  @media (min-width: 600px), (min-width: 1024px), (min-width: 1440px) {
    .NumberStepper {
      font-size: 16px;
      height: 60px;
      line-height: 60px; }
      .NumberStepper .NumberStepper-button {
        width: 50px;
        height: 50px;
        padding: 20px; } }
  @media (min-width: 600px) {
    .NumberStepper {
      font-size: 14px; } }

.Form-label {
  margin-bottom: 10px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Form-label {
      font-size: 14px; } }

.ClanSearch-Preloader {
  position: relative;
  margin: 40px auto; }
  .ClanSearch-Preloader img {
    width: 30px;
    height: 10px;
    opacity: .6; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .ClanSearch-Preloader {
      margin: 75px auto 110px; } }

.ClanSearch-LoadMore {
  text-align: center;
  margin: 40px auto; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .ClanSearch-LoadMore {
      margin: 75px auto 110px; } }
  .ClanSearch-LoadMore.ClanSearch-LoadMore--hidden {
    display: none; }

.ClanSearch-Empty {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif; }

.ClanSearch__HeroImage {
  height: 100%;
  position: relative;
  width: 100%; }
  .ClanSearch__HeroImage img {
    display: block;
    height: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: scale(1.2) translateX(-50%);
    transform-origin: 0 50%;
    transition: all 400ms ease-out;
    width: auto; }
    @media (min-width: 1024px) {
      .ClanSearch__HeroImage img {
        height: auto;
        width: 100%; } }
  .ClanSearch__HeroImage.show img {
    opacity: 1;
    transform: scale(1) translateX(-50%); }

.SearchPicker {
  position: relative;
  height: 60px;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

/********************
* BACKGROUND
********************/
.SearchPicker-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.SearchPicker-bound {
  position: absolute;
  z-index: 2;
  width: 30px;
  text-align: center;
  display: block;
  font: normal 12px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  color: #acacac;
  top: 50%;
  margin-top: -1px; }

.SearchPicker-boundmin {
  left: 0; }

.SearchPicker-boundmax {
  right: 0; }

.SearchPicker-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  height: 10px;
  width: 95%;
  width: calc(100% - 60px);
  margin: auto;
  background-color: #fff;
  box-shadow: inset 0 2px 1px 0 #e5e5e5;
  border-radius: 6px; }

/********************
* DRAGGABLE THUMBS
********************/
.SearchPicker-thumb {
  position: absolute;
  z-index: 3;
  display: block;
  top: 50%;
  left: 0;
  margin-top: -18px;
  width: 45px;
  height: 45px;
  background-color: #fa832b;
  border: 4px solid #fff;
  border-radius: 50%;
  text-align: center;
  font: normal 14px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 0; }
  .SearchPicker-thumb .SearchPicker-thumb--value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    line-height: 40px; }
    .SearchPicker-thumb .SearchPicker-thumb--value:before, .SearchPicker-thumb .SearchPicker-thumb--value:after {
      content: '';
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0; }
    .SearchPicker-thumb .SearchPicker-thumb--value:after {
      z-index: -1;
      top: 0;
      height: 45px;
      width: 45px;
      border-radius: 50%;
      background-color: #ce5600;
      transform: scale(0); }
    .SearchPicker-thumb .SearchPicker-thumb--value:before {
      top: 100%;
      z-index: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 8px 0 8px;
      border-color: #ce5600 transparent transparent transparent; }
  .SearchPicker-thumb:after {
    content: '';
    position: absolute;
    z-index: 3;
    display: block;
    height: 8px;
    width: 8px;
    top: 50%;
    left: 50%;
    background-color: #fa832b;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    transform: scale(0); }
  .SearchPicker-thumb .SearchPicker-thumb--value, .SearchPicker-thumb:after,
  .SearchPicker-thumb .SearchPicker-thumb--value:after,
  .SearchPicker-thumb .SearchPicker-thumb--value:before {
    transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .SearchPicker-thumb.dragging .SearchPicker-thumb--value {
    top: -40px;
    line-height: 45px; }
    .SearchPicker-thumb.dragging .SearchPicker-thumb--value:before {
      opacity: 1; }
    .SearchPicker-thumb.dragging .SearchPicker-thumb--value:after {
      transform: scale(1);
      opacity: 1;
      transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .SearchPicker-thumb.dragging:after {
    transform: scale(1);
    transition-delay: 100ms; }

.ClanListItem {
  background-color: rgba(238, 239, 239, 0.5);
  border-top: 2px solid #ffffff;
  color: #363636;
  cursor: pointer;
  display: block;
  min-height: 140px;
  overflow: hidden;
  padding: 30px 20% 30px 10%;
  position: relative;
  transition: all 200ms ease-out;
  transition-property: background-color, transform, opacity;
  text-align: left;
  text-decoration: none; }
  .ClanListItem.noBorderTop {
    border-top: none; }
  .no-touch .ClanListItem:hover {
    background-color: #eeefef; }
    .no-touch .ClanListItem:hover .ClanListItem-svg-container {
      transform: translateX(10px) translateY(-50%); }
  .ClanListItem .ClanListItem-left .ClanListItem-inner-left {
    width: 128px;
    float: left;
    margin-left: -10px; }
    .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container {
      border-right: 1px solid #dedfe0;
      width: 68px;
      display: inline-block; }
      .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .ClanListItem-position {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 34px;
        text-shadow: 0 2px rgba(0, 0, 0, 0.1);
        background-color: #444444;
        color: #ffffff;
        font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
        text-align: center;
        display: inline-block;
        vertical-align: top; }
      .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange {
        display: inline-block;
        position: relative;
        text-align: center;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
        font-size: 8px;
        color: #757575;
        margin-left: 9px;
        width: 15px; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-up {
          margin-top: 6px; }
          .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-up:before {
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(../img/svgs/ranking-up.svg) no-repeat center;
            background-size: 100% auto;
            margin-bottom: 2px; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-down {
          margin-top: 6px; }
          .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-down:after {
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(../img/svgs/ranking-down.svg) no-repeat center;
            background-size: 100% auto; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-same {
          width: 14px;
          height: 13px;
          background: url(../img/svgs/ranking-same.svg) no-repeat center;
          background-size: 100% auto;
          margin-top: 11px; }
    .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 54px;
      height: 34px;
      text-align: center;
      margin-top: -2px;
      margin-left: 6px; }
      .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-shieldImg img {
        width: 45px;
        opacity: 0;
        transition: opacity 200ms ease-out; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-shieldImg img.lazyloaded {
          opacity: 1; }
      .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay {
        position: absolute;
        display: block;
        z-index: 2;
        top: 5px;
        left: 2px;
        right: 0;
        margin: auto;
        width: 21px;
        opacity: 0;
        transition: opacity 200ms ease-out; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay span {
          position: absolute;
          z-index: 2;
          display: block;
          top: 0px;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          font: normal 5px "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
          color: #ffffff; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay img {
          position: relative;
          display: block;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay.show-badge {
          opacity: 1; }
  .ClanListItem .ClanListItem-left .ClanListItem-info-container {
    margin-left: 128px; }
    .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container {
      display: inline-block;
      vertical-align: top; }
      .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-name {
        font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
        font-size: 12px; }
      .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-tag {
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
        font-size: 12px;
        color: #acacac; }
  .ClanListItem .ClanListItem-right {
    padding-top: 15px; }
    .ClanListItem .ClanListItem-right .ClanListItem-members-container {
      width: 77px;
      float: left; }
      .ClanListItem .ClanListItem-right .ClanListItem-members-container .ClanListItem-members-headline {
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
        font-size: 9px;
        line-height: 1;
        color: rgba(0, 0, 0, 0.5);
        text-align: center;
        margin-bottom: 4px; }
      .ClanListItem .ClanListItem-right .ClanListItem-members-container .ClanListItem-member-count {
        text-align: center;
        background-color: rgba(0, 0, 0, 0.07);
        border-radius: 3px;
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
        font-size: 10px;
        line-height: 20px;
        height: 20px; }
    .ClanListItem .ClanListItem-right .ClanListItem-points-container {
      margin-left: 92px; }
      .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points {
        display: inline-block;
        background-color: #e2c45a;
        font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
        line-height: 1;
        color: #ffffff;
        position: relative;
        font-size: 12px;
        border-radius: 4px;
        width: 120px;
        height: 34px; }
        .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points span {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          padding-right: 25px;
          line-height: 34px; }
          .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points span:after {
            content: '';
            display: block;
            width: 22px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url(../img/clan-search/trophy.png) no-repeat center;
            background-size: 100% auto; }
  .ClanListItem .ClanListItem-svg-container {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    height: 34px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateX(0) translateY(-50%);
    transition: transform 0.1s ease-out;
    width: 10%;
    z-index: 0; }
    .ClanListItem .ClanListItem-svg-container svg {
      display: inline-block;
      left: -7px;
      text-align: center;
      top: 50%;
      width: 14px; }
      .ClanListItem .ClanListItem-svg-container svg * {
        fill: #414040; }
  @media only screen and (max-width: 739px) {
    .ClanListItem:active {
      background-color: #eeefef; }
      .ClanListItem:active .ClanListItem-svg-container {
        transform: translateX(10px) translateY(-50%); } }
  @media only screen and (min-width: 740px) and (max-width: 1119px) {
    .ClanListItem {
      min-height: 95px;
      padding: 30px 10% 30px 10%; }
      .ClanListItem .ClanListItem-left {
        margin-right: 220px; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left {
          margin: 0; }
          .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield {
            width: 34px; }
            .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay {
              top: 5px;
              left: 13px;
              width: 19px; }
        .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container {
          padding-right: 10px; }
          .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-name {
            font-size: 12px; }
          .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-tag {
            font-size: 12px; }
      .ClanListItem .ClanListItem-right {
        float: right;
        padding-top: 0;
        position: absolute;
        top: 30px;
        right: 10%; }
        .ClanListItem .ClanListItem-right .ClanListItem-members-container {
          float: left;
          vertical-align: top;
          padding-top: 0;
          padding-right: 10px; }
          .ClanListItem .ClanListItem-right .ClanListItem-members-container .ClanListItem-members-headline {
            font-size: 10px;
            line-height: 10px; }
        .ClanListItem .ClanListItem-right .ClanListItem-points-container {
          margin: 0;
          float: right;
          vertical-align: top; }
      .ClanListItem .ClanListItem-svg-container {
        width: 5%; }
      .ClanListItem:active {
        background-color: #eeefef; }
        .ClanListItem:active .ClanListItem-svg-container {
          transform: translateX(10px) translateY(-50%); } }
  @media only screen and (min-width: 1120px) {
    .ClanListItem {
      min-height: 128px;
      padding: 38px 10% 38px 10%;
      border-top: 4px solid #ffffff; }
      .ClanListItem .ClanListItem-left {
        margin-right: 310px;
        height: 48px; }
        .ClanListItem .ClanListItem-left .ClanListItem-inner-left {
          width: 200px;
          margin: 0; }
          .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container {
            width: 110px;
            height: 48px; }
            .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .ClanListItem-position {
              width: 48px;
              height: 48px;
              border-radius: 10px;
              font-size: 16px;
              line-height: 48px;
              text-shadow: 0 3px rgba(0, 0, 0, 0.1); }
            .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange {
              font-size: 12px;
              line-height: 10px;
              width: auto;
              transform: translateX(-50%);
              margin-left: 23px; }
              .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange:before {
                margin-left: auto;
                margin-right: auto; }
              .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-up {
                margin-top: 11px; }
                .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-up:before {
                  width: 18px;
                  height: 17px;
                  margin-bottom: 2px; }
              .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-down {
                margin-top: 11px; }
                .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-down:after {
                  width: 18px;
                  height: 17px; }
              .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-position-container .rankChange.ranking-same {
                width: 20px;
                height: 17px;
                margin-top: 16px; }
          .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield {
            margin: 0;
            width: 90px;
            height: 48px;
            padding-left: 15px; }
            .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-shieldImg img {
              width: 52px; }
            .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay {
              width: 24px;
              top: 6px;
              left: 17px; }
              .ClanListItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay span {
                font-size: 6px; }
        .ClanListItem .ClanListItem-left .ClanListItem-info-container {
          margin-left: 200px; }
          .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-name {
            font-size: 17px; }
          .ClanListItem .ClanListItem-left .ClanListItem-info-container .ClanListItem-name-container .ClanListItem-tag {
            font-size: 16px; }
      .ClanListItem .ClanListItem-right {
        width: 310px;
        float: right;
        padding-top: 0;
        position: absolute;
        top: 38px;
        right: 10%; }
        .ClanListItem .ClanListItem-right .ClanListItem-members-container {
          width: 110px;
          float: left;
          vertical-align: top;
          padding-top: 0; }
          .ClanListItem .ClanListItem-right .ClanListItem-members-container .ClanListItem-members-headline {
            font-size: 14px;
            margin-bottom: 5px; }
          .ClanListItem .ClanListItem-right .ClanListItem-members-container .ClanListItem-member-count {
            border-radius: 5px;
            font-size: 14px;
            height: 28px;
            line-height: 28px; }
        .ClanListItem .ClanListItem-right .ClanListItem-points-container {
          float: right;
          vertical-align: top;
          margin-left: 0; }
          .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points {
            border-radius: 5px;
            font-size: 18px;
            width: 170px;
            height: 48px; }
            .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points span {
              line-height: 48px;
              padding-right: 38px; }
              .ClanListItem .ClanListItem-right .ClanListItem-points-container .ClanListItem-points span:after {
                width: 30px; }
      .ClanListItem .ClanListItem-svg-container {
        height: 48px;
        width: 5%; }
        .ClanListItem .ClanListItem-svg-container svg {
          width: auto;
          height: 19px; } }

.ClanSearchItem .ClanListItem-left .ClanListItem-inner-left {
  width: 50px; }
  .ClanSearchItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield {
    margin-left: 0; }

.ClanSearchItem .ClanListItem-left .ClanListItem-info-container {
  margin-left: 60px; }

.ClanSearchItem .ClanListItem-tag {
  display: inline-block; }

.ClanSearchItem .ClanListItem-ClanType {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  font-size: 10px;
  display: inline-block;
  margin-left: 10px;
  border-left: 1px solid #dedfe0;
  padding-left: 10px; }

.ClanSearchItem .ClanListItem-ClanType-container {
  display: none; }

@media only screen and (min-width: 1120px) {
  .ClanSearchItem {
    padding: 38px 10% 38px 10%; }
    .ClanSearchItem .ClanListItem-ClanType {
      display: none; }
    .ClanSearchItem .ClanListItem-left {
      margin-left: -4px; }
      .ClanSearchItem .ClanListItem-left .ClanListItem-inner-left {
        width: auto;
        margin: 0; }
        .ClanSearchItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield {
          width: auto;
          padding: 0; }
          .ClanSearchItem .ClanListItem-left .ClanListItem-inner-left .ClanListItem-shield .ClanListItem-BadgeOverlay {
            left: 2px; }
      .ClanSearchItem .ClanListItem-left .ClanListItem-info-container {
        display: inline-block;
        vertical-align: middle;
        float: left;
        margin-left: 25px; }
    .ClanSearchItem .ClanListItem-ClanType-container {
      display: inline-block;
      margin-right: 25px;
      margin-left: 0;
      vertical-align: middle;
      float: right;
      text-align: right;
      padding-top: 25px; }
      .ClanSearchItem .ClanListItem-ClanType-container .ClanListItem-ClanType {
        display: block;
        font-size: 15px;
        padding-left: 0;
        padding-right: 25px;
        border-left: none;
        border-right: 1px solid #dedfe0; } }

.PlayerListItem {
  padding: 30px 10%;
  min-height: 140px;
  background-color: rgba(238, 239, 239, 0.5);
  border-top: 2px solid #ffffff;
  position: relative; }
  .PlayerListItem:not(.ClanDetailsMember):first-of-type {
    border-top: none; }
  .PlayerListItem .PlayerListItem-left {
    min-height: 40px; }
    .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left {
      width: 180px;
      float: left; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container {
        border-right: 1px solid #dedfe0;
        display: inline-block;
        width: 66px;
        height: 34px;
        vertical-align: top; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .PlayerListItem-position {
          width: 34px;
          height: 34px;
          border-radius: 4px;
          font-size: 13px;
          line-height: 34px;
          text-shadow: 0 2px rgba(0, 0, 0, 0.1);
          background-color: #444444;
          color: #ffffff;
          font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
          text-align: center;
          display: inline-block;
          vertical-align: top; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange {
          display: inline-block;
          position: relative;
          text-align: center;
          font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
          font-size: 8px;
          color: #757575;
          margin-left: 9px;
          width: 12px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-up {
            margin-top: 6px; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-up:before {
              content: '';
              display: block;
              width: 12px;
              height: 13px;
              background: url(../svgs/ranking-up.svg) no-repeat center;
              background-size: 100% auto;
              margin-bottom: 2px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-down {
            margin-top: 6px; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-down:after {
              content: '';
              display: block;
              width: 12px;
              height: 13px;
              background: url(../svgs/ranking-down.svg) no-repeat center;
              background-size: 100% auto; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-same {
            width: 12px;
            height: 12px;
            background: url(../svgs/ranking-same.svg) no-repeat center;
            background-size: 100% auto;
            margin-top: 11px; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-league-icon {
        width: 54px;
        height: 34px;
        text-align: center;
        border-right: 1px solid #dedfe0;
        display: inline-block;
        vertical-align: top; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-league-icon img {
          height: 33px;
          width: auto;
          opacity: 0;
          transition: opacity 150ms ease-out; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-league-icon img.lazyloaded {
            opacity: 1; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience {
        -ms-flex-align: center;
            align-items: center;
        border-right: 1px solid #dedfe0;
        display: -ms-inline-flexbox;
        display: inline-flex;
        height: 34px;
        -ms-flex-pack: center;
            justify-content: center;
        position: relative;
        text-align: center;
        vertical-align: top;
        width: 54px; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience .PlayerListItem-svg-container {
          position: absolute;
          height: 100%; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience .PlayerListItem-svg-container img {
            height: 100%; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience .PlayerListItem-expLevel {
          position: absolute;
          text-align: center;
          width: 100%;
          -webkit-text-stroke: 0.25px #000000;
          text-shadow: 0 2px 0px black;
          color: #ffffff;
          font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
          font-size: 14px;
          line-height: 34px; }
    .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container {
      margin-left: 185px;
      text-align: left; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name {
        font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
        font-size: 10px;
        word-break: break-word; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-role {
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
        font-size: 10px;
        margin-top: 3px;
        color: #a2a2a2; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container {
        display: inline-block;
        vertical-align: top; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-shield {
          width: 15px;
          height: 15px;
          margin-left: -2px;
          margin-top: 2px;
          float: left;
          vertical-align: top; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-shield img {
            width: 100%;
            opacity: 0;
            transition: opacity 150ms ease-out; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-shield img.lazyloaded {
              opacity: 1; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-clan-name {
          font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
          font-size: 10px;
          color: #acacac;
          vertical-align: top;
          margin: 2px 0 0 17px; }
  .PlayerListItem .PlayerListItem-right {
    padding-top: 15px; }
    .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right {
      width: 180px;
      float: left; }
      .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container {
        display: inline-block;
        padding-right: 10px; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container .PlayerListItem-wins-headline {
          font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
          font-size: 9px;
          line-height: 1;
          color: rgba(0, 0, 0, 0.5);
          text-align: center;
          margin-bottom: 5px;
          white-space: nowrap; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container .PlayerListItem-wins-count {
          text-align: center;
          background-color: rgba(0, 0, 0, 0.07);
          border-radius: 3px;
          font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
          font-size: 10px;
          line-height: 20px;
          width: 64px;
          height: 20px; }
    .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container {
      margin-left: 180px; }
      .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
        display: inline-block;
        background-color: #e2c45a;
        font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
        line-height: 1;
        color: #ffffff;
        position: relative;
        font-size: 12px;
        border-radius: 4px;
        width: 120px;
        height: 34px; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          padding-right: 25px;
          line-height: 34px; }
          .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span:after {
            content: '';
            display: block;
            width: 22px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url(../img/clan-search/trophy.png) no-repeat center;
            background-size: 100% auto; }
        @media only screen and (max-width: 360px) {
          .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
            font-size: 11px;
            width: 86px; }
            .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span {
              padding-right: 20px; }
              .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span:after {
                width: 16px; } }
  @media only screen and (min-width: 400px) and (max-width: 739px) {
    .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container {
      width: 100%;
      text-align: right;
      margin-left: 0; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name {
        text-align: right; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-clan-name {
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-shield {
        display: inline-block;
        float: none; }
      .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-role {
        text-align: right; }
    .PlayerListItem .PlayerListItem-right {
      text-align: right; }
      .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right {
        display: inline-block; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container {
          float: left; }
      .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container {
        margin-left: 0;
        display: inline-block;
        vertical-align: middle; } }
  @media only screen and (min-width: 740px) and (max-width: 1119px) {
    .PlayerListItem {
      min-height: 94px;
      position: relative; }
      .PlayerListItem .PlayerListItem-left {
        margin-right: 292px;
        min-height: 34px;
        display: inline-block; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left {
          width: 185px; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container {
          margin-left: 190px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-shield {
            width: 34px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name {
            font-size: 10px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-clan-name {
            font-size: 9px; }
      .PlayerListItem .PlayerListItem-right {
        width: 280px;
        height: 34px;
        float: right;
        padding-top: 0;
        position: absolute;
        top: 30px;
        right: 10%; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right {
          width: auto;
          float: left;
          vertical-align: top; }
          .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container {
            margin: 0; }
            .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container .members-headline {
              font-size: 9px;
              line-height: 10px; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container {
          margin: 0;
          float: right;
          vertical-align: top; } }
  @media only screen and (min-width: 1120px) {
    .PlayerListItem {
      min-height: 128px;
      padding: 40px 10%;
      border-top: 4px solid #ffffff; }
      .PlayerListItem .PlayerListItem-left {
        display: inline-block;
        margin-right: 410px;
        height: auto; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left {
          width: 270px;
          height: auto; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container {
            width: 110px;
            height: 48px;
            display: inline-block; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .PlayerListItem-position {
              width: 48px;
              height: 48px;
              border-radius: 10px;
              font-size: 16px;
              line-height: 48px;
              text-shadow: 0 3px rgba(0, 0, 0, 0.1); }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange {
              font-size: 12px;
              line-height: 10px;
              width: auto;
              transform: translateX(-50%);
              margin-left: 23px; }
              .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange:before {
                margin-left: auto;
                margin-right: auto; }
              .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-up {
                margin-top: 11px; }
                .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-up:before {
                  width: 18px;
                  height: 17px;
                  margin-bottom: 2px; }
              .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-down {
                margin-top: 11px; }
                .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-down:after {
                  width: 18px;
                  height: 17px; }
              .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-position-container .rankChange.ranking-same {
                width: 20px;
                height: 17px;
                margin-top: 16px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-league-icon {
            width: 76px;
            height: 48px; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-league-icon img {
              height: 48px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience {
            width: 76px;
            height: 48px; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience .PlayerListItem-svg-container {
              position: absolute; }
            .PlayerListItem .PlayerListItem-left .PlayerListItem-inner-left .PlayerListItem-experience .PlayerListItem-expLevel {
              text-shadow: 0 3px black;
              color: #ffffff;
              font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
              font-size: 18px;
              line-height: 48px; }
        .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container {
          margin-left: 295px;
          padding-right: 10px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name {
            font-size: 17px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-shield {
            width: 24px;
            height: 21px; }
          .PlayerListItem .PlayerListItem-left .PlayerListItem-info-container .PlayerListItem-name-container .PlayerListItem-clan-name {
            font-size: 16px;
            line-height: 1.1;
            margin-left: 26px;
            margin-top: 6px; }
      .PlayerListItem .PlayerListItem-right {
        width: 410px;
        height: 48px;
        float: right;
        padding-top: 0;
        position: absolute;
        top: 40px;
        right: 10%; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right {
          width: auto;
          float: left;
          vertical-align: top;
          padding-top: 0; }
          .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container {
            padding-top: 2px; }
            .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container .PlayerListItem-wins-headline {
              font-size: 12px;
              margin-bottom: 5px; }
            .PlayerListItem .PlayerListItem-right .PlayerListItem-inner-right .PlayerListItem-wins-container .PlayerListItem-wins-count {
              width: 110px;
              border-radius: 5px;
              font-size: 14px;
              line-height: 28px;
              padding-top: 0;
              height: 28px; }
        .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container {
          float: right;
          vertical-align: top;
          margin-left: 0;
          display: inline-block; }
          .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points {
            border-radius: 5px;
            font-size: 18px;
            width: 150px;
            height: 48px; }
            .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span {
              line-height: 48px;
              padding-right: 34px; }
              .PlayerListItem .PlayerListItem-right .PlayerListItem-points-container .PlayerListItem-points span:after {
                width: 30px; }
      .PlayerListItem.ClanDetailsMember {
        padding: 40px 5%; }
        .PlayerListItem.ClanDetailsMember .PlayerListItem-right {
          right: 5%; } }

.PrimaryButton {
  display: inline-block;
  color: #fff;
  background-color: #363636;
  padding: 18px;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap; }
  @media (min-width: 600px) {
    .PrimaryButton {
      font-size: 14px;
      line-height: 14px;
      padding: 20px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .PrimaryButton {
      font-size: 16px;
      line-height: 16px;
      padding: 23px 30px;
      transform: translate3d(0, 0, 0) scale(1);
      transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
      .PrimaryButton:hover {
        transform: scale(1.05); } }

.PrimaryButton-small {
  display: inline-block;
  color: #fff;
  background-color: #363636;
  padding: 18px;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif; }
  @media (min-width: 600px) {
    .PrimaryButton-small {
      font-size: 14px;
      padding: 20px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .PrimaryButton-small {
      font-size: 16px;
      padding: 15px 30px; } }

.Preloader {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: center;
      justify-content: center; }
  .Preloader.hidden {
    display: none; }
  .Preloader span {
    animation: loading 1000ms -300ms backwards infinite ease-in-out;
    display: inline-block;
    border-radius: 50%;
    height: 10px;
    margin: 0 5px;
    opacity: 0;
    width: 10px; }
    .Preloader span:nth-child(2) {
      animation: loading 1000ms -200ms backwards infinite ease-in-out; }
    .Preloader span:nth-child(3) {
      animation: loading 1000ms -100ms backwards infinite ease-in-out; }
  .Preloader__ClanDetails {
    height: 100vh;
    pointer-events: none;
    position: fixed;
    width: 100vw; }
    .Preloader__ClanDetails span {
      background-color: #ffffff; }
  .Preloader__Preloader {
    height: 100px; }
    .Preloader__Preloader span {
      background-color: #000000; }

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0.85);
    opacity: 0; }
  40% {
    transform: scale(1);
    opacity: 1; } }

.layout__404 .Hero {
  display: none; }

.layout__404 .content-wrapper {
  background: #ffa700; }

.layout__404 .back-to-top {
  display: none; }

.page-404 {
  padding-top: 50px;
  background-color: #ffa700;
  color: #ffffff;
  min-height: 480px;
  text-align: center;
  overflow-x: hidden; }
  .page-404 h1 {
    margin-top: 40px;
    font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
    font-size: 24px;
    margin-bottom: 0px; }
  .page-404 p {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 14px;
    margin-top: 5px; }
  .page-404 img {
    width: 150%;
    margin-top: -20%;
    margin-left: -25%;
    height: auto; }
  .page-404 .page-404__content {
    position: relative;
    z-index: 10; }
  .page-404__image {
    margin: 0 auto;
    max-width: 800px; }
  @media (min-width: 600px) {
    .page-404 h1 {
      font-size: 36px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .page-404 .page-404__inner {
      position: relative;
      height: 100%;
      margin: 0 auto;
      max-width: 1280px;
      -ms-flex-align: center;
      align-items: center;
      display: -ms-flexbox;
      display: flex;
      font-size: 0; }
    .page-404 .page-404__content {
      position: relative;
      z-index: 10;
      width: 50%;
      display: inline-block;
      text-align: left;
      padding-left: 10%; }
    .page-404 h1 {
      font-size: 48px; }
    .page-404 p {
      font-size: 22px; }
    .page-404 .page-404__image {
      width: 50%;
      margin: 0;
      display: inline-block; }
      .page-404 .page-404__image img {
        margin-top: 0; } }

.blog {
  width: 100%; }
  .blog .section-posts {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: center;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 20px;
    padding-left: 0;
    padding-right: 0; }
    .blog .section-posts.is-archive {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column; }
    @media (min-width: 600px) {
      .blog .section-posts {
        padding-left: 10%;
        padding-right: 10%; } }
    .blog .section-posts .home-news-primary-item:nth-child(even) {
      max-width: 810px;
      width: 100%;
      margin-bottom: 30px;
      -ms-flex-direction: row;
          flex-direction: row; }
      @media (max-width: 599px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 100%;
          height: 100px; } }
      @media (max-width: 375px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 100%;
          height: 67px; } }
      @media (min-width: 800px) and (max-width: 1023px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 600px) and (max-width: 799px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 510px;
          height: 146px; } }
      @media (min-width: 1024px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 1440px) {
        .blog .section-posts .home-news-primary-item:nth-child(even) {
          width: 810px;
          height: 146px; } }
    .blog .section-posts .home-news-primary-item:nth-child(odd) {
      width: 810px;
      margin-bottom: 30px;
      -ms-flex-direction: row;
          flex-direction: row; }
      @media (max-width: 599px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 100%;
          height: 100px; } }
      @media (max-width: 375px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 100%;
          height: 67px; } }
      @media (min-width: 800px) and (max-width: 1023px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 600px) and (max-width: 799px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 510px;
          height: 146px; } }
      @media (min-width: 1024px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 1440px) {
        .blog .section-posts .home-news-primary-item:nth-child(odd) {
          width: 810px;
          height: 146px; } }
    .blog .section-posts .home-news-primary-item:nth-last-child(even) {
      width: 810px;
      margin-bottom: 30px;
      -ms-flex-direction: row;
          flex-direction: row; }
      @media (max-width: 599px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 100%;
          height: 100px; } }
      @media (max-width: 375px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 100%;
          height: 67px; } }
      @media (min-width: 800px) and (max-width: 1023px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 600px) and (max-width: 799px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 510px;
          height: 146px; } }
      @media (min-width: 1024px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 1440px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(even) {
          width: 810px;
          height: 146px; } }
    .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
      width: 810px;
      margin-bottom: 30px;
      -ms-flex-direction: row;
          flex-direction: row; }
      @media (max-width: 599px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 100%;
          height: 100px; } }
      @media (max-width: 375px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 100%;
          height: 67px; } }
      @media (min-width: 800px) and (max-width: 1023px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 600px) and (max-width: 799px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 510px;
          height: 146px; } }
      @media (min-width: 1024px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 610px;
          height: 146px; } }
      @media (min-width: 1440px) {
        .blog .section-posts .home-news-primary-item:nth-last-child(odd) {
          width: 810px;
          height: 146px; } }
    .blog .section-posts .home-news-primary-item {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
          flex-direction: row;
      width: 1050px;
      height: 146px; }
      @media (min-width: 280px) and (max-width: 1439px) {
        .blog .section-posts .home-news-primary-item {
          margin-left: 0; } }
      @media (max-width: 599px) {
        .blog .section-posts .home-news-primary-item {
          -ms-flex-direction: row;
              flex-direction: row;
          height: 146px; } }
      .blog .section-posts .home-news-primary-item .home-news-primary-item__picture {
        display: block;
        height: 200px;
        overflow: hidden;
        position: static; }
        .blog .section-posts .home-news-primary-item .home-news-primary-item__picture:before {
          content: '';
          display: block;
          padding-top: 100%;
          position: relative; }
        .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
          display: block;
          left: 50%;
          position: absolute;
          top: 50%;
          height: 200px;
          transform: translate(-50%, -50%);
          transform-origin: center center;
          transition: transform 250ms ease-out, opacity 450ms ease-out; }
          @media (max-width: 374px) {
            .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
              top: 25%;
              left: 50%;
              width: auto;
              transform: translate(-50%, -50%) scale(0.4); } }
          @media (min-width: 375px) and (max-width: 599px) {
            .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
              height: 100%;
              width: auto;
              top: 34%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.7); } }
          @media (min-width: 600px) {
            .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
              top: 36%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.74); } }
          @media (min-width: 800px) {
            .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
              top: 36%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.74); } }
          @media (min-width: 1440px) {
            .blog .section-posts .home-news-primary-item .home-news-primary-item__picture img {
              top: 38%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.78); } }
      .blog .section-posts .home-news-primary-item .home-news-primary-item-picture {
        display: block;
        width: 239px;
        height: 146px; }
        @media (max-width: 599px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-picture {
            display: block;
            width: 239px;
            height: 146px; } }
      .blog .section-posts .home-news-primary-item .home-news-primary-item-category-color {
        width: 5px;
        height: 146px; }
        @media (max-width: 599px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-category-color {
            width: 5px;
            height: 146px; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-category-color p {
              visibility: visible; } }
      .blog .section-posts .home-news-primary-item .home-news-primary-item-content {
        width: 393px;
        height: 146px; }
        .blog .section-posts .home-news-primary-item .home-news-primary-item-content div.home-news-primary-item-date a {
          color: #ffffff; }
        @media (min-width: 1024px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content {
            -ms-flex-pack: center;
                justify-content: center;
            padding: 0 0 0 15px; } }
        @media (max-width: 1023px), (min-width: 1024px), (min-width: 1440px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: visible;
            font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
            display: inline;
            margin-left: 0;
            line-height: normal;
            letter-spacing: -0.3px; } }
        @media (min-width: 600px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: visible;
            font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
            display: inline;
            margin-left: 0;
            line-height: normal;
            letter-spacing: -0.3px; }
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content h3 {
            margin: 0 0 5px 0; } }
        @media (max-width: 599px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content {
            width: 100%;
            display: block; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-content h3 {
              font-size: 12px;
              letter-spacing: -0.3px; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-content .link__readmore {
              display: none; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
              visibility: visible;
              display: inline; } }
        @media (max-width: 375px) {
          .blog .section-posts .home-news-primary-item .home-news-primary-item-content {
            display: block;
            padding: 10px 8px 22px 18px; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-content h3 {
              font-size: 10px;
              margin-bottom: 0; }
            .blog .section-posts .home-news-primary-item .home-news-primary-item-content p {
              font-size: 8px;
              margin-top: 0; } }
  .blog .home-news-primary-item {
    margin-left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    width: 1050px;
    height: 146px; }
    .blog .home-news-primary-item .home-news-primary-item-picture {
      display: block;
      width: 239px;
      height: 146px; }
      @media (max-width: 599px) {
        .blog .home-news-primary-item .home-news-primary-item-picture {
          width: 100%;
          height: 200px; } }
    .blog .home-news-primary-item .home-news-primary-item-category-color {
      width: 5px;
      height: 146px; }
      @media (max-width: 599px) {
        .blog .home-news-primary-item .home-news-primary-item-category-color {
          width: 100%;
          height: 20px; }
          .blog .home-news-primary-item .home-news-primary-item-category-color p {
            visibility: visible;
            display: none; } }
      .blog .home-news-primary-item .home-news-primary-item-category-color .home-news-primary-item-date a {
        display: none; }
    .blog .home-news-primary-item .home-news-primary-item-content {
      width: 70%;
      height: 134px;
      -ms-flex-pack: center;
          justify-content: center; }
      @media (max-width: 599px) {
        .blog .home-news-primary-item .home-news-primary-item-content {
          width: 100%;
          padding: 30px 0 0 15px; }
          .blog .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: hidden; } }
      @media (min-width: 600px) {
        .blog .home-news-primary-item .home-news-primary-item-content {
          padding: 0 0 0 15px; }
          .blog .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: visible;
            margin-left: 0; } }
      @media (max-width: 1023px) {
        .blog .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
          visibility: visible;
          margin-left: 0; } }
      @media (min-width: 825px) {
        .blog .home-news-primary-item .home-news-primary-item-content {
          padding: 0 0 0 15px; } }
      @media (min-width: 1024px) {
        .blog .home-news-primary-item .home-news-primary-item-content {
          padding: 0 0 0 15px; }
          .blog .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: visible;
            margin-left: 0; } }
      @media (min-width: 1440px) {
        .blog .home-news-primary-item .home-news-primary-item-content {
          padding: 0 0 0 15px; }
          .blog .home-news-primary-item .home-news-primary-item-content .home-news-primary-item-date {
            visibility: visible;
            margin-left: 0; } }
  .blog .home-news-primary-item:nth-child(even) {
    max-width: 810px;
    width: 100%;
    margin-bottom: 30px; }
    @media (max-width: 599px) {
      .blog .home-news-primary-item:nth-child(even) {
        height: 310px;
        -ms-flex-direction: column;
            flex-direction: column; } }
  .blog .home-news-primary-item:nth-child(odd) {
    width: 810px;
    margin-bottom: 30px; }
    @media (min-width: 600px), (max-width: 1023px) {
      .blog .home-news-primary-item:nth-child(odd) {
        width: 610px; } }
    @media (max-width: 599px) {
      .blog .home-news-primary-item:nth-child(odd) {
        width: 100%;
        height: 310px;
        -ms-flex-direction: column;
            flex-direction: column; } }
  .blog .home-news-primary-item:nth-last-child(even) {
    width: 810px;
    margin-bottom: 30px; }
    @media (min-width: 600px), (max-width: 1023px) {
      .blog .home-news-primary-item:nth-last-child(even) {
        width: 610px; } }
    @media (max-width: 599px) {
      .blog .home-news-primary-item:nth-last-child(even) {
        width: 100%;
        height: 310px;
        -ms-flex-direction: column;
            flex-direction: column; } }
  .blog .home-news-primary-item:nth-last-child(odd) {
    width: 810px;
    margin-bottom: 30px; }
    @media (min-width: 600px), (max-width: 1023px) {
      .blog .home-news-primary-item:nth-last-child(odd) {
        width: 610px; } }
    @media (max-width: 599px) {
      .blog .home-news-primary-item:nth-last-child(odd) {
        width: 100%;
        height: 310px;
        -ms-flex-direction: column;
            flex-direction: column; } }
  .blog .section-categories {
    padding-bottom: 30px;
    padding-top: 100px;
    text-align: center;
    white-space: normal; }
    @media (max-width: 599px) {
      .blog .section-categories {
        text-align: left; } }
    .blog .section-categories a {
      border-radius: 5px;
      color: #7f7f7f;
      display: inline-block;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
      font-size: 15px;
      line-height: 1;
      margin: 10px 10px 0 0;
      padding: 10px 21px;
      text-decoration: none; }
      .blog .section-categories a:not(.active) {
        background-color: rgba(54, 54, 54, 0.1) !important; }
      .blog .section-categories a.active {
        color: white; }
        .blog .section-categories a.active.is-all {
          background-color: #f69d2d !important; }
      .blog .section-categories a:hover:not(.active) {
        color: rgba(127, 127, 127, 0.75); }
      .blog .section-categories a.is-archive {
        margin-right: 0; }
    .blog .section-categories-filter {
      max-width: 846px;
      width: 83vw;
      width: calc(100vw - 60px); }
    .blog .section-categories__svg, .blog .section-categories__archive-svg {
      display: inline-block;
      fill: #ffffff;
      height: 10px;
      margin-left: 5px;
      position: relative;
      text-align: left;
      vertical-align: middle;
      width: 10px; }
    .blog .section-categories a:not(.active) .section-categories__archive-svg {
      fill: #7f7f7f; }
  @media (max-width: 599px) {
    .blog .section-categories-filter {
      margin-top: 0;
      text-align: left;
      padding-left: 0;
      padding-right: 0; } }
  @media (min-width: 600px) and (max-width: 799px) {
    .blog .section-categories-filter {
      display: inline-block;
      line-height: 1;
      vertical-align: middle;
      margin-top: -90px;
      text-align: left;
      width: 510px; }
      .blog .section-categories-filter a:last-child {
        margin-right: 0; } }
  @media (min-width: 800px) {
    .blog .section-categories-filter {
      margin-top: 0;
      text-align: left;
      padding-left: 0;
      padding-right: 0;
      width: 610px;
      padding-left: 10%;
      padding-right: 10%; } }
  @media (min-width: 1024px) {
    .blog .section-categories-filter {
      max-width: 854px;
      width: 610px;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      vertical-align: middle; }
      .blog .section-categories-filter a:last-child {
        margin-right: 0; } }
  @media (min-width: 1440px) {
    .blog .section-categories-filter {
      display: inline-block;
      vertical-align: middle;
      width: 810px; }
      .blog .section-categories-filter a:last-child {
        margin-right: 0; } }
  @media (max-width: 599px) {
    .blog .section-categories {
      padding-top: 0; } }
  @media (min-width: 1024px) {
    .blog .section-categories {
      max-width: 100%;
      padding-bottom: 60px;
      padding-top: 120px;
      width: auto; } }
  @media (min-width: 1440px) {
    .blog .section-categories {
      max-width: 100%;
      padding-bottom: 60px;
      padding-top: 100px;
      width: auto; } }

.section-pagination {
  text-align: center;
  padding-top: 35px;
  display: -ms-flexbox;
  display: flex; }
  .section-pagination .pagination-numbers {
    margin-top: 0;
    padding-top: 9px; }
  .section-pagination a {
    font-size: 15px;
    display: inline-block;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    color: #858585;
    text-decoration: none;
    transition: color 250ms;
    -ms-flex: auto;
        flex: auto; }
    .section-pagination a.active {
      color: #ffab18; }
    .section-pagination a:last-of-type {
      margin-right: 0; }
  .section-pagination .icon {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 33px;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    line-height: 33px;
    transition: background-color 250ms ease-out; }
    .section-pagination .icon svg {
      display: inline-block;
      vertical-align: middle;
      width: 41px;
      height: 29px; }
      .section-pagination .icon svg path {
        fill: #ffab18; }
    .section-pagination .icon.icon-next svg {
      margin-top: 0;
      transform: rotate(180deg); }
  @media (max-width: 599px) {
    .section-pagination {
      padding-left: 0;
      padding-right: 0; }
      .section-pagination .prev {
        margin-right: 6px; } }
  @media (min-width: 600px) {
    .section-pagination {
      padding-left: 20%;
      padding-right: 20%; }
      .section-pagination .prev {
        margin-right: 9px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .section-pagination {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 33%;
      padding-right: 33%; }
      .section-pagination .prev {
        margin-right: 9px; } }

/* ===============================================
Hamburger Button
=================================================*/
.Languagebar-FixedElements {
  position: fixed;
  width: 100%; }

.Languagebar-language-button {
  position: relative;
  top: 27px;
  right: -199px;
  color: white;
  z-index: 10000; }
  .Languagebar-language-button a {
    cursor: pointer;
    padding: 10px; }

.Languagebar-holder {
  position: relative;
  width: 100%;
  z-index: 1; }

.Languagebar-hamburger-button {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  width: 56px;
  height: 60px;
  top: 0;
  left: inherit;
  right: 0;
  padding: 18px;
  z-index: 10000;
  transition: all 430ms ease-out;
  transform: translate3d(0, 0, 0);
  cursor: pointer; }
  .Languagebar-hamburger-button.not-fixed {
    top: 0; }
  .Languagebar-hamburger-button .Languagebar-hamburger {
    position: relative;
    width: 20px;
    height: 15px; }
    .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line {
      position: absolute;
      display: block;
      width: 100%;
      height: 3px;
      left: 0;
      background-color: #fff;
      border-radius: 6px;
      transform: translate3d(0, 0, 0);
      transition: transform 200ms ease-out;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line1 {
        top: 0; }
      .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line2 {
        top: 6px; }
      .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line3 {
        top: 6px; }
      .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line4 {
        top: 12px; }
  .unfix .Languagebar-hamburger-button {
    top: -60px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Languagebar-hamburger-button {
      padding: 25px;
      width: 78px;
      height: 70px; }
      .Languagebar-hamburger-button .Languagebar-hamburger {
        width: 28px;
        height: 20px; }
        .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line {
          height: 4px; }
          .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line1 {
            top: 0; }
          .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line2 {
            top: 8px; }
          .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line3 {
            top: 8px; }
          .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line4 {
            top: 16px; } }

.Languagebar-holder {
  position: absolute;
  right: 0;
  top: 0; }

.Languagebar-backdrop {
  right: -100%;
  left: inherit !important; }

.Languagebar-hamburger-button {
  left: inherit; }

/* ===============================================
Logo found within the Languagebar
=================================================*/
.Languagebar-logo {
  position: fixed;
  z-index: 10000;
  top: 15px;
  display: block;
  left: 150px;
  transform: translate3d(0, 0, 0);
  transition: all 250ms ease-out; }
  .Languagebar-logo img {
    transition: opacity 250ms ease-out;
    width: 0;
    height: 0;
    border: 0;
    outline: 0; }
    .Languagebar-logo img.lazyloaded {
      width: 115px;
      height: auto; }
  .unfix .Languagebar-logo {
    top: -60px; }
  .Languagebar-logo.Languagebar-logo-inside {
    position: relative;
    display: block;
    top: -4px;
    margin-left: 0; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Languagebar-logo {
      margin-left: -93px; }
      .Languagebar-logo img.lazyloaded {
        width: 185px;
        height: auto; } }

.Languagebar-logo {
  transition: none; }

/* ===============================================
Languagebar, not to be confused with Header
=================================================*/
.Languagebar {
  position: fixed;
  text-align: left;
  left: -100%;
  width: 100%;
  display: block;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  transform: translate3D(0, 0, 0); }
  .Languagebar .Languagebar-primarynav > .Languagebar-item:first-child {
    border-bottom: 1px solid #3b3b3b; }

.Languagebar-content {
  padding: 17px 0 17px 0; }

@media (min-width: 1024px), (min-width: 1440px) {
  .Languagebar-content {
    padding: 22px 0 22px 0; }
  .Languagebar-background {
    padding-top: 25px !important; } }

.Languagebar-mobile {
  display: block;
  position: absolute;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  left: 10px;
  top: 14px; }
  .Languagebar-mobile select {
    top: 13px;
    left: 8px;
    z-index: 1;
    position: initial;
    overflow: hidden;
    background: transparent;
    border: 0px solid #ccc;
    color: white;
    font-style: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: ''; }
  .Languagebar-mobile .Languagebar-arrow {
    position: relative;
    float: right;
    width: 9px;
    /* IE 9 */
    /* Chrome, Safari, Opera */
    transform: rotate(90deg); }
    .Languagebar-mobile .Languagebar-arrow svg {
      fill: white; }
  @media (min-width: 600px) and (max-width: 1023px) {
    .Languagebar-mobile {
      display: none; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Languagebar-mobile {
      display: none; } }

@media (min-width: 600px) and (max-width: 1023px) {
  .Languagebar-holder, .Languagebar-scroller, .Languagebar-backdrop {
    display: block;
    width: 226px; }
    .Languagebar-holder .Languagebar-backdrop, .Languagebar-scroller .Languagebar-backdrop, .Languagebar-backdrop .Languagebar-backdrop {
      width: 226px !important; } }

@media (min-width: 1024px) {
  .Languagebar-holder, .Languagebar-scroller, .Languagebar-backdrop {
    width: 256px; }
    .Languagebar-holder .Languagebar-backdrop, .Languagebar-scroller .Languagebar-backdrop, .Languagebar-backdrop .Languagebar-backdrop {
      width: 256px !important; } }

@media (min-width: 1440px) {
  .Languagebar-holder, .Languagebar-scroller, .Languagebar-backdrop {
    width: 375px; }
    .Languagebar-holder .Languagebar-backdrop, .Languagebar-scroller .Languagebar-backdrop, .Languagebar-backdrop .Languagebar-backdrop {
      width: 375px !important; } }

/* ===============================================
Navigation background (Expanded)
=================================================*/
.Languagebar-backdrop {
  background: #292929;
  height: 100%;
  left: -100%;
  position: fixed;
  width: 100%; }
  @media (max-width: 599px), (max-width: 375px) {
    .Languagebar-backdrop {
      top: 0; } }
  @media (min-width: 600px) and (max-width: 1023px) {
    .Languagebar-backdrop {
      top: 50px; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Languagebar-backdrop {
      top: 70px; } }
  .Languagebar-backdrop.animate-out {
    left: inherit;
    top: 70px;
    right: 0;
    animation-name: sneak-out-right;
    animation-duration: 370ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
    @media (max-width: 599px), (max-width: 375px) {
      .Languagebar-backdrop.animate-out {
        top: 0; } }
    @media (min-width: 600px) {
      .Languagebar-backdrop.animate-out {
        top: 50px; } }
    @media (min-width: 1024px), (min-width: 1440px) {
      .Languagebar-backdrop.animate-out {
        top: 70px; } }

.Languagebar-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  padding-bottom: 50px;
  padding-top: 50px; }

@media (min-width: 1024px), (min-width: 1440px) {
  .Languagebar-background {
    padding-top: 70px; } }

/* ===============================================
Languagebar Items
- These are used to do the hover effects
=================================================*/
.Languagebar-item {
  transition: opacity 200ms ease-out; }
  .Languagebar-item.notactive {
    opacity: 0.5; }

/* ===============================================
Languagebar Wrapper
=================================================*/
.Languagebar-wrapper {
  position: relative;
  max-width: 1440px;
  margin: 0 auto; }

/* ===============================================
Languagebar Overlay
=================================================*/
.Languagebar-overlay {
  position: fixed;
  display: none;
  z-index: 1;
  height: 60px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #292929; }

.Languagebar-primarynav, .Languagebar-secondarynav {
  padding: 0 43px; }

/* ===============================================
Primary Navigation
=================================================*/
.Languagebar-primarynav {
  position: relative;
  font-family: "HiraKakuStd-W8-AlphaNum", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "MS UI Gothic", Arial, sans-serif;
  color: #fff;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  .Languagebar-primarynav a {
    position: relative;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 0;
    display: block;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.2s ease-out; }
    .Languagebar-primarynav a.active {
      color: white; }
    .Languagebar-primarynav a.notactive {
      opacity: 0.5; }
    .Languagebar-primarynav a.Languagebar-dropdown-main {
      padding: 0; }
  .Languagebar-primarynav a.selected {
    color: #757575; }

/* ===============================================
Secondary Navigation
=================================================*/
.Languagebar-secondarynav {
  margin: 28px 0 28px; }
  .Languagebar-secondarynav a {
    font-size: 16px;
    padding: 12px 0;
    text-decoration: none;
    color: #767779;
    display: block; }

/* ===============================================
Navigation Dropdowns
=================================================*/
.Languagebar-dropdown {
  padding: 25px 0;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* ===============================================
  Open State for Navigation Dropdowns
  =================================================*/ }
  .Languagebar-dropdown .icon-arrow {
    position: relative;
    width: 12px;
    height: 24px;
    line-height: 70px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    opacity: 0.5;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: opacity 150ms ease-out;
    display: none; }
    .Languagebar-dropdown .icon-arrow path {
      fill: #767779; }
  .Languagebar-dropdown ul {
    list-style: none;
    margin: 0 0 0 15px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    max-height: inherit; }
    .Languagebar-dropdown ul li {
      margin: 0;
      padding: 0; }
      .Languagebar-dropdown ul li a {
        padding: 10px 0;
        display: block;
        font-size: 14px; }
      .Languagebar-dropdown ul li:first-child {
        margin-top: 10px; }
      .Languagebar-dropdown ul li:last-child {
        margin-bottom: -10px; }
  .Languagebar-dropdown.open .icon-arrow path {
    fill: #ffffff; }

/* ===============================================
Download button for mobile
=================================================*/
a.Languagebar-language {
  color: white;
  cursor: pointer;
  display: block;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  font-size: 15px;
  position: absolute;
  right: 23px;
  top: 19px;
  white-space: nowrap; }
  @media (min-width: 1024px) {
    a.Languagebar-language {
      top: 25px;
      left: auto;
      right: 20px; } }
  a.Languagebar-language > span {
    display: inline-block;
    vertical-align: middle; }
  a.Languagebar-language .Languagebar-arrow-left {
    position: relative;
    display: inline-block;
    float: none;
    left: -5px;
    vertical-align: middle;
    width: 9px;
    transform: rotate(90deg); }
    a.Languagebar-language .Languagebar-arrow-left svg {
      fill: white; }
  a.Languagebar-language .Languagebar-arrow-right {
    display: none;
    position: relative;
    left: 7px;
    vertical-align: middle;
    width: 9px;
    transform: rotate(90deg); }
    a.Languagebar-language .Languagebar-arrow-right svg {
      fill: white; }

.Languagebar-logo-outside {
  display: none; }
  .Languagebar-logo-outside.is-android {
    margin-left: -35px;
    top: 10px; }
    .Languagebar-logo-outside.is-android img {
      width: 70px; }

/* ===============================================
Active State for Languagebar
=================================================*/
.Languagebar--active {
  /* ===============================================
  Morphs Hamburger button to Close Button
  =================================================*/ }
  .Languagebar--active .Languagebar-hamburger-button {
    pointer-events: auto; }
  .Languagebar--active .Languagebar-scroller {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 1000px;
    min-height: 100vh;
    height: 100%;
    top: 70px;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
    @supports (-webkit-touch-callout: none) {
      .Languagebar--active .Languagebar-scroller {
        /* CSS specific to iOS devices */
        transform: translateZ(1px); } }
    .Languagebar--active .Languagebar-scroller .Languagebar-wrapper {
      margin-right: 0px; }
    .Languagebar--active .Languagebar-scroller.has-touch-scroll {
      overflow-y: scroll;
      /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;
      /* Track */
      /* Handle */ }
      .Languagebar--active .Languagebar-scroller.has-touch-scroll::-webkit-scrollbar {
        width: 0;
        height: 8px; }
      .Languagebar--active .Languagebar-scroller.has-touch-scroll::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border-radius: 0;
        border: 0; }
      .Languagebar--active .Languagebar-scroller.has-touch-scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0);
        -webkit-box-shadow: none; }
      .Languagebar--active .Languagebar-scroller.has-touch-scroll::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0, 0, 0, 0); }
  .Languagebar--active .Languagebar-backdrop {
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    animation-name: fade-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    animation-name: sneak-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
  .Languagebar--active .Languagebar {
    position: relative;
    left: 0;
    padding-top: 60px;
    animation-name: sneak-in-text-right;
    animation-duration: 700ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }
  .Languagebar--active .Languagebar-logo.Languagebar-logo-outside {
    position: absolute;
    color: #488bf4; }
  .Languagebar--active .Languagebar-primarynav, .Languagebar--active .Languagebar-secondarynav {
    animation-name: fade-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    animation-name: sneak-in-right;
    animation-duration: 430ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
  .Languagebar--active .Languagebar-overlay {
    display: none; }
  .Languagebar--active .Languagebar-dropdown .icon-arrow path {
    fill: #ffffff; }
  .Languagebar--active .Languagebar-dropdown ul {
    max-height: 699px; }
  .Languagebar--active .Languagebar-hamburger-button {
    position: fixed;
    z-index: 1000;
    transform: translate3D(0, 0, 0); }
    .Languagebar--active .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line1 {
      top: 8px;
      width: 0;
      left: 50%; }
    .Languagebar--active .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line a {
      top: 8px;
      width: 0;
      left: 50%; }
    .Languagebar--active .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line2 {
      transform: rotate(45deg); }
    .Languagebar--active .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line3 {
      transform: rotate(-45deg); }
    .Languagebar--active .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line.Languagebar-hamburger-line4 {
      top: 8px;
      width: 0;
      left: 50%; }
  .Languagebar--active .Languagebar-background {
    padding-top: 6px;
    position: static;
    display: block; }

.Languagebar--active .Languagebar-logo {
  display: block;
  margin-top: 11px;
  margin-left: -105px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  padding: 5px 0;
  display: block;
  transform: translate3d(0, 0, 0); }
  @media (max-width: 599px), (min-width: 600px) {
    .Languagebar--active .Languagebar-logo {
      margin-top: 10px;
      padding: 0px 0; } }
  @media (min-width: 600px), (max-width: 1023px) {
    .Languagebar--active .Languagebar-logo {
      margin-top: 8px;
      padding: 0px 0; } }
  @media (min-width: 1024px), (min-width: 1440px) {
    .Languagebar--active .Languagebar-logo {
      margin-top: 17px;
      padding: 0px 0; } }
  .Languagebar--active .Languagebar-logo img {
    width: 100px; }
  .Languagebar--active .Languagebar-logo.Languagebar-logo-outside {
    animation-name: sneak-in-text-right;
    animation-duration: 700ms;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s; }

.no-animations .Languagebar-backdrop.animate-out {
  right: -100%;
  animation-name: none !important; }

.no-animations .Languagebar-hamburger-button .Languagebar-hamburger .Languagebar-hamburger-line {
  transition: none !important; }

.no-touch .Languagebar--active .Languagebar-scroller {
  /* Track */
  /* Handle */ }
  .no-touch .Languagebar--active .Languagebar-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .no-touch .Languagebar--active .Languagebar-scroller::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0;
    border: 0; }
  .no-touch .Languagebar--active .Languagebar-scroller::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: grey;
    -webkit-box-shadow: none; }
  .no-touch .Languagebar--active .Languagebar-scroller::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0); }

.js-multilanguage .multilanguage-language-selector {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  color: #000;
  font-size: 13px;
  text-align: left;
  padding: 0 0 15px; }
  .js-multilanguage .multilanguage-language-selector a, .js-multilanguage .multilanguage-language-selector span {
    color: #ffab18;
    opacity: 0.5;
    font-size: 13px;
    margin: 0 5px; }
    .js-multilanguage .multilanguage-language-selector a:hover, .js-multilanguage .multilanguage-language-selector a.selected, .js-multilanguage .multilanguage-language-selector span:hover, .js-multilanguage .multilanguage-language-selector span.selected {
      color: #ffab18;
      opacity: 1; }
      .js-multilanguage .multilanguage-language-selector a:hover .Navbar-logo, .js-multilanguage .multilanguage-language-selector a.selected .Navbar-logo, .js-multilanguage .multilanguage-language-selector span:hover .Navbar-logo, .js-multilanguage .multilanguage-language-selector span.selected .Navbar-logo {
        display: none; }
    .js-multilanguage .multilanguage-language-selector a.notactive, .js-multilanguage .multilanguage-language-selector span.notactive {
      opacity: 0.5; }
    .js-multilanguage .multilanguage-language-selector a:first-child, .js-multilanguage .multilanguage-language-selector span:first-child {
      padding-left: 0;
      margin-left: 0; }

.js-multilanguage .multilanguage-content-inner {
  display: none;
  text-align: left;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
  line-height: 1.5; }
  .js-multilanguage .multilanguage-content-inner.active {
    display: block; }
    .js-multilanguage .multilanguage-content-inner.active .Navbar-logo {
      display: none; }

html[lang="ja"] .animated-banner {
  display: block;
  height: auto;
  margin: 41px auto 0;
  max-height: 250px;
  overflow: hidden;
  position: relative;
  width: 100%; }
  html[lang="ja"] .animated-banner__item {
    border-radius: 5px;
    display: block;
    height: auto;
    opacity: 0.5;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: opacity 350ms ease-out;
    width: 100%;
    z-index: 0; }
    html[lang="ja"] .animated-banner__item.active {
      opacity: 1;
      position: relative;
      z-index: 1; }
  html[lang="ja"] .animated-banner img {
    display: block;
    height: auto;
    position: relative;
    width: 100%; }

html[lang="ja"] .home-main-news-item {
  margin-top: 15px; }
  @media (min-width: 600px) {
    html[lang="ja"] .home-main-news-item {
      margin-top: 20px; } }
  @media (min-width: 1024px) {
    html[lang="ja"] .home-main-news-item {
      margin-top: 29px; } }

html[lang="ja"] .FAQ-svg-container-plus svg {
  display: inline-block;
  height: 14px;
  left: 0 !important;
  position: relative !important;
  top: -1px !important;
  width: 14px; }

html[lang="ja"] .FAQ-svg-container-minus svg {
  left: 0px !important;
  position: relative !important;
  top: -1px !important; }

html[lang="ja"] .Languagebar-primarynav a[href*="/ru"] {
  font-family: Apple SD Gothic Neo, Arial, sans-serif; }

html[lang="ja"] .Footer-primarynav {
  width: 70% !important; }

html[lang="ja"] .article .links .next span,
html[lang="ja"] .article .links .prev span {
  font-weight: bolder; }

html[lang="ja"] .article .links .icon.icon-next svg {
  margin-top: -3px; }

html[lang="ja"] .article .links .icon.icon-prev svg {
  margin-top: -3px; }
  @media (max-width: 599px) {
    html[lang="ja"] .article .links .icon.icon-prev svg {
      margin-top: -4px; } }

html[lang="ja"] .home .home-news-primary-item-date, html[lang="ja"] .blog .home-news-primary-item-date {
  font-size: 13px; }

@media (min-width: 600px) {
  html[lang="ja"] .home .section-homepage-community .home-community-content-item h3, html[lang="ja"] .blog .section-homepage-community .home-community-content-item h3 {
    font-size: 15px; } }

@media (min-width: 1024px), (min-width: 1440px) {
  html[lang="ja"] .home .section-homepage-community .home-community-content-item h3, html[lang="ja"] .blog .section-homepage-community .home-community-content-item h3 {
    font-size: 15px; } }

html[lang="ja"] .home-news-primary-item-holder .home-news-primary-item .home-news-primary-item-content h3 {
  font-size: 15px; }

@media (min-width: 600px) {
  .home html[lang="ja"] .home-news-primary-item-holder .home-news-primary-item .home-news-primary-item-content h3, .blog html[lang="ja"] .home-news-primary-item-holder .home-news-primary-item .home-news-primary-item-content h3 {
    font-size: 15px; } }

html[lang="ja"] .button-primary .button-primary-arrow {
  line-height: 52px; }

html[lang="ja"] .section-homepage-main .home-main-news-item-content p a,
html[lang="ja"] .home-news-primary-item-holder .home-news-primary-item-excerpt a {
  font-weight: bolder;
  white-space: nowrap; }

html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] h5, html[lang="ja"] h6, html[lang="ja"] strong {
  font-weight: bold !important; }

html[lang="ja"] .blog h1 {
  font-size: 32px; }

html[lang="ja"] .section-categories-filter {
  font-weight: bolder; }

html[lang="ja"] .Navbar-primarynav a {
  font-size: 23px;
  font-weight: bolder;
  padding: 22px 0; }

html[lang="ja"] .Navbar-secondarynav a {
  font-size: 14px;
  padding: 9px 0; }

html[lang="ja"] .section-pagination a {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Arial, sans-serif, Arial, sans-serif; }

* {
  box-sizing: border-box; }

body {
  background-color: #000; }

#app {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  position: relative; }

.App {
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 100vh; }

.disable-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%; }
  .disable-scroll body {
    overflow: hidden; }

.noscroll {
  height: 100%;
  width: 100%;
  overflow: hidden; }

.no-transition {
  transition: none !important; }

.not-fixed {
  position: absolute !important; }

.ScrollDown {
  display: none; }
  .ScrollDown .icon-arrow {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: rotate(90deg);
    height: 16px;
    width: 25px;
    margin-left: -8px; }
  @media (min-width: 1024px), (min-width: 1440px) {
    .ScrollDown {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 149px;
      text-align: center;
      background-image: url("../img/arrow_shadow.png");
      background-repeat: no-repeat;
      background-position: bottom center;
      z-index: 10000;
      display: none;
      opacity: 0; } }

.lazyloaded {
  background-color: transparent; }

@keyframes fade-in-only {
  0% {
    opacity: 0.3;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  100% {
    opacity: 0.8; } }

@keyframes fade-in {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.3, 0, 0, 1); }
  76.92% {
    opacity: 1;
    animation-timing-function: linear; }
  100% {
    opacity: 1; } }

@keyframes sneak-in-text {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
    animation-timing-function: cubic-bezier(0.345, 0.275, 0, 1); }
  76.92% {
    opacity: 1;
    transform: translate(0px, 0px);
    animation-timing-function: linear; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes sneak-in {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  76.92% {
    opacity: 1;
    transform: translate(0px, 0px);
    animation-timing-function: linear; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes sneak-out {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  100% {
    transform: translate(-100%, 0px); } }

/* FROM THE RIGHT */
@keyframes sneak-in-text-right {
  0% {
    opacity: 0;
    transform: translate(100px, 0px);
    animation-timing-function: cubic-bezier(0.345, 0.275, 0, 1); }
  76.92% {
    opacity: 1;
    transform: translate(0px, 0px);
    animation-timing-function: linear; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes sneak-in-right {
  0% {
    opacity: 0;
    transform: translate(100px, 0px);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  76.92% {
    opacity: 1;
    transform: translate(0px, 0px);
    animation-timing-function: linear; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes sneak-out-right {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  100% {
    transform: translate(100%, 0px); } }

/* FIXME: fix me! */
.is--android .download--ios,
.is--ios .download--android {
  display: none; }