@media screen {
  .js-compare-product .print-section {
      display: none;
  }
}

@media print {
  .js-compare-product .main-content * {
    display:none;
  }
  .js-compare-product .print-section, .js-compare-product .print-section * {
    visibility:visible;
  }
  .js-compare-product .print-section {
    position:absolute;
    left:0;
    top:0;
  }

}
@charset "UTF-8";
/**
 * Foundation for Sites by ZURB
 * Version 6.3.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Document
       ========================================================================== */
/**
     * 1. Change the default font family in all browsers (opinionated).
     * 2. Correct the line height in all browsers.
     * 3. Prevent adjustments of font size after orientation changes in
     *    IE on Windows Phone and in iOS.
     */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

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

/**
     * Add the correct display in IE 9-.
     */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
     * 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
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
figcaption,
figure {
  display: block; }

/**
     * Add the correct margin in IE 8.
     */
figure {
  margin: 1em 40px; }

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

/**
     * Add the correct display in IE.
     */
main {
  display: block; }

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

/* Links
       ========================================================================== */
/**
     * 1. Remove the gray background on active links in IE 10.
     * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
     */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
     * Remove the outline on focused links when they are also active or hovered
     * in all browsers (opinionated).
     */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
       ========================================================================== */
/**
     * 1. Remove the bottom border in Firefox 39-.
     * 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 */ }

/**
     * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
     */
b,
strong {
  font-weight: inherit; }

/**
     * 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 style in Android 4.3-.
     */
dfn {
  font-style: italic; }

/**
     * Add the correct background and color in IE 9-.
     */
mark {
  background-color: #ff0;
  color: #000; }

/**
     * 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
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
audio,
video {
  display: inline-block; }

/**
     * Add the correct display in iOS 4-7.
     */
audio:not([controls]) {
  display: none;
  height: 0; }

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

/**
     * Hide the overflow in IE.
     */
svg:not(:root) {
  overflow: hidden; }

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

/**
     * Show the overflow in IE.
     */
button {
  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; }

/**
     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
     *    controls in Android 4.
     * 2. Correct the inability to style clickable types in iOS and Safari.
     */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  /**
       * Remove the inner border and padding in Firefox.
       */
  /**
       * Restore the focus styles unset by the previous rule.
       */ }
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }

/**
     * Show the overflow in Edge.
     */
input {
  overflow: visible; }

/**
     * 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 and cancel buttons in Chrome and Safari on macOS.
       */ }
  [type="search"]::-webkit-search-cancel-button, [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 */ }

/**
     * Change the border, margin, and padding in all browsers (opinionated).
     */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
     * 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 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  color: inherit;
  /* 2 */
  white-space: normal;
  /* 1 */ }

/**
     * 1. Add the correct display in IE 9-.
     * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
     */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
     * Remove the default vertical scrollbar in IE.
     */
textarea {
  overflow: auto; }

/* Interactive
       ========================================================================== */
/*
     * Add the correct display in Edge, IE, and Firefox.
     */
details {
  display: block; }

/*
     * Add the correct display in all browsers.
     */
summary {
  display: list-item; }

/*
     * Add the correct display in IE 9-.
     */
menu {
  display: block; }

/* Scripting
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
canvas {
  display: inline-block; }

/**
     * Add the correct display in IE.
     */
template {
  display: none; }

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

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }

html {
  box-sizing: border-box;
  font-size: 100%; }

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

body {
  margin: 0;
  padding: 0;
  background: #fefefe;
  font-weight: normal;
  line-height: 1.5;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; }

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 0; }

select {
  box-sizing: border-box;
  width: 100%;
  border-radius: 0; }

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important; }

button {
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1; }
  [data-whatinput='mouse'] button {
    outline: 0; }

pre {
  overflow: auto; }

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

p {
  margin-bottom: 1rem;
  font-size: inherit;
  line-height: 1.6;
  text-rendering: optimizeLegibility; }

em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: bold;
  line-height: inherit; }

small {
  font-size: 80%;
  line-height: inherit; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: normal;
  font-weight: normal;
  color: inherit;
  text-rendering: optimizeLegibility; }
  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small {
    line-height: 0;
    color: #cacaca; }

h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

h3 {
  font-size: 1.1875rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

h4 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

h5 {
  font-size: 1.0625rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

h6 {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

@media print, screen and (min-width: 40em) {
  h1 {
    font-size: 3rem; }
  h2 {
    font-size: 2.5rem; }
  h3 {
    font-size: 1.9375rem; }
  h4 {
    font-size: 1.5625rem; }
  h5 {
    font-size: 1.25rem; }
  h6 {
    font-size: 1rem; } }

a {
  line-height: inherit;
  color: #1779ba;
  text-decoration: none;
  cursor: pointer; }
  a:hover, a:focus {
    color: #1468a0; }
  a img {
    border: 0; }

hr {
  clear: both;
  max-width: 75rem;
  height: 0;
  margin: 1.25rem auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  border-left: 0; }

ul,
ol,
dl {
  margin-bottom: 1rem;
  list-style-position: outside;
  line-height: 1.6; }

li {
  font-size: inherit; }

ul {
  margin-left: 1.25rem;
  list-style-type: disc; }

ol {
  margin-left: 1.25rem; }

ul ul, ol ul, ul ol, ol ol {
  margin-left: 1.25rem;
  margin-bottom: 0; }

dl {
  margin-bottom: 1rem; }
  dl dt {
    margin-bottom: 0.3rem;
    font-weight: bold; }

blockquote {
  margin: 0 0 1rem;
  padding: 0.5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #cacaca; }
  blockquote, blockquote p {
    line-height: 1.6;
    color: #8a8a8a; }

cite {
  display: block;
  font-size: 0.8125rem;
  color: #8a8a8a; }
  cite:before {
    content: "— "; }

abbr {
  border-bottom: 1px dotted #0a0a0a;
  color: #0a0a0a;
  cursor: help; }

figure {
  margin: 0; }

code {
  padding: 0.125rem 0.3125rem 0.0625rem;
  border: 1px solid #cacaca;
  background-color: #e6e6e6;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #0a0a0a; }

kbd {
  margin: 0;
  padding: 0.125rem 0.25rem 0;
  background-color: #e6e6e6;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  color: #0a0a0a; }

.subheader {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
  line-height: 1.4;
  color: #8a8a8a; }

.lead {
  font-size: 125%;
  line-height: 1.6; }

.stat {
  font-size: 2.5rem;
  line-height: 1; }
  p + .stat {
    margin-top: -1rem; }

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

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

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

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

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

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left; }
  .medium-text-right {
    text-align: right; }
  .medium-text-center {
    text-align: center; }
  .medium-text-justify {
    text-align: justify; } }

@media print, screen and (min-width: 64em) {
  .large-text-left {
    text-align: left; }
  .large-text-right {
    text-align: right; }
  .large-text-center {
    text-align: center; }
  .large-text-justify {
    text-align: justify; } }

.show-for-print {
  display: none !important; }

@media print {
  * {
    background: transparent !important;
    box-shadow: none !important;
    color: black !important;
    text-shadow: none !important; }
  .show-for-print {
    display: block !important; }
  .hide-for-print {
    display: none !important; }
  table.show-for-print {
    display: table !important; }
  thead.show-for-print {
    display: table-header-group !important; }
  tbody.show-for-print {
    display: table-row-group !important; }
  tr.show-for-print {
    display: table-row !important; }
  td.show-for-print {
    display: table-cell !important; }
  th.show-for-print {
    display: table-cell !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  .ir a:after,
  a[href^='javascript:']:after,
  a[href^='#']:after {
    content: ''; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  pre,
  blockquote {
    border: 1px solid #8a8a8a;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

.row {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto; }
  .row::before, .row::after {
    display: table;
    content: ' '; }
  .row::after {
    clear: both; }
  .row.collapse > .column, .row.collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  .row .row {
    margin-right: -0.625rem;
    margin-left: -0.625rem; }
    @media print, screen and (min-width: 40em) {
      .row .row {
        margin-right: -0.9375rem;
        margin-left: -0.9375rem; } }
    @media print, screen and (min-width: 64em) {
      .row .row {
        margin-right: -0.9375rem;
        margin-left: -0.9375rem; } }
    .row .row.collapse {
      margin-right: 0;
      margin-left: 0; }
  .row.expanded {
    max-width: none; }
    .row.expanded .row {
      margin-right: auto;
      margin-left: auto; }
  .row:not(.expanded) .row {
    max-width: none; }
  .row.gutter-small > .column, .row.gutter-small > .columns {
    padding-right: 0.625rem;
    padding-left: 0.625rem; }
  .row.gutter-medium > .column, .row.gutter-medium > .columns {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem; }

.column, .columns {
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .column, .columns {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    float: right; }
  .column.end:last-child:last-child, .end.columns:last-child:last-child {
    float: left; }

.column.row.row, .row.row.columns {
  float: none; }

.row .column.row.row, .row .row.row.columns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0; }

.small-1 {
  width: 8.33333%; }

.small-push-1 {
  position: relative;
  left: 8.33333%; }

.small-pull-1 {
  position: relative;
  left: -8.33333%; }

.small-offset-0 {
  margin-left: 0%; }

.small-2 {
  width: 16.66667%; }

.small-push-2 {
  position: relative;
  left: 16.66667%; }

.small-pull-2 {
  position: relative;
  left: -16.66667%; }

.small-offset-1 {
  margin-left: 8.33333%; }

.small-3 {
  width: 25%; }

.small-push-3 {
  position: relative;
  left: 25%; }

.small-pull-3 {
  position: relative;
  left: -25%; }

.small-offset-2 {
  margin-left: 16.66667%; }

.small-4 {
  width: 33.33333%; }

.small-push-4 {
  position: relative;
  left: 33.33333%; }

.small-pull-4 {
  position: relative;
  left: -33.33333%; }

.small-offset-3 {
  margin-left: 25%; }

.small-5 {
  width: 41.66667%; }

.small-push-5 {
  position: relative;
  left: 41.66667%; }

.small-pull-5 {
  position: relative;
  left: -41.66667%; }

.small-offset-4 {
  margin-left: 33.33333%; }

.small-6 {
  width: 50%; }

.small-push-6 {
  position: relative;
  left: 50%; }

.small-pull-6 {
  position: relative;
  left: -50%; }

.small-offset-5 {
  margin-left: 41.66667%; }

.small-7 {
  width: 58.33333%; }

.small-push-7 {
  position: relative;
  left: 58.33333%; }

.small-pull-7 {
  position: relative;
  left: -58.33333%; }

.small-offset-6 {
  margin-left: 50%; }

.small-8 {
  width: 66.66667%; }

.small-push-8 {
  position: relative;
  left: 66.66667%; }

.small-pull-8 {
  position: relative;
  left: -66.66667%; }

.small-offset-7 {
  margin-left: 58.33333%; }

.small-9 {
  width: 75%; }

.small-push-9 {
  position: relative;
  left: 75%; }

.small-pull-9 {
  position: relative;
  left: -75%; }

.small-offset-8 {
  margin-left: 66.66667%; }

.small-10 {
  width: 83.33333%; }

.small-push-10 {
  position: relative;
  left: 83.33333%; }

.small-pull-10 {
  position: relative;
  left: -83.33333%; }

.small-offset-9 {
  margin-left: 75%; }

.small-11 {
  width: 91.66667%; }

.small-push-11 {
  position: relative;
  left: 91.66667%; }

.small-pull-11 {
  position: relative;
  left: -91.66667%; }

.small-offset-10 {
  margin-left: 83.33333%; }

.small-12 {
  width: 100%; }

.small-offset-11 {
  margin-left: 91.66667%; }

.small-up-1 > .column, .small-up-1 > .columns {
  float: left;
  width: 100%; }
  .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
    clear: both; }
  .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
    float: left; }

.small-up-2 > .column, .small-up-2 > .columns {
  float: left;
  width: 50%; }
  .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
    clear: both; }
  .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
    float: left; }

.small-up-3 > .column, .small-up-3 > .columns {
  float: left;
  width: 33.33333%; }
  .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
    clear: both; }
  .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
    float: left; }

.small-up-4 > .column, .small-up-4 > .columns {
  float: left;
  width: 25%; }
  .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
    clear: both; }
  .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
    float: left; }

.small-up-5 > .column, .small-up-5 > .columns {
  float: left;
  width: 20%; }
  .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
    clear: both; }
  .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
    float: left; }

.small-up-6 > .column, .small-up-6 > .columns {
  float: left;
  width: 16.66667%; }
  .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
    clear: both; }
  .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
    float: left; }

.small-up-7 > .column, .small-up-7 > .columns {
  float: left;
  width: 14.28571%; }
  .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) {
    clear: both; }
  .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child {
    float: left; }

.small-up-8 > .column, .small-up-8 > .columns {
  float: left;
  width: 12.5%; }
  .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) {
    clear: both; }
  .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child {
    float: left; }

.small-collapse > .column, .small-collapse > .columns {
  padding-right: 0;
  padding-left: 0; }

.small-collapse .row {
  margin-right: 0;
  margin-left: 0; }

.expanded.row .small-collapse.row {
  margin-right: 0;
  margin-left: 0; }

.small-uncollapse > .column, .small-uncollapse > .columns {
  padding-right: 0.625rem;
  padding-left: 0.625rem; }

.small-centered {
  margin-right: auto;
  margin-left: auto; }
  .small-centered, .small-centered:last-child:not(:first-child) {
    float: none;
    clear: both; }

.small-uncentered,
.small-push-0,
.small-pull-0 {
  position: static;
  float: left;
  margin-right: 0;
  margin-left: 0; }

@media print, screen and (min-width: 40em) {
  .medium-1 {
    width: 8.33333%; }
  .medium-push-1 {
    position: relative;
    left: 8.33333%; }
  .medium-pull-1 {
    position: relative;
    left: -8.33333%; }
  .medium-offset-0 {
    margin-left: 0%; }
  .medium-2 {
    width: 16.66667%; }
  .medium-push-2 {
    position: relative;
    left: 16.66667%; }
  .medium-pull-2 {
    position: relative;
    left: -16.66667%; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-3 {
    width: 25%; }
  .medium-push-3 {
    position: relative;
    left: 25%; }
  .medium-pull-3 {
    position: relative;
    left: -25%; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-4 {
    width: 33.33333%; }
  .medium-push-4 {
    position: relative;
    left: 33.33333%; }
  .medium-pull-4 {
    position: relative;
    left: -33.33333%; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-5 {
    width: 41.66667%; }
  .medium-push-5 {
    position: relative;
    left: 41.66667%; }
  .medium-pull-5 {
    position: relative;
    left: -41.66667%; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-6 {
    width: 50%; }
  .medium-push-6 {
    position: relative;
    left: 50%; }
  .medium-pull-6 {
    position: relative;
    left: -50%; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-7 {
    width: 58.33333%; }
  .medium-push-7 {
    position: relative;
    left: 58.33333%; }
  .medium-pull-7 {
    position: relative;
    left: -58.33333%; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-8 {
    width: 66.66667%; }
  .medium-push-8 {
    position: relative;
    left: 66.66667%; }
  .medium-pull-8 {
    position: relative;
    left: -66.66667%; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-9 {
    width: 75%; }
  .medium-push-9 {
    position: relative;
    left: 75%; }
  .medium-pull-9 {
    position: relative;
    left: -75%; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-10 {
    width: 83.33333%; }
  .medium-push-10 {
    position: relative;
    left: 83.33333%; }
  .medium-pull-10 {
    position: relative;
    left: -83.33333%; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-11 {
    width: 91.66667%; }
  .medium-push-11 {
    position: relative;
    left: 91.66667%; }
  .medium-pull-11 {
    position: relative;
    left: -91.66667%; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-12 {
    width: 100%; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-up-1 > .column, .medium-up-1 > .columns {
    float: left;
    width: 100%; }
    .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
      float: left; }
  .medium-up-2 > .column, .medium-up-2 > .columns {
    float: left;
    width: 50%; }
    .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
      float: left; }
  .medium-up-3 > .column, .medium-up-3 > .columns {
    float: left;
    width: 33.33333%; }
    .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
      float: left; }
  .medium-up-4 > .column, .medium-up-4 > .columns {
    float: left;
    width: 25%; }
    .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
      float: left; }
  .medium-up-5 > .column, .medium-up-5 > .columns {
    float: left;
    width: 20%; }
    .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
      float: left; }
  .medium-up-6 > .column, .medium-up-6 > .columns {
    float: left;
    width: 16.66667%; }
    .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
      float: left; }
  .medium-up-7 > .column, .medium-up-7 > .columns {
    float: left;
    width: 14.28571%; }
    .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) {
      clear: both; }
    .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child {
      float: left; }
  .medium-up-8 > .column, .medium-up-8 > .columns {
    float: left;
    width: 12.5%; }
    .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) {
      clear: both; }
    .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child {
      float: left; }
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  .medium-collapse .row {
    margin-right: 0;
    margin-left: 0; }
  .expanded.row .medium-collapse.row {
    margin-right: 0;
    margin-left: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem; }
  .medium-centered {
    margin-right: auto;
    margin-left: auto; }
    .medium-centered, .medium-centered:last-child:not(:first-child) {
      float: none;
      clear: both; }
  .medium-uncentered,
  .medium-push-0,
  .medium-pull-0 {
    position: static;
    float: left;
    margin-right: 0;
    margin-left: 0; } }

@media print, screen and (min-width: 64em) {
  .large-1 {
    width: 8.33333%; }
  .large-push-1 {
    position: relative;
    left: 8.33333%; }
  .large-pull-1 {
    position: relative;
    left: -8.33333%; }
  .large-offset-0 {
    margin-left: 0%; }
  .large-2 {
    width: 16.66667%; }
  .large-push-2 {
    position: relative;
    left: 16.66667%; }
  .large-pull-2 {
    position: relative;
    left: -16.66667%; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-3 {
    width: 25%; }
  .large-push-3 {
    position: relative;
    left: 25%; }
  .large-pull-3 {
    position: relative;
    left: -25%; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-4 {
    width: 33.33333%; }
  .large-push-4 {
    position: relative;
    left: 33.33333%; }
  .large-pull-4 {
    position: relative;
    left: -33.33333%; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-5 {
    width: 41.66667%; }
  .large-push-5 {
    position: relative;
    left: 41.66667%; }
  .large-pull-5 {
    position: relative;
    left: -41.66667%; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-6 {
    width: 50%; }
  .large-push-6 {
    position: relative;
    left: 50%; }
  .large-pull-6 {
    position: relative;
    left: -50%; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-7 {
    width: 58.33333%; }
  .large-push-7 {
    position: relative;
    left: 58.33333%; }
  .large-pull-7 {
    position: relative;
    left: -58.33333%; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-8 {
    width: 66.66667%; }
  .large-push-8 {
    position: relative;
    left: 66.66667%; }
  .large-pull-8 {
    position: relative;
    left: -66.66667%; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-9 {
    width: 75%; }
  .large-push-9 {
    position: relative;
    left: 75%; }
  .large-pull-9 {
    position: relative;
    left: -75%; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-10 {
    width: 83.33333%; }
  .large-push-10 {
    position: relative;
    left: 83.33333%; }
  .large-pull-10 {
    position: relative;
    left: -83.33333%; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-11 {
    width: 91.66667%; }
  .large-push-11 {
    position: relative;
    left: 91.66667%; }
  .large-pull-11 {
    position: relative;
    left: -91.66667%; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-12 {
    width: 100%; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-up-1 > .column, .large-up-1 > .columns {
    float: left;
    width: 100%; }
    .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
      float: left; }
  .large-up-2 > .column, .large-up-2 > .columns {
    float: left;
    width: 50%; }
    .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
      float: left; }
  .large-up-3 > .column, .large-up-3 > .columns {
    float: left;
    width: 33.33333%; }
    .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
      float: left; }
  .large-up-4 > .column, .large-up-4 > .columns {
    float: left;
    width: 25%; }
    .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
      float: left; }
  .large-up-5 > .column, .large-up-5 > .columns {
    float: left;
    width: 20%; }
    .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
      float: left; }
  .large-up-6 > .column, .large-up-6 > .columns {
    float: left;
    width: 16.66667%; }
    .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
      float: left; }
  .large-up-7 > .column, .large-up-7 > .columns {
    float: left;
    width: 14.28571%; }
    .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) {
      clear: both; }
    .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child {
      float: left; }
  .large-up-8 > .column, .large-up-8 > .columns {
    float: left;
    width: 12.5%; }
    .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) {
      clear: both; }
    .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child {
      float: left; }
  .large-collapse > .column, .large-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  .large-collapse .row {
    margin-right: 0;
    margin-left: 0; }
  .expanded.row .large-collapse.row {
    margin-right: 0;
    margin-left: 0; }
  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem; }
  .large-centered {
    margin-right: auto;
    margin-left: auto; }
    .large-centered, .large-centered:last-child:not(:first-child) {
      float: none;
      clear: both; }
  .large-uncentered,
  .large-push-0,
  .large-pull-0 {
    position: static;
    float: left;
    margin-right: 0;
    margin-left: 0; } }

.column-block {
  margin-bottom: 1.25rem; }
  .column-block > :last-child {
    margin-bottom: 0; }
  @media print, screen and (min-width: 40em) {
    .column-block {
      margin-bottom: 1.875rem; }
      .column-block > :last-child {
        margin-bottom: 0; } }

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.4375rem;
  margin: 0 0 1rem;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  color: #0a0a0a;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
  [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
  textarea:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }

textarea {
  max-width: 100%; }
  textarea[rows] {
    height: auto; }

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #cacaca; }

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #cacaca; }

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #cacaca; }

input::placeholder,
textarea::placeholder {
  color: #cacaca; }

input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
  background-color: #e6e6e6;
  cursor: not-allowed; }

[type='submit'],
[type='button'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0; }

input[type='search'] {
  box-sizing: border-box; }

[type='file'],
[type='checkbox'],
[type='radio'] {
  margin: 0 0 1rem; }

[type='checkbox'] + label,
[type='radio'] + label {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0; }
  [type='checkbox'] + label[for],
  [type='radio'] + label[for] {
    cursor: pointer; }

label > [type='checkbox'],
label > [type='radio'] {
  margin-right: 0.5rem; }

[type='file'] {
  width: 100%; }

label {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.8;
  color: #0a0a0a; }
  label.middle {
    margin: 0 0 1rem;
    padding: 0.5625rem 0; }

.help-text {
  margin-top: -0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: #0a0a0a; }

.input-group {
  display: table;
  width: 100%;
  margin-bottom: 1rem; }
  .input-group > :first-child {
    border-radius: 0 0 0 0; }
  .input-group > :last-child > * {
    border-radius: 0 0 0 0; }

.input-group-label, .input-group-field, .input-group-button, .input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  margin: 0;
  white-space: nowrap;
  display: table-cell;
  vertical-align: middle; }

.input-group-label {
  padding: 0 1rem;
  border: 1px solid #cacaca;
  background: #e6e6e6;
  color: #0a0a0a;
  text-align: center;
  white-space: nowrap;
  width: 1%;
  height: 100%; }
  .input-group-label:first-child {
    border-right: 0; }
  .input-group-label:last-child {
    border-left: 0; }

.input-group-field {
  border-radius: 0;
  height: 2.5rem; }

.input-group-button {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  width: 1%;
  height: 100%; }
  .input-group-button a,
  .input-group-button input,
  .input-group-button button,
  .input-group-button label {
    height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem; }

.input-group .input-group-button {
  display: table-cell; }

fieldset {
  margin: 0;
  padding: 0;
  border: 0; }

legend {
  max-width: 100%;
  margin-bottom: 0.5rem; }

.fieldset {
  margin: 1.125rem 0;
  padding: 1.25rem;
  border: 1px solid #cacaca; }
  .fieldset legend {
    margin: 0;
    margin-left: -0.1875rem;
    padding: 0 0.1875rem;
    background: #fefefe; }

select {
  height: 2.4375rem;
  margin: 0 0 1rem;
  padding: 0.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  font-family: inherit;
  font-size: 1rem;
  line-height: normal;
  color: #0a0a0a;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-origin: content-box;
  background-position: right -1rem center;
  background-repeat: no-repeat;
  background-size: 9px 6px;
  padding-right: 1.5rem;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
  @media screen and (min-width: 0\0) {
    select {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } }
  select:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
  select:disabled {
    background-color: #e6e6e6;
    cursor: not-allowed; }
  select::-ms-expand {
    display: none; }
  select[multiple] {
    height: auto;
    background-image: none; }

.is-invalid-input:not(:focus) {
  border-color: #cc4b37;
  background-color: #f9ecea; }
  .is-invalid-input:not(:focus)::-webkit-input-placeholder {
    color: #cc4b37; }
  .is-invalid-input:not(:focus)::-moz-placeholder {
    color: #cc4b37; }
  .is-invalid-input:not(:focus):-ms-input-placeholder {
    color: #cc4b37; }
  .is-invalid-input:not(:focus)::placeholder {
    color: #cc4b37; }

.is-invalid-label {
  color: #cc4b37; }

.form-error {
  display: none;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #cc4b37; }
  .form-error.is-visible {
    display: block; }

.button {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #1779ba;
  color: #fefefe; }
  [data-whatinput='mouse'] .button {
    outline: 0; }
  .button:hover, .button:focus {
    background-color: #14679e;
    color: #fefefe; }
  .button.tiny {
    font-size: 0.6rem; }
  .button.small {
    font-size: 0.75rem; }
  .button.large {
    font-size: 1.25rem; }
  .button.expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .button.primary {
    background-color: #1779ba;
    color: #fefefe; }
    .button.primary:hover, .button.primary:focus {
      background-color: #126195;
      color: #fefefe; }
  .button.secondary {
    background-color: #767676;
    color: #fefefe; }
    .button.secondary:hover, .button.secondary:focus {
      background-color: #5e5e5e;
      color: #fefefe; }
  .button.success {
    background-color: #3adb76;
    color: #0a0a0a; }
    .button.success:hover, .button.success:focus {
      background-color: #22bb5b;
      color: #0a0a0a; }
  .button.warning {
    background-color: #ffae00;
    color: #0a0a0a; }
    .button.warning:hover, .button.warning:focus {
      background-color: #cc8b00;
      color: #0a0a0a; }
  .button.alert {
    background-color: #cc4b37;
    color: #fefefe; }
    .button.alert:hover, .button.alert:focus {
      background-color: #a53b2a;
      color: #fefefe; }
  .button.hollow {
    border: 1px solid #1779ba;
    color: #1779ba; }
    .button.hollow, .button.hollow:hover, .button.hollow:focus {
      background-color: transparent; }
    .button.hollow:hover, .button.hollow:focus {
      border-color: #0c3d5d;
      color: #0c3d5d; }
    .button.hollow.primary {
      border: 1px solid #1779ba;
      color: #1779ba; }
      .button.hollow.primary:hover, .button.hollow.primary:focus {
        border-color: #0c3d5d;
        color: #0c3d5d; }
    .button.hollow.secondary {
      border: 1px solid #767676;
      color: #767676; }
      .button.hollow.secondary:hover, .button.hollow.secondary:focus {
        border-color: #3b3b3b;
        color: #3b3b3b; }
    .button.hollow.success {
      border: 1px solid #3adb76;
      color: #3adb76; }
      .button.hollow.success:hover, .button.hollow.success:focus {
        border-color: #157539;
        color: #157539; }
    .button.hollow.warning {
      border: 1px solid #ffae00;
      color: #ffae00; }
      .button.hollow.warning:hover, .button.hollow.warning:focus {
        border-color: #805700;
        color: #805700; }
    .button.hollow.alert {
      border: 1px solid #cc4b37;
      color: #cc4b37; }
      .button.hollow.alert:hover, .button.hollow.alert:focus {
        border-color: #67251a;
        color: #67251a; }
  .button.disabled, .button[disabled] {
    opacity: 0.25;
    cursor: not-allowed; }
    .button.disabled, .button.disabled:hover, .button.disabled:focus, .button[disabled], .button[disabled]:hover, .button[disabled]:focus {
      background-color: #1779ba;
      color: #fefefe; }
    .button.disabled.primary, .button[disabled].primary {
      opacity: 0.25;
      cursor: not-allowed; }
      .button.disabled.primary, .button.disabled.primary:hover, .button.disabled.primary:focus, .button[disabled].primary, .button[disabled].primary:hover, .button[disabled].primary:focus {
        background-color: #1779ba;
        color: #fefefe; }
    .button.disabled.secondary, .button[disabled].secondary {
      opacity: 0.25;
      cursor: not-allowed; }
      .button.disabled.secondary, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
        background-color: #767676;
        color: #fefefe; }
    .button.disabled.success, .button[disabled].success {
      opacity: 0.25;
      cursor: not-allowed; }
      .button.disabled.success, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success, .button[disabled].success:hover, .button[disabled].success:focus {
        background-color: #3adb76;
        color: #0a0a0a; }
    .button.disabled.warning, .button[disabled].warning {
      opacity: 0.25;
      cursor: not-allowed; }
      .button.disabled.warning, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning, .button[disabled].warning:hover, .button[disabled].warning:focus {
        background-color: #ffae00;
        color: #0a0a0a; }
    .button.disabled.alert, .button[disabled].alert {
      opacity: 0.25;
      cursor: not-allowed; }
      .button.disabled.alert, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert, .button[disabled].alert:hover, .button[disabled].alert:focus {
        background-color: #cc4b37;
        color: #fefefe; }
  .button.dropdown::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 0.4em;
    content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #fefefe transparent transparent;
    position: relative;
    top: 0.4em;
    display: inline-block;
    float: right;
    margin-left: 1em; }
  .button.arrow-only::after {
    top: -0.1em;
    float: none;
    margin-left: 0; }

.callout {
  position: relative;
  margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 0;
  background-color: white;
  color: #0a0a0a; }
  .callout > :first-child {
    margin-top: 0; }
  .callout > :last-child {
    margin-bottom: 0; }
  .callout.primary {
    background-color: #d7ecfa;
    color: #0a0a0a; }
  .callout.secondary {
    background-color: #eaeaea;
    color: #0a0a0a; }
  .callout.success {
    background-color: #e1faea;
    color: #0a0a0a; }
  .callout.warning {
    background-color: #fff3d9;
    color: #0a0a0a; }
  .callout.alert {
    background-color: #f7e4e1;
    color: #0a0a0a; }
  .callout.small {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem; }
  .callout.large {
    padding-top: 3rem;
    padding-right: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem; }

body.is-reveal-open {
  overflow: hidden; }

html.is-reveal-open,
html.is-reveal-open body {
  min-height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.reveal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1005;
  display: none;
  background-color: rgba(10, 10, 10, 0.45);
  overflow-y: scroll; }

.reveal {
  z-index: 1006;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: none;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto; }
  [data-whatinput='mouse'] .reveal {
    outline: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal {
      min-height: 0; } }
  .reveal .column, .reveal .columns,
  .reveal .columns {
    min-width: 0; }
  .reveal > :last-child {
    margin-bottom: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal {
      width: 600px;
      max-width: 75rem; } }
  @media print, screen and (min-width: 40em) {
    .reveal .reveal {
      right: auto;
      left: auto;
      margin: 0 auto; } }
  .reveal.collapse {
    padding: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal.tiny {
      width: 30%;
      max-width: 75rem; } }
  @media print, screen and (min-width: 40em) {
    .reveal.small {
      width: 50%;
      max-width: 75rem; } }
  @media print, screen and (min-width: 40em) {
    .reveal.large {
      width: 90%;
      max-width: 75rem; } }
  .reveal.full {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100vh;
    min-height: 100vh;
    margin-left: 0;
    border: 0;
    border-radius: 0; }
  @media screen and (max-width: 39.9375em) {
    .reveal {
      top: 0;
      left: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      height: 100vh;
      min-height: 100vh;
      margin-left: 0;
      border: 0;
      border-radius: 0; } }
  .reveal.without-overlay {
    position: fixed; }

.slide-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateY(-100%);
      transform: translateY(-100%);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-down.mui-enter.mui-enter-active {
  -ms-transform: translateY(0);
      transform: translateY(0); }

.slide-in-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateX(-100%);
      transform: translateX(-100%);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-left.mui-enter.mui-enter-active {
  -ms-transform: translateX(0);
      transform: translateX(0); }

.slide-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateY(100%);
      transform: translateY(100%);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-up.mui-enter.mui-enter-active {
  -ms-transform: translateY(0);
      transform: translateY(0); }

.slide-in-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateX(100%);
      transform: translateX(100%);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-right.mui-enter.mui-enter-active {
  -ms-transform: translateX(0);
      transform: translateX(0); }

.slide-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateY(0);
      transform: translateY(0);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-down.mui-leave.mui-leave-active {
  -ms-transform: translateY(100%);
      transform: translateY(100%); }

.slide-out-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateX(0);
      transform: translateX(0);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-right.mui-leave.mui-leave-active {
  -ms-transform: translateX(100%);
      transform: translateX(100%); }

.slide-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateY(0);
      transform: translateY(0);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-up.mui-leave.mui-leave-active {
  -ms-transform: translateY(-100%);
      transform: translateY(-100%); }

.slide-out-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: translateX(0);
      transform: translateX(0);
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-left.mui-leave.mui-leave-active {
  -ms-transform: translateX(-100%);
      transform: translateX(-100%); }

.fade-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 0;
  transition-property: opacity; }

.fade-in.mui-enter.mui-enter-active {
  opacity: 1; }

.fade-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 1;
  transition-property: opacity; }

.fade-out.mui-leave.mui-leave-active {
  opacity: 0; }

.hinge-in-from-top.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  -ms-transform-origin: top;
      transform-origin: top;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-top.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  -ms-transform-origin: right;
      transform-origin: right;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-right.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-bottom.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(90deg);
  -ms-transform-origin: bottom;
      transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-bottom.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(90deg);
  -ms-transform-origin: left;
      transform-origin: left;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-left.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-middle-x.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  -ms-transform-origin: center;
      transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-middle-y.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  -ms-transform-origin: center;
      transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-out-from-top.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: top;
      transform-origin: top;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-top.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: right;
      transform-origin: right;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-right.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.hinge-out-from-bottom.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: bottom;
      transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-bottom.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0; }

.hinge-out-from-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: left;
      transform-origin: left;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-left.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0; }

.hinge-out-from-middle-x.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: center;
      transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-middle-y.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  -ms-transform-origin: center;
      transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.scale-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: scale(0.5);
      transform: scale(0.5);
  transition-property: transform, opacity;
  opacity: 0; }

.scale-in-up.mui-enter.mui-enter-active {
  -ms-transform: scale(1);
      transform: scale(1);
  opacity: 1; }

.scale-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: scale(1.5);
      transform: scale(1.5);
  transition-property: transform, opacity;
  opacity: 0; }

.scale-in-down.mui-enter.mui-enter-active {
  -ms-transform: scale(1);
      transform: scale(1);
  opacity: 1; }

.scale-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: scale(1);
      transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1; }

.scale-out-up.mui-leave.mui-leave-active {
  -ms-transform: scale(1.5);
      transform: scale(1.5);
  opacity: 0; }

.scale-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: scale(1);
      transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1; }

.scale-out-down.mui-leave.mui-leave-active {
  -ms-transform: scale(0.5);
      transform: scale(0.5);
  opacity: 0; }

.spin-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: rotate(-0.75turn);
      transform: rotate(-0.75turn);
  transition-property: transform, opacity;
  opacity: 0; }

.spin-in.mui-enter.mui-enter-active {
  -ms-transform: rotate(0);
      transform: rotate(0);
  opacity: 1; }

.spin-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: rotate(0);
      transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1; }

.spin-out.mui-leave.mui-leave-active {
  -ms-transform: rotate(0.75turn);
      transform: rotate(0.75turn);
  opacity: 0; }

.spin-in-ccw.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: rotate(0.75turn);
      transform: rotate(0.75turn);
  transition-property: transform, opacity;
  opacity: 0; }

.spin-in-ccw.mui-enter.mui-enter-active {
  -ms-transform: rotate(0);
      transform: rotate(0);
  opacity: 1; }

.spin-out-ccw.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -ms-transform: rotate(0);
      transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1; }

.spin-out-ccw.mui-leave.mui-leave-active {
  -ms-transform: rotate(-0.75turn);
      transform: rotate(-0.75turn);
  opacity: 0; }

.slow {
  transition-duration: 750ms !important; }

.fast {
  transition-duration: 250ms !important; }

.linear {
  transition-timing-function: linear !important; }

.ease {
  transition-timing-function: ease !important; }

.ease-in {
  transition-timing-function: ease-in !important; }

.ease-out {
  transition-timing-function: ease-out !important; }

.ease-in-out {
  transition-timing-function: ease-in-out !important; }

.bounce-in {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  transition-delay: 300ms !important; }

.long-delay {
  transition-delay: 700ms !important; }

.shake {
  animation-name: shake-7; }

@keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(7%); }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(-7%); } }

.spin-cw {
  animation-name: spin-cw-1turn; }

@keyframes spin-cw-1turn {
  0% {
    transform: rotate(-1turn); }
  100% {
    transform: rotate(0); } }

.spin-ccw {
  animation-name: spin-cw-1turn; }

@keyframes spin-cw-1turn {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(1turn); } }

.wiggle {
  animation-name: wiggle-7deg; }

@keyframes wiggle-7deg {
  40%, 50%, 60% {
    transform: rotate(7deg); }
  35%, 45%, 55%, 65% {
    transform: rotate(-7deg); }
  0%, 30%, 70%, 100% {
    transform: rotate(0); } }

.shake,
.spin-cw,
.spin-ccw,
.wiggle {
  animation-duration: 500ms; }

.infinite {
  animation-iteration-count: infinite; }

.slow {
  animation-duration: 750ms !important; }

.fast {
  animation-duration: 250ms !important; }

.linear {
  animation-timing-function: linear !important; }

.ease {
  animation-timing-function: ease !important; }

.ease-in {
  animation-timing-function: ease-in !important; }

.ease-out {
  animation-timing-function: ease-out !important; }

.ease-in-out {
  animation-timing-function: ease-in-out !important; }

.bounce-in {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  animation-delay: 300ms !important; }

.long-delay {
  animation-delay: 700ms !important; }

 @charset 'utf-8';
/* ============================================================================
 * Base
 * ========================================================================= */
/* ----------------------------------------------------------------------------
 * Base > Default Over-ride
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  position: relative;
  width: 100%;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #fff;
  color: #333;
  font-family: "Roboto", Verdana, sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5;
  margin: 0 auto;
  padding: 0;
  word-break: normal;
  word-wrap: break-word;
}

html[lang="ja"] body {
  font-family: "Meiryo", "HiraKakuProN-W3", "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
}

html[lang="zh_CN"] body {
  font-family: "Microsoft YaHei", 微软雅黑, SimSun, sans-serif;
}

html[lang="zh_TW"] body {
  font-family: "Microsoft JhengHei", 微軟正黑體, PMingLiU, sans-serif;
}

body > img {
  float: left;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
table {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

a:link,
a[tabindex] {
  color: #00e;
  cursor: pointer;
  text-decoration: underline;
}

a:link:hover,
a:link:active,
a:link:focus,
a[tabindex]:hover,
a[tabindex]:active,
a[tabindex]:focus {
  text-decoration: none;
}

a:visited {
  color: #551a8b;
}

em,
strong,
b {
  font-style: normal;
}

strong {
  color: #f00;
}

ul {
  list-style: none;
}

ul,
ol,
dl {
  margin: 0;
}

img {
  height: auto;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  vertical-align: bottom;
}

iframe {
  border: 0;
  margin: 0;
  padding: 0;
}

button {
  border: 0;
  cursor: pointer;
  padding: 0;
}

button[disabled] {
  cursor: auto;
}

table {
  border-collapse: separate;
  table-layout: fixed;
}

table th,
table td {
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  vertical-align: middle;
}

table th > *:first-child,
table td > *:first-child {
  margin-top: 0 !important;
}

table th > *:last-child,
table td > *:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================================
 * Layout
 * ========================================================================= */
/* ----------------------------------------------------------------------------
 * Layout > Header
 * ------------------------------------------------------------------------- */
.header-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 30px;
  max-width: 1680px;
  min-width: 320px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .header-inner {
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding-right: 0;
  }
}
.header-inner .utility {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.header-inner .corporate {
  margin-right: 10px;
}
@media screen and (max-width: 1024px) {
  .header-inner .corporate {
    display: none;
  }
}
.header-inner .corporate > a {
  font-size: 1.2rem;
  text-decoration: none;
  color: #9f9f9f;
  display: block;
  padding: 21px 5px 0;
  position: relative;
}
.header-inner .corporate > a::before {
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  background: url(clientliball/image/icon-globe-02.png) no-repeat 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .header-inner .category {
    display: none;
  }
}
.header-inner .category .btn-category {
  display: block;
  padding: 30px 30px 30px 10px;
  text-decoration: none;
  line-height: 1.2;
}
.header-inner .category .view-category {
  font-size: 1.4rem;
  color: #009ad9;
  border-bottom: 1px solid #009ad9;
  display: block;
}
.header-inner .utl-region {
  border-left: 1px solid #ebebeb;
}
.header-inner .btn-region {
  padding: 27px 3px 27px 21px;
  background-color: transparent;
  display: block;
}
.header-inner .btn-region img {
  width: 19px;
  height: 13px;
  vertical-align: sub;
}
.header-inner .btn-region::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.header-inner .utl-humberger-menu {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
}
@media screen and (min-width: 1025px) {
  .header-inner .utl-humberger-menu {
    display: none;
  }
}
.header-inner .btn-hum {
  background-color: transparent;
  padding: 25px 20px;
}

/* --------------------------------------------------------------------
 * Layout > Header > region-section
 * ----------------------------------------------------------------- */
.region-section {
  max-width: 1240px;
  min-width: 320px;
  margin: 0 auto;
  position: relative;
}

/* --------------------------------------------------------------------
 * Layout > Header > region-select
 * ----------------------------------------------------------------- */
.region-select {
  padding: 30px;
}

/* --------------------------------------------------------------------
 * Layout > Header > region-select-inner
 * ----------------------------------------------------------------- */
.region-select-inner > b {
  font-weight: normal;
  font-size: 4rem;
  color: #009ad9;
}

/* --------------------------------------------------------------------
 * Layout > Header > region-list
 * ----------------------------------------------------------------- */
.region-list {
  margin-bottom: 40px;
}
.region-list .region {
  font-weight: bold;
  font-size: 1.75rem;
  letter-spacing: .15rem;
  text-align: left;
  margin-top: 40px;
  padding: 15px 15px 5px 10px;
  color: #009ad9;
}

/* --------------------------------------------------------------------
 * Layout > Header > locality
 * ----------------------------------------------------------------- */
.locality {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 25px;
}
@media screen and (max-width: 767px) {
  .locality {
    margin-left: 13px;
  }
}
.locality > li {
  width: 208px;
  margin-top: 25px;
  margin-left: 10px;
}
@media screen and (max-width: 767px) {
  .locality > li {
    margin-left: 0;
    width: 100%;
  }
}
.locality > li > a {
  display: block;
  text-decoration: none;
  color: #000;
}
.locality > li > a::after {
  content: "";
  display: block;
  clear: both;
}
.locality .flag {
  float: left;
  margin-right: 15px;
  width: 100%;
  max-width: 54px;
}
.locality .region-name {
  overflow: hidden;
  line-height: 1;
  font-size: 1.6rem;
  letter-spacing: .15rem;
}
.locality .language {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0;
  color: #009ad9;
  margin-top: 5px;
}

/* --------------------------------------------------------------------
 * Layout > Header > navi-area and navi-area-mobile
 * ----------------------------------------------------------------- */
.navi-container {
  background-color: #009ad9;
  position: relative;
}

.navi-area {
  width: 100%;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  max-width: 1680px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .navi-area {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  html.is-static .navi-area {
    display: block;
  }
}

.navi-area-mobile {
  width: 100%;
  position: relative;
  z-index: 999;
}
@media screen and (max-width: 1024px) {
  .navi-area-mobile {
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .navi-area-mobile {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .desktop-only {
    display: none;
  }
}

@media print {
  .global-navi .sub-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------
 * Layout > Header > global-navi and global-navi-mobile
 * ----------------------------------------------------------------- */
.global-navi {
  font-size: 1.4rem;
  letter-spacing: .15rem;
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .global-navi {
    display: block;
    padding: 0;
  }
}
@media screen and (min-width: 1025px) {
  .global-navi {
    display: block;
  }
}
.global-navi .menu {
  padding: 0 15px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
  position: relative;
}
.global-navi .menu > li a {
  text-decoration: none;
  color: #fff;
  display: block;
}
.global-navi .menu > li a:not([href]) {
  cursor: default;
}
html.is-static .global-navi .menu {
  display: block;
}

.global-navi-mobile {
  width: 100%;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 200%;
  perspective-origin: 50% 200%;
  position: relative;
  font-size: 1.5rem;
  letter-spacing: .15rem;
}
.global-navi-mobile > .dl-submenu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
}
.global-navi-mobile ul {
  padding: 0;
  list-style: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background: #095679;
  margin: 0;
}
.global-navi-mobile li {
  position: relative;
}
.global-navi-mobile li.dl-back {
  padding-left: 10px;
  background: #095679;
}
.global-navi-mobile li.dl-back::before {
  position: absolute;
  top: 3px;
  content: "\2023";
  font-size: 40px;
  left: 5px;
  color: #fff;
  transform: rotate(180deg);
}
.global-navi-mobile li.dl-back span {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  font-size: 14px;
  z-index: 0;
}
.global-navi-mobile li.dl-back a.link-label {
  display: inline-block;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  padding: 20px;
}
.global-navi-mobile li.dl-back a.link-back {
  z-index: 1;
  position: relative;
}
.global-navi-mobile li .dl-submenu {
  display: none;
}
.global-navi-mobile a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 20px 50px 20px 20px;
}
.global-navi-mobile a span.img-mob-container {
  display: inline-block;
  width: 130px;
  text-align: center;
  margin-right: 10px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 130px;
}
.global-navi-mobile a span.img-mob-container img {
  max-width: 100%;
  vertical-align: middle;
}

.global-navi-mobile a div {
  margin: auto 0;
}

@media screen and (max-width: 368px) {
  .global-navi-mobile a {
    font-size: 14px;
    padding: 18px 50px 18px 15px;
  }
}
.global-navi-mobile .dl-menu {
  position: absolute;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.global-navi-mobile .dl-menu .dl-submenu {
  border-top: 1px solid #3fbaea;
  background: #0080b4;
}
.global-navi-mobile .dl-menu .dl-submenu .dl-submenu {
  background: rgba(0, 180, 255, 0.8);
}
.global-navi-mobile .dl-menu .no-subitems .dl-submenu {
  background: #f0f0f0;
}
.global-navi-mobile .dl-menu .no-subitems .dl-submenu a {
  color: #000;
  padding: 20px 20px;
  display: flex;
}
@media screen and (max-width: 368px) {
  .global-navi-mobile .dl-menu .no-subitems .dl-submenu a {
    padding: 18px 15px;
  }
}
.global-navi-mobile .dl-menu.dl-menu-toggle {
  transition: all 0.3s ease;
}
.global-navi-mobile .dl-menu.dl-menuopen {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.global-navi-mobile .dl-menu li {
  border-bottom: 1px solid #3fbaea;
}
.global-navi-mobile .dl-menu li img.category-icon {
  vertical-align: middle;
  margin-right: 10px;
}
@media screen and (min-width: 369px) and (max-width: 767px) {
  .global-navi-mobile .dl-menu li img.category-icon {
    width: 30px;
    height: 30px;
  }
}
.global-navi-mobile .dl-menu li.add-caret span.dl-caret {
  color: #fff;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #3fbaea;
  height: auto;
  font-size: 40px;
  padding: 1px 15px;
  z-index: 1;
}
@media screen and (max-width: 368px) {
  .global-navi-mobile .dl-menu li.add-caret span.dl-caret {
    font-size: 34px;
    padding: 3px 10px;
  }
}

.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
  display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
  display: block;
}

.dl-menu.dl-subview li.dl-subviewopen.no-subitems ul {
  background: #f0f0f0;
}

.dl-menu.dl-subview li.dl-subviewopen.no-subitems ul a {
  color: #000;
  padding-right: 20px;
}

.dl-menu.dl-subview li.dl-subviewopen.no-subitems ul li.dl-back a {
  color: #fff;
}

/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
  -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
  animation: MenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
  100% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes MenuAnimOut2 {
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
}
.dl-menu.dl-animate-in-2 {
  -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
  animation: MenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
.global-navi-mobile > .dl-submenu.dl-animate-in-2 {
  -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
  animation: SubMenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
.global-navi-mobile > .dl-submenu.dl-animate-out-2 {
  -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
  animation: SubMenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
}
@media screen and (min-width: 1025px) {
  .global-navi .menu {
    height: 60px;
  }
  .global-navi .menu > li {
    padding: 0 20px;
    display: flex;
    align-items: stretch;
    position: relative;
  }
  .global-navi .menu > li::after {
    content: ' \01C0';
    position: absolute;
    right: -4px;
    font-size: 26px;
    top: 15%;
    color: #fff;
  }
  .global-navi .menu > li:last-child:after {
    content: '';
  }
  .global-navi .menu > li > a {
    text-align: center;
    padding: 10px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .global-navi .menu > li > a ~ .sub-menu {
    display: none;
  }
  .global-navi .menu > li:hover {
    background: #095679;
  }
  .global-navi .menu > li > .sub-menu .sub-menu-inner {
    position: absolute;
    margin-left: 0;
    background: #f0f0f0;
    display: none;
    left: 100%;
    top: 0;
    padding: 10px 0;
    min-height: 245px;
  }
  .global-navi .menu > li > .sub-menu .sub-menu-inner a:not([href]) {
    cursor: default;
  }
  .global-navi .menu > li > .sub-menu .menu-vert {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto !important;
    top: auto;
    margin-top: -42px;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub {
    background: #0186bd;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner {
    display: flex;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner div {
    width: 450px;
    padding: 5px 20px;
    border-right: 1px solid #afafaf;
    flex: 1 1 0%;
    min-width: 450px;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner div:last-child {
    border: none;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner h3 {
    font-size: 14px;
    font-weight: bold;
    color: #099dda;
    margin-bottom: 10px;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .menu-vert li {
    flex: 1 1 0;
    white-space: nowrap;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .menu-vert li a {
    position: relative;
    display: inline-block;
    padding: 5px 30px 5px 10px;
    color: #000;
    font-size: 13px;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .menu-vert li a:hover {
    color: #009ad9;
  }
  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .menu-vert li a > img.category-icon {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    width: 20px;
  }
  .global-navi .menu > li > .sub-menu .has-caret > a::after {
    content: '\25B8';
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 0;
    color: #f0f0f0;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items.menu-inner-items-divider {
    margin-top: 15px;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items li {
    flex: 0 0 auto;
    white-space: normal;
    width: 50%;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a {
    color: #000;
    padding: 5px 0;
    text-align: left;
    font-size: 13px;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a:hover {
    color: #009ad9;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a:not([href]) {
    cursor: default;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a.hasimg {
    text-align: center;
    text-decoration: none;
    text-align: center;
    margin-bottom: 8px;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a > img {
    display: block;
    margin: 0 auto 3px auto;
    padding: 0 20px;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a > img.category-icon {
    /* display: inline-block; */
    padding: 0;
    margin: 0 5px 0 0;
    vertical-align: middle;
    width: 20px;
    float: left;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a span {
    display: block;
  }
  .global-navi .sub-menu-inner > div .sub-menu-inner-items a span.text-normal {
    display: inline;
    text-transform: none;
  }
  .global-navi .sub-menu {
    position: absolute;
    background: #095679;
    top: 100%;
    z-index: 5;
    margin: 0;
    min-width: 100%;
    left: 0;
  }
  .global-navi .sub-menu > li {
    white-space: nowrap;
  }
  .global-navi .sub-menu > li > a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 10px 40px 10px 20px;
    position: relative;
  }
  .global-navi .sub-menu > li > a:not([href]) {
    cursor: default;
  }
  html.is-static .global-navi .sub-menu {
    position: static;
  }
  .global-navi .sub-menu-inner-items > li {
    padding: 0px 10px 0px 10px;
  }
  .global-navi .sub-menu-inner-items > li a:hover > img {
    opacity: 0.4;
  }
}

/* --------------------------------------------------------------------
 * Layout > Header > search-area
 * ----------------------------------------------------------------- */
.search-area {
  width: 120px;
  display: flex;
  align-items: right;
  position: relative;
  margin-right: 20px;
}
@media screen and (max-width: 1024px) {
  .search-area {
    position: static;
    -webkit-transform: none;
    transform: none;
    width: 60%;
    display: flex;
    align-items: right;
    position: relative;
    padding: 20px;
  }
}
.search-area .find {
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
}
.search-area input {
  border: none;
  background-color: transparent;
  width: 80px;
  height: 30px;
  transition: width .1s ease-in;
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .search-area input {
    width: 100%;
    transition: none;
    background-color: #fff;
    border-radius: 50px;
    padding: 0 10px;
  }
}
@media screen and (min-width: 1025px) {
  .search-area input {
    background-color: #fff;
    border-radius: 5px;
    width: 90px;
    height: 38px;
    font-size: 1.4rem;
  }
  .search-area input:focus {
    border: 1px solid #8de4ff;
    border-radius: 5px;
    width: 280px;
    padding: 0 10px;
  }
}
.search-area input:placeholder-shown {
  color: #8de4ff;
  font-size: 1.2rem;
  letter-spacing: .15rem;
}
.search-area input::-webkit-input-placeholder {
  color: #8de4ff;
  font-size: 1.2rem;
  letter-spacing: .15rem;
}
.search-area input:-moz-placeholder {
  color: #8de4ff;
  font-size: 1.2rem;
  letter-spacing: .15rem;
  opacity: 1;
}
.search-area input::-moz-placeholder {
  color: #8de4ff;
  font-size: 1.2rem;
  letter-spacing: .15rem;
  opacity: 1;
}
.search-area input:-ms-input-placeholder {
  color: #8de4ff;
  font-size: 1.2rem;
  letter-spacing: .15rem;
}
.search-area .btn-search {
  width: 15px;
  background: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 3px;
}
@media screen and (max-width: 1024px) {
  .search-area .btn-search {
    right: 30px;
  }
}

/* --------------------------------------------------------------------
 * Layout > Header > nav-search-bar
 * ----------------------------------------------------------------- */
.nav-search-bar {
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
  .nav-search-bar {
    position: static;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    padding: 0px;
  }
}

@media screen and (max-width: 640px) {
  .search-area {
    width: 100%;
  }

  .nav-search-bar {
    width: 100%;
  }
}
.btn-search img {
  vertical-align: baseline;
}

/* ----------------------------------------------------------------------------
 * Layout > Footer
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Layout > Footer > site-footer
 * ----------------------------------------------------------------- */
.site-footer {
  background-color: #009ad9;
  padding: 50px 0;
  margin: 30px 0 0;
}

/* --------------------------------------------------------------------
 * Layout > Footer > footer-inner
 * ----------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
  .footer-inner {
    padding: 0 30px;
    max-width: 1300px;
    margin: 0 auto;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > footer-logo
 * ----------------------------------------------------------------- */
.footer-logo {
  margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
  .footer-logo {
    margin-left: 30px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > footer-area
 * ----------------------------------------------------------------- */
.footer-area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
  .footer-area {
    display: block;
    padding: 0;
  }
}
@media screen and (max-width: 368px) {
  .footer-area {
    min-width: 320px;
  }
}
.footer-area nav {
  max-width: 1030px;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .footer-area nav {
    margin-bottom: 30px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > share-area
 * ----------------------------------------------------------------- */
.footer-area .share-area {
  padding-left: 20px;
  width: 210px;
}

.footer-area .share-area button {
  margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
  .footer-area .share-area {
    text-align: center;
    width: auto;
    margin: 0 auto;
    padding: 0;
  }

  .footer-area .share-area .btn-02 {
    margin: 0 auto 50px;
  }
}
@media screen and (max-width: 368px) {
  .footer-area .share-area .btn-02 {
    max-width: 290px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > footer-navi
 * ----------------------------------------------------------------- */
.footer-navi {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 1.4rem;
  letter-spacing: .15rem;
}

.footer-navi * {
  word-wrap: break-word;
}

@media screen and (max-width: 1024px) {
  .footer-navi {
    display: block;
    border-bottom: 1px solid #8de4ff;
  }

  .footer-navi-mobile {
    display: block;
  }

  .footer-navi-desktop {
    display: none;
  }
}
.footer-navi > li {
  width: 100%;
  max-width: 190px;
  margin-left: 20px;
}

@media screen and (max-width: 1024px) {
  .footer-navi > li {
    position: relative;
    margin-left: 0;
    max-width: none;
    border-top: 1px solid #8de4ff;
  }
}
.footer-navi > li:first-child {
  margin-left: 0;
}

.footer-navi > li > a,
.footer-navi > li > .navi-text {
  display: inline-block;
  min-height: 38px;
  width: auto;
}

@media screen and (max-width: 1024px) {
  .footer-navi > li > a,
  .footer-navi > li > .navi-text {
    display: inline-block;
    max-height: none;
    padding: 20px 50px 20px 30px;
    position: relative;
    cursor: pointer;
  }

  /* dropdown icon */
  .footer-navi > li > .dropdown-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  html.is-static .footer-navi > li > .dropdown-icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .footer-navi > li > .dropdown-icon.is-sp-active {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
.footer-navi a,
.footer-navi .navi-text {
  text-decoration: none;
  color: #fff;
}

.footer-navi a:hover {
  text-decoration: underline;
}

.footer-navi .sub-menu {
  margin-top: 20px;
}

@media screen and (max-width: 1024px) {
  .footer-navi > li > .dropdown-icon + .sub-menu,
  .footer-navi > li > .navi-text ~ .sub-menu {
    display: none;
    margin-bottom: 0;
  }

  html.is-static .footer-navi > li > .dropdown-icon + .sub-menu,
  html.is-static .footer-navi > li > .navi-text ~ .sub-menu {
    display: block;
    margin-bottom: 20px;
  }

  .footer-navi > li > .dropdown-icon.is-sp-active + .sub-menu {
    display: block;
    margin-bottom: 20px;
  }

  .footer-navi .sub-menu {
    margin: 0 30px 20px;
  }

  .footer-navi .sub-menu > li {
    position: relative;
  }

  .footer-navi .sub-menu > li > a,
  .footer-navi .sub-menu > li > .navi-text {
    margin-left: 15px;
    padding: 20px 50px 20px 0px;
    min-height: 38px;
  }
}
.footer-navi .sub-menu > li {
  margin-bottom: 15px;
}

.footer-navi .sub-menu > li:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 1025px) {
  .footer-navi > li > .dropdown-icon {
    display: none;
  }

  .footer-navi-mobile {
    display: none;
  }

  .footer-navi-desktop {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .footer-navi > li > .dropdown-icon {
    display: block;
    position: absolute;
    color: #fff;
    right: 0px;
    top: 0px;
    padding: 0 20px;
    width: auto;
    z-index: 5;
    font-size: 36px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > category-list
 * ----------------------------------------------------------------- */
.category-list {
  margin-bottom: 25px;
  display: -webkit-flex;
  display: flex;
}

@media screen and (max-width: 1024px) {
  .category-list {
    -webkit-justify-content: center;
    justify-content: center;
  }
}
.category-list li {
  margin-left: 48px;
  position: relative;
}

.category-list li::before {
  content: '/';
  display: block;
  color: #fff;
  position: absolute;
  top: 0;
  left: -24px;
}

.category-list li:first-child {
  margin-left: 0;
}

.category-list li:first-child::before {
  content: none;
}

.category-list a {
  text-decoration: none;
  color: #fff;
}

.category-list a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .category-list li {
    margin-left: 24px;
  }

  .category-list li::before {
    left: -14px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > footer-utility
 * ----------------------------------------------------------------- */
.footer-utility {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 1.2rem;
}

@media screen and (max-width: 1024px) {
  .footer-utility {
    display: block;
  }
}
.footer-utility a {
  text-decoration: none;
  color: #fff;
}

.footer-utility a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------
 * Layout > Footer > footer-utility-list
 * ----------------------------------------------------------------- */
.footer-utility-list {
  display: -webkit-flex;
  display: flex;
}

@media screen and (max-width: 1024px) {
  .footer-utility-list {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
  }
}
.footer-utility-list > li {
  position: relative;
  margin-left: 30px;
}

.footer-utility-list > li::before {
  content: '|';
  display: block;
  color: #fff;
  position: absolute;
  top: 0;
  left: -15px;
}

.footer-utility-list > li:first-child {
  margin-left: 0;
}

.footer-utility ul > li:first-child::before {
  content: none;
}

.copy {
  color: #8de4ff;
  margin-left: 10px;
}

@media screen and (max-width: 1024px) {
  .copy {
    text-align: center;
    margin-top: 20px;
    margin-left: 0;
  }
}
/* --------------------------------------------------------------------
 * Layout > Footer > sns-area
 * ----------------------------------------------------------------- */
.sns-area {
  margin: 0 auto;
}

/* --------------------------------------------------------------------
 * Layout > Footer > sns-set
 * ----------------------------------------------------------------- */
.sns-set {
  margin-bottom: 30px;
}

.sns-set .group {
  display: block;
  color: #8de4ff;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: .05rem;
  margin-bottom: 10px;
}

.sns-set ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 0;
}

.sns-set ul > li {
  position: relative;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  min-width: 25%;
  padding: 5px;
}

.sns-set ul > li > a {
  color: #fff;
  text-decoration: none;
}

.sns-set ul > li:hover::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: -1px;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .sns-set ul {
    -webkit-justify-content: center;
    justify-content: center;
  }

  .sns-set ul > li {
    margin: 0 10px 20px;
    min-width: auto;
  }
}

/* --------------------------------------------------------------------
 * Layout > Footer > sns-one-line-display > sns-line-area > sns-line-set
 * ----------------------------------------------------------------- */
.sns-one-line-display {
  text-align:center;
}

.sns-one-line-display .sns-line-area .sns-line-set {
  margin-bottom: 30px;
}

.sns-one-line-display .sns-line-area .sns-line-set .group {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: .1rem;
}

.sns-one-line-display .sns-line-area .sns-line-set ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.sns-one-line-display .sns-line-area .sns-line-set ul > li {
  position: relative;
  font-size: 1rem;
  color: #fff;
  padding: 15px;
}

.sns-one-line-display .sns-line-area .sns-line-set ul > li > a {
  color: #fff;
  text-decoration: none;
}

.sns-one-line-display .sns-line-area .sns-line-set ul > li:hover::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: -1px;
  left: 0;
}

/* ----------------------------------------------------------------------------
 * Layout > Main Content
 * ------------------------------------------------------------------------- */
main {
  margin-bottom: 60px;
  max-width: 1680px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------
 * Layout > Main Content > breadcrumb-area
 * ----------------------------------------------------------------- */
.breadcrumb-area {
  margin: 0 auto;
  max-width: 1280px;
}

.breadcrumb-area.in-image {
  position: relative;
  max-width: 1440px;
}

@media screen and (max-width: 1024px) {
  .breadcrumb-area {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Layout > Main Content > breadcrumb
 * ----------------------------------------------------------------- */
.breadcrumb {
  padding: 25px 20px;
  color: #009ad9;
  font-size: 1.2rem;
}

.in-image .breadcrumb {
  padding: 25px 100px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.breadcrumb a {
  color: #999;
  text-decoration: none;
}

.breadcrumb a:not([href]) {
  cursor: default;
}

.in-image .breadcrumb a {
  color: #fff;
}

/* --------------------------------------------------------------------
 * Layout > Main Content > container-area
 * ----------------------------------------------------------------- */
.container-area {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------
 * Layout > Main Content > lyt-sidebar
 * ----------------------------------------------------------------- */
.lyt-sidebar {
  max-width: 1260px;
  min-width: 320px;
  margin: 0 auto;
  padding: 0 20px;
}

.lyt-sidebar::after {
  content: '';
  display: block;
  clear: both;
}

@media screen and (max-width: 767px) {
  .lyt-sidebar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: 120px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Main Content > product-area-container
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .product-area-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/* --------------------------------------------------------------------
 * Layout > Main Content > sidebar-area
 * ----------------------------------------------------------------- */
.sidebar-area {
  width: 25.403225806451612%;
  float: left;
}

@media screen and (max-width: 767px) {
  .sidebar-area {
    float: none;
    width: 100%;
    padding: 0 10px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Main Content > main-discription-area
 * ----------------------------------------------------------------- */
.main-discription-area {
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .main-discription-area {
    -webkit-order: -1;
    order: -1;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
    padding: 0 10px 30px;
  }
}
/* --------------------------------------------------------------------
 * Layout > Main Content > main-contents
 * ----------------------------------------------------------------- */
.main-discription-area,
.main-contents,
.archive-series-area {
  width: 74.59677419354838%;
  float: right;
  padding: 10px;
}

@media screen and (max-width: 767px) {
  .main-discription-area,
  .main-contents,
  .archive-series-area {
    float: none;
    width: 100%;
  }
}
/* ============================================================================
 * Module
 * ========================================================================= */
/* ----------------------------------------------------------------------------
 * Module > Heading Modules
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Module > Heading Modules > heading-01,02
 * ----------------------------------------------------------------- */
.heading-01,
.heading-02 {
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 0 20px;
}

/* --------------------------------------------------------------------
 * Module > Heading Modules > heading-01
 * ----------------------------------------------------------------- */
.heading-01 {
  font-size: 6.2rem;
  color: #009ad9;
}

@media screen and (max-width: 767px) {
  .heading-01 {
    font-size: 3rem;
    margin-top: 20px;
  }
}
/* --------------------------------------------------------------------
 * Module > Heading Modules > heading-02
 * ----------------------------------------------------------------- */
.heading-02 {
  font-size: 1.2rem;
}

.heading-02::after,
.heading-03::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #009ad9;
  margin: 22px 0 12px;
}

/* --------------------------------------------------------------------
 * Module > Heading Modules > heading-03
 * ----------------------------------------------------------------- */
.heading-03 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 320px;
}

.heading-03::after {
  margin: 22px auto 12px;
}

/* ----------------------------------------------------------------------------
 * Module > Box Modules
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Module > Box Modules > pickup-box
 * ----------------------------------------------------------------- */
.pickup-box {
  max-width: 420px;
  text-align: center;
  position: relative;
  background-color: #009ad9;
  overflow: hidden;
}

.pickup-box > a::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.collective-list .pickup-box > a,
.pickup-box > a {
  color: #fff;
  letter-spacing: .15rem;
  display: block;
}

.collective-list .pickup-box > a:hover *,
.collective-list .pickup-box > a:focus * {
  opacity: .8;
}

.collective-list .pickup-box .btn-02:hover {
  color: #009ad9;
  background-color: #fff;
}

 .pickup-box2 {
   background-color: transparent;
 }

/* --------------------------------------------------------------------
 * Module > Box Modules > pickup-text
 * ----------------------------------------------------------------- */
.pickup-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 2rem;
  padding: 10px 5px;
}

.pickup-text {
  z-index: 1;
}

.pickup-text.icon-globe::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  background: url(clientliball/image/icon-globe.png) no-repeat 0 0;
  margin: 0 auto 11.904761904761903%;
}

.pickup-text .btn-pickup {
  margin-top: 14.285714285714285%;
}

.pickup-text .btn-pickup .btn-02 {
  padding: 13px 30px;
  border: none;
}

.pickup-text .title,
.pickup-text .remark {
  font-size: 1.6rem;
}

.pickup-text .title {
  margin-bottom: 3.571428571428571%;
}

.pickup-text .name::before,
.pickup-text .name::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #fff;
  margin: 0 auto;
}

.pickup-text .name::before {
  margin-bottom: 3.571428571428571%;
}

.pickup-text .name::after {
  margin-top: 3.571428571428571%;
}

.pickup-text .remark {
  margin-top: 3.571428571428571%;
}

@media screen and (max-width: 767px) {
  .pickup-text {
    font-size: 1.2rem;
    padding: 8px 4px;
  }
}

 .pickup-text2 {
   display: block;
   padding: 5px 5px;
   background: rgba(0, 0, 0, 0.7);
   position: absolute;
   bottom: 10px;
   left: 5px;
   right: 5px;
   z-index: 1;
 }

 /* --------------------------------------------------------------------
  * Module > Box Modules > pickup-image
  * ----------------------------------------------------------------- */
.pickup-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

 .pickup-image2 {
   padding: 0px 5px 0px 5px;
 }

/* --------------------------------------------------------------------
 * Module > Box Modules > collective-box-01,02,03
 * ----------------------------------------------------------------- */
.collective-box-01,
.collective-box-02,
.collective-box-03 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.collective-box-01.bg-white,
.collective-box-02.bg-white,
.collective-box-03.bg-white {
  background-color: #fff;
}

li.collective-box-01,
li.collective-box-02,
li.collective-box-03 {
  margin: 0;
}

.collective-box-01 .btn-01 {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .collective-box-01,
  .collective-box-02,
  .collective-box-03 {
    min-width: 280px;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > collective-box-02
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .collective-box-02 {
    position: relative;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > collective-box-03
 * ----------------------------------------------------------------- */
.collective-box-03 {
  display: block;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > collective-image
 * ----------------------------------------------------------------- */
.collective-image {
  -webkit-flex: none;
  flex: none;
  -webkit-order: -1;
  order: -1;
}

.collective-image.reset-order {
  -webkit-order: 0;
  order: 0;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > utl-collective-parts
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .collective-box-02 .utl-collective-parts {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto 0;
    bottom: 16.666666666666664%;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > item-image
 * ----------------------------------------------------------------- */
.item-image {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.item-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.item-image.item-image2 {
  height: 60%;
}

.item-image2 > img {
  max-height: 100%;
}

.item-image2 + div {
  height: 40%;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > collective-title
 * ----------------------------------------------------------------- */
.collective-title {
  font-weight: 500;
  letter-spacing: .15rem;
  margin: 40px 0 5px;
}

.collective-box-03 .collective-title {
  position: relative;
  min-height: 68px;
}

.collective-box-03 .collective-title .content {
  padding: 0 15px;
}

.collective-title-02 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.collective-title-02 .title-parts {
  display: block;
  font-size: 1.4rem;
  margin-top: 30px;
}

.collective-title-02 .title-parts::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #009ad9;
  margin: 22px auto 22px;
}

.collective-title-02 .title-parts-02 {
  font-weight: 500;
  display: block;
  margin-bottom: 50px;
  font-size: 2rem;
}

.collective-box-03 .collective-title-02 .title-parts-02 {
  margin-bottom: 10px;
}

.collective-title-02 .title-parts-03 {
  display: inline-block;
  color: #009ad9;
  margin-bottom: 10px;
  text-decoration: none;
  margin-top: auto;
}

.title-parts-03 > a {
  color: #009ad9;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .collective-box-02 .collective-title {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > collective-lead
 * ----------------------------------------------------------------- */
.collective-lead {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 auto 30px;
  width: 100%;
  max-width: 340px;
  padding: 0 10px;
}

@media screen and (max-width: 767px) {
  .collective-box-02 .collective-lead {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > collective-thing
 * ----------------------------------------------------------------- */
.collective-thing {
  margin-bottom: 60px;
}

.collective-thing:last-child {
  margin-bottom: 0;
}

.collective-title-02 + ul > .collective-thing > a {
  display: block;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > look-up-image
 * ----------------------------------------------------------------- */
.look-up-image {
  max-width: 1440px;
  min-width: 320px;
  margin: 0 auto 90px;
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > look-up-unit
 * ----------------------------------------------------------------- */
.look-up-unit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------
 * Module > Box Modules > utl-look-up
 * ----------------------------------------------------------------- */
.utl-look-up {
  margin-top: 42px;
  text-align: center;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > look-up
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .look-up {
    position: relative;
    z-index: 1;
    height: 320px;
  }

  .look-up img {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 100%;
    max-width: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Box Modules > group-box
 * ----------------------------------------------------------------- */
.group-box {
  margin: 30px 0;
}

/* --------------------------------------------------------------------
 * Module > Box Modules > lyt-box
 * ----------------------------------------------------------------- */
.lyt-box {
  max-width: 1280px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

/* ----------------------------------------------------------------------------
 * Module > Button Modules
 * ------------------------------------------------------------------------- */
.btn-01,
.btn-02,
.btn-03 {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
  padding: 19px 30px;
  display: inline-block;
}

a.btn-01,
a.btn-02,
a.btn-03 {
  text-decoration: none;
}

.btn-01:focus,
.btn-02:focus,
.btn-03:focus,
.btn-01:hover,
.btn-02:hover,
.btn-03:hover {
  background-color: #00557a;
}

@media screen and (max-width: 368px) {
  .btn-01,
  .btn-02,
  .btn-03 {
    padding: 10px 70px;
  }
}
/* --------------------------------------------------------------------
 * Module > Button Modules > btn-01
 * ----------------------------------------------------------------- */
.btn-01 {
  background-color: #009ad9;
  color: #fff;
}

a.btn-01 {
  color: #fff;
}

.btn-01[disabled] {
  background-color: #ccc;
}

/* --------------------------------------------------------------------
 * Module > Button Modules > btn-02
 * ----------------------------------------------------------------- */
.btn-02 {
  border: 1px solid #009ad9;
  background-color: #fff;
  color: #009ad9;
}

a.btn-02 {
  color: #009ad9;
}

.btn-02:hover,
.btn-02:focus {
  color: #fff;
}

/* --------------------------------------------------------------------
 * Module > Button Modules > btn-03
 * ----------------------------------------------------------------- */
.btn-03 {
  background-color: #009ad9;
  color: #fff;
}

a.btn-03 {
  color: #fff;
  margin-right: 20px;
}

.btn-03[disabled] {
  background-color: #ccc;
}

/* ----------------------------------------------------------------------------
 * Module > Component Modules
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-image-01 02 03 04
 * ----------------------------------------------------------------- */
.hero-image-01,
.hero-image-02,
.hero-image-03,
.hero-image-04 {
  margin: 0 auto 30px;
  max-width: 1680px;
  min-width: 320px;
  position: relative;
}

.hero-image-01.nobottommargin,
.hero-image-02.nobottommargin,
.hero-image-03.nobottommargin,
.hero-image-04.nobottommargin {
  margin-bottom: 0;
}

.hero-image-01.clickable:hover,
.hero-image-02.clickable:hover,
.hero-image-03.clickable:hover,
.hero-image-04.clickable:hover {
  opacity: 0.8;
}

.hero-image-01.hero-extension,
.hero-image-02.hero-extension,
.hero-image-03.hero-extension,
.hero-image-04.hero-extension,
.hero-image-01.join-collective,
.hero-image-02.join-collective,
.hero-image-03.join-collective,
.hero-image-04.join-collective {
  margin-bottom: 0;
}

.hero-image-04.embed {
  overflow: hidden;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > hero-image-02
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hero-image-02 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: column;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-image
 * ----------------------------------------------------------------- */
.hero-image {
  height: 540px;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.hero-extension .hero-image {
  height: 880px;
}

.hero-image img,
.hero-image video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: none;
}

.hero-image a {
  position: releative;
  top: 90%;
  left: 50px;
}

@media screen and (max-width: 1024px) {
  .hero-image img {
    margin-left: -200px;
  }

  .hero-extension .hero-image {
    height: 540px;
  }

  .hero-image a {
    margin-left: 200px;
  }

  .hero-image.centerzoom img {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .hero-image {
    height: 180px;
    overflow: hidden;
  }

  .hero-image-02 .hero-image {
    -webkit-order: -1;
    order: -1;
  }

  .hero-image-04 .hero-image {
    height: 300px;
  }

  .hero-image-03 .hero-image {
    display: none;
  }

  .hero-image-04 .hero-image img {
    width: auto;
    height: 100%;
  }

  .hero-image-04 .hero-image a {
    margin-left: 100px;
  }

  .hero-image img,
  .hero-extension .hero-image img {
    width: 1050px;
    margin-left: -100px;
  }

  .hero-image.centerzoom img {
    width: 150%;
    margin-left: 0;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-text-area
 * ----------------------------------------------------------------- */
.hero-text-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1440px;
  width: 100%;
  padding: 0 100px;
  margin: 130px auto 0;
  z-index: 1;
}

.hero-extension .hero-text-area {
  margin-top: 250px;
}

@media screen and (max-width: 1024px) {
  .hero-text-area {
    margin-top: 70px;
    padding: 0 70px;
  }

  .hero-extension .hero-text-area {
    margin-top: 17.578125%;
  }
}
@media screen and (max-width: 767px) {
  .hero-text-area {
    margin-top: 30px;
    padding: 0 40px;
    text-align: center;
  }

  .hero-image-02 .hero-text-area,
  .hero-image-03 .hero-text-area {
    position: static;
  }

  .hero-image-03 .hero-text-area {
    text-align: left;
    padding: 0 30px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-title
 * ----------------------------------------------------------------- */
.hero-title,
.hero-text {
  max-width: 840px;
  color: #fff;
}

.hero-extension .hero-title,
.hero-extension .hero-text {
  max-width: 930px;
}

@media screen and (max-width: 767px) {
  .hero-image-02 .hero-title,
  .hero-image-03 .hero-title,
  .hero-image-02 .hero-text {
    color: #000;
  }

  .hero-extension .hero-title,
  .hero-extension .hero-text {
    max-width: 400px;
  }
}
.hero-title {
  font-size: 6.2rem;
  line-height: 1.16;
  margin-bottom: 15px;
  position: relative;
}

.hero-extension .hero-title {
  font-size: 9rem;
}

@media screen and (max-width: 1024px) {
  .hero-extension .hero-title {
    font-size: 6.2rem;
  }
}
@media screen and (max-width: 767px) {
  .hero-title,
  .hero-extension .hero-title {
    font-size: 3rem;
  }

  .hero-image-01 .hero-title.sub-color {
    color: #FFFFFF;
  }

  .hero-title.sub-color {
    color: #009ad9;
  }
}
.hero-title .hero-title-parts {
  position: static;
  display: block;
  font-size: 3rem;
}

@media screen and (max-width: 767px) {
  .hero-title .hero-title-parts {
    position: static;
    margin-bottom: 20px;
    font-size: 1.6rem;
  }
}
.hero-title .hero-title-parts img {
  vertical-align: top;
}

.hero-title .hero-title-parts-logo {
  position: relative;
  left: 0;
  top: -70%;
  display: block;
  font-size: 3rem;
}

@media screen and (max-width: 767px) {
  .hero-title .hero-title-parts {
    position: static;
    margin-bottom: 20px;
    font-size: 1.6rem;
  }

  .hero-image-03 .hero-text-area .hero-title-parts {
    display: none;
  }
}
.hero-title .hero-title-parts-logo img {
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .hero-title .hero-title-parts-logo img {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-text
 * ----------------------------------------------------------------- */
.hero-extension .hero-text {
  font-size: 2.4rem;
}

@media screen and (max-width: 1024px) {
  .hero-extension .hero-text {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .hero-image-01 .hero-text,
  .hero-image-03 .hero-text,
  .hero-image-04 .hero-text {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > btn-hero
 * ----------------------------------------------------------------- */
.btn-hero {
  margin: 30px 0 30px;
}
/* --------------------------------------------------------------------
 * Module > Component Modules > playbtn-02
 * ----------------------------------------------------------------- */
.btn-hero .playbtn-02{
  padding: 0px 40px;
  border-radius: 20px;
  height: 50px;
}

.playbtn-02 .playbtn-text{
  line-height: 50px;
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
}

.playbtn-02 .playbtn-triangle{
  font-size: 25px;
  padding-right: 5px;
  vertical-align: middle;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .btn-hero .playbtn-02 {
    padding: 0px 35px;
  }

  .playbtn-02 .playbtn-text{
    font-size: 16px;
  }

  .playbtn-02 .playbtn-triangle{
    font-size: 20px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > hero-media-option, hero-media-image-only
 * ----------------------------------------------------------------- */
@media screen and (min-width: 414px) {
  .hero-image-04 .hero-image .hero-media-option {
    display: none;
  }

  .hero-image-04 .hero-image .hero-media-image-only {
    display: block;
  }
}
@media screen and (min-width: 767px) {
  .hero-image-04 .hero-image .hero-media-option {
    display: block;
  }

  .hero-image-04 .hero-image .hero-media-image-only {
    display: none;
  }
}

 /* --------------------------------------------------------------------
 * Module > Component Modules > hero-content-pc, hero-content-mobile
 * ----------------------------------------------------------------- */

 @media screen and (max-width: 414px) {
   .hero-image-04.embed .hero-content-pc {
     display: none;
   }

   .hero-image-04.embed .hero-content-mobile {
     display: block;
   }
 }

 @media screen and (min-width: 415px) {
   .hero-image-04.embed .hero-content-pc {
     display: block;
   }

   .hero-image-04.embed .hero-content-mobile {
     display: none;
   }
 }

 /* --------------------------------------------------------------------
  * Module > Component Modules > play-icon
  * ----------------------------------------------------------------- */
.play-icon {
  margin: 0 0 0 10px;
}

.play-icon img {
  vertical-align: middle;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-list-area
 * ----------------------------------------------------------------- */
.news-list-area {
  margin: 0 auto;
  max-width: 1280px;
  min-width: 320px;
  padding: 0 20px 30px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-head
 * ----------------------------------------------------------------- */
.news-head {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-head-02
 * ----------------------------------------------------------------- */
.news-head-02 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-list-01
 * ----------------------------------------------------------------- */
.news-list-01 > li {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-list-02
 * ----------------------------------------------------------------- */
.news-list-02 {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}
@media screen and (max-width: 767px) {
  .news-list-02 {
    margin-top: -40px;
  }
}
.news-list-02 > li {
  flex-basis: 25%;
  padding-left: 20px;
}
.news-list-02 > li a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .news-list-02 > li {
    flex-basis: 50%;
    padding-top: 40px;
  }
}
@media screen and (max-width: 368px) {
  .news-list-02 > li {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-text
 * ----------------------------------------------------------------- */
.news-text {
  border-top: 1px solid #ededed;
  padding: 45px 0;
  flex: 1;
}

.news-list-01 .news-text {
  padding: 60px 0;
}

@media screen and (max-width: 320px) {
  .news-list-01 .news-text {
    padding: 35px 0;
  }
}
.news-list-01 > li:last-child .news-text {
  border-bottom: 1px solid #ededed;
}

.news-list-01 .news-text .catch {
  display: block;
}

.news-text b > a {
  color: #000;
  text-decoration: none;
}

.news-text b > a:hover {
  text-decoration: underline;
}

.news-list-02 .news-text {
  border-top: none;
  padding: 20px 0 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-text-unit
 * ----------------------------------------------------------------- */
.news-text-unit {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 80%;
}

@media screen and (max-width: 767px) {
  .news-text-unit {
    width: 100%;
  }

  .news-text-unit .catch {
    width: 100%;
  }
}
.news-text-unit .date {
  display: block;
  width: 86px;
  text-align: center;
}

@media screen and (max-width: 368px) {
  .news-text-unit {
    margin-bottom: 30px;
  }
}
.news-list-02 .news-text-unit {
  display: block;
}
@media screen and (max-width: 368px) {
  .news-list-02 .news-text-unit {
    margin-bottom: 0;
  }
}
.news-list-02 .news-text-unit .date {
  margin-top: 5px;
  width: auto;
  text-align: left;
  color: #999;
  font-size: 1.4rem;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-image
 * ----------------------------------------------------------------- */
.news-image {
  margin-right: 20px;
}
.news-image a:hover img {
  opacity: .8;
}

@media screen and (max-width: 414px) {
  .news-list-01 .news-image {
    flex: 1;
  }
}
.news-list-02 .news-image {
  margin-right: 0;
  text-align: center;
}
.news-list-02 .news-image img {
  width: 100%;
}

.news-list-02 a:hover .news-image img {
  opacity: .8;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > utl-pagination
 * ----------------------------------------------------------------- */
.utl-pagination {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 20px 0 30px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.news-list-02 + .utl-pagination {
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 65px;
}
@media screen and (max-width: 368px) {
  .news-list-02 + .utl-pagination {
    margin-top: 40px;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > page-selector
 * ----------------------------------------------------------------- */
.page-selector {
  display: -webkit-flex;
  display: flex;
}

.page-selector ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  margin-right: 5px;
}

.page-selector ul > li {
  margin-left: 5px;
}

.page-selector a {
  color: #000;
}

.page-selector a:not([href]) {
  cursor: default;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-detail-area
 * ----------------------------------------------------------------- */
.news-detail-area {
  margin: 0 auto;
  padding: 0 20px 30px;
  max-width: 1175px;
  min-width: 320px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-detail-title
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .news-detail-title {
    margin: 30px 0 10px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > image-info
 * ----------------------------------------------------------------- */
.image-info {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .image-info {
    display: block;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > news-description
 * ----------------------------------------------------------------- */
.news-description {
  padding: 20px 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > news-description-title
 * ----------------------------------------------------------------- */
.news-description-title {
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > month
 * ----------------------------------------------------------------- */
.month {
  display: block;
  font-weight: bold;
  text-align: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > day
 * ----------------------------------------------------------------- */
.day {
  display: block;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > detail-image
 * ----------------------------------------------------------------- */
.detail-image {
  text-align: center;
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .detail-image {
    margin-left: 0;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > collective-wrap
 * ----------------------------------------------------------------- */
.collective-wrap {
  background-color: #f0f0f0;
  padding: 60px 0;
}

.bg-white {
  background-color: #fff;
}

.collective-wrap [class^="collective-list"],
.collective-wrap .heading-03 {
  min-width: 280px;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .collective-wrap [class^="collective-list"],
  .collective-wrap [class*="collective-box-"] {
    min-width: 280px;
  }
}
/*.collective-wrap:last-child{
    margin-bottom: -60px;
}*/
/* --------------------------------------------------------------------
 * Module > Component Modules > btn-collective
 * ----------------------------------------------------------------- */
.btn-collective {
  text-align: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > collective-list
 * ----------------------------------------------------------------- */
.collective-list {
  margin: 0 auto 30px;
  max-width: 1440px;
  min-width: 280px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.collective-list.ptn2 .utl-collective-parts {
  display: none;
}
.collective-list.ptn2 [class*="collective-box-"][onclick]:hover {
  opacity: 0.8;
  cursor: pointer;
}

.collective-list.with-pickup {
  max-width: 1680px;
}

.collective-list.col2 {
  max-width: 960px;
}

.collective-list > li {
  width: 33.333%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.collective-list.col2 > li {
  width: 50%;
}

.collective-list.col4 {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.collective-list.col4 > li {
  width: 25%;
}

.collective-list.col6 {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.collective-list.col6 > li {
  width: 16.666%;
}

.collective-list li > a {
  color: #000;
  text-decoration: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: none;
  flex: none;
  width: 100%;
}

.collective-list li > a:hover img,
.collective-list li > a:focus img {
  opacity: .8;
}

/* tablets */
@media screen and (max-width: 1024px) {
  .collective-list.with-pickup {
    max-width: 1024px;
  }

  .collective-list {
    max-width: 960px;
  }

  .collective-list > li,
  .collective-list.col4 > li {
    width: 50%;
  }

  .collective-list.col3 > li,
  .collective-list.col6 > li {
    width: 33.333%;
  }
}
/* mobile phone */
@media screen and (max-width: 767px) {
  .collective-list.col3 > li,
  .collective-list.col4 > li {
    width: 50%;
  }
}
@media screen and (max-width: 420px) {
  .collective-list.with-pickup {
    max-width: 420px;
  }

  .collective-list.col6 > li {
    width: 50%;
  }

  .collective-list > li,
  .collective-list.col2 > li,
  .collective-list.col3 > li,
  .collective-list.col4 > li {
    width: 100%;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > collective-list gutter
 * ----------------------------------------------------------------- */
.collective-list.gutter {
  max-width: 1460px;
  margin-top: -20px;
  padding: 0 10px;
}

.collective-list.gutter.col2 {
  max-width: 1000px;
}

.collective-list.gutter > li {
  padding: 20px 10px 0;
}

.collective-list.gutter.technology-logo-list2 {
  background-color: #ccc;
  padding: 30px 40px 50px 40px;
  max-width: none;
}

.technology-logo-list2 > li > a {
  background-color: #1779ba;
}

 .technology-logo-list2 > li > a > div {
   height: 150px;
 }

.technology-logo-list2 > li > a > div:hover{
  opacity: 0.8;
  color: #009ad9;
}

@media screen and (max-width: 767px) {
  .collective-list.gutter.technology-logo-list2 {
   padding: 30px 0 50px 0;
  }
}

 /* --------------------------------------------------------------------
  * Component > Common > BannerContent > banner-pattern
  * ----------------------------------------------------------------- */

 .banner-pattern2 {
   padding: 0px 20px 0 20px;
 }

 .banner-line {
   margin-top: 20px;
 }

 .banner-line::after {
   height: 0.5px;
   margin-bottom: 10px;
   margin-top: 10px;
 }

/* --------------------------------------------------------------------
 * Module > Component Modules > column2-box
 * ----------------------------------------------------------------- */
.column2-box {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  padding: 0 20px;
}

.column2-box p {
  margin-top: 30px;
}

.column2-box p:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .column2-box {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > left-column,right-column
 * ----------------------------------------------------------------- */
.column2-box .left-column,
.column2-box .right-column {
  width: 610px;
}

.left-column .technology {
  font-size: 4rem;
  display: inline-block;
  margin-bottom: 22px;
}

.left-column .logo-size {
  width: 264px;
}

.column2-box .right-column p {
  line-height: 2;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > left-column
 * ----------------------------------------------------------------- */
.left-column p {
  padding-right: 10px;
}

@media screen and (max-width: 767px) {
  .left-column {
    margin-bottom: 40px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > grade-chart
 * ----------------------------------------------------------------- */
.grade-chart {
  max-width: 1210px;
  min-width: 320px;
  margin: 30px auto 60px;
  padding: 0 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .grade-chart.mobile {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .grade-chart.desktop {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > impressive-text
 * ----------------------------------------------------------------- */
.impressive-text,
.impressive-text-harf,
.impressive-text-middle {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .3rem;
  padding-right: 10px;
}

.impressive-text-harf {
  font-size: 2rem;
}

.impressive-text-middle {
  font-size: 3rem;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .impressive-text {
    font-size: 3rem;
  }
}
.impressive-color {
  color: #009ad9;
}

.impressive-text + p,
.impressive-text-harf + p {
  margin-top: 30px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > sub-navi-area
 * ----------------------------------------------------------------- */
.sub-navi-area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 35px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  min-width: 320px;
}

@media screen and (max-width: 767px) {
  .sub-navi-area {
    display: block;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > sub-navi-heading
 * ----------------------------------------------------------------- */
.sub-navi-heading {
  font-size: 1.4rem;
  font-weight: 500;
  color: #009ad9;
}

@media screen and (max-width: 767px) {
  .sub-navi-heading {
    margin-bottom: 20px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > sub-navi
 * ----------------------------------------------------------------- */
.sub-navi {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .sub-navi {
    -webkit-justify-content: center;
    justify-content: center;
  }
}
.sub-navi > li {
  margin: 0 15px;
}

.sub-navi > li:first-child {
  margin-left: 30px;
}

@media screen and (max-width: 767px) {
  .sub-navi > li:first-child {
    margin-left: 15px;
  }
}
@media screen and (max-width: 368px) {
  .sub-navi > li:first-child {
    margin-left: 8px;
  }

  .sub-navi > li {
    margin: 0 8px;
  }
}
.sub-navi > li > a {
  color: #000;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.sub-navi > li > a.is-current::after,
.sub-navi > li > a:hover::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #009ad9;
  /*    margin: 8px 0 12px;*/
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > groupset-title
 * ----------------------------------------------------------------- */
.groupset-title {
  margin-bottom: 32px;
}

.groupset-title img {
  vertical-align: middle;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > showing-area
 * ----------------------------------------------------------------- */
.showing-area {
  margin: 30px 0 0;
  color: #999;
  text-align: right;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > seies-image-area
 * ----------------------------------------------------------------- */
.seies-image-area {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

.seies-image-area .heading-02 {
  padding-left: 0;
  font-size: 1.6rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-area
 * ----------------------------------------------------------------- */
.product-area {
  border-top: 1px solid #ccc;
  padding-top: 20px;
  /*padding-bottom: 60px;*/
}

.product-area .collective-list {
  margin-left: -10px;
  margin-right: -10px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

@media screen and (max-width: 767px) {
  .product-area .collective-list {
    min-width: auto;
    margin-bottom: 30px;
  }

  .product-area .collective-list > li {
    width: 50%;
  }
}
@media screen and (max-width: 368px) {
  .product-area .collective-list > li {
    width: 100%;
    min-width: 280px;
  }
}
.product-area .heading-02 {
  padding-left: 0;
  font-size: 1.6rem;
  font-weight: 500;
}

.no-separator .product-area:nth-child(2) {
  border-top: none;
  padding-top: 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-box
 * ----------------------------------------------------------------- */
.product-box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > checkbox
 * ----------------------------------------------------------------- */
.checkbox {
  margin-top: auto;
  padding-top: 20px;
  cursor: pointer;
}

.checkbox [type="checkbox"] {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  margin: 0 10px 0 3px;
}

.checkbox [type="checkbox"] + span {
  position: relative;
}

.checkbox [type="checkbox"]:focus + span {
  color: #009ad9;
}

.checkbox [type="checkbox"] + span::before {
  content: '';
  display: inline-block;
  vertical-align: text-bottom;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #009ad9;
  box-shadow: 0px 0px 0px 2px #fff inset;
  border-radius: 50px;
  margin-right: 5px;
  margin-left: -26px;
}

.checkbox [type="checkbox"]:focus + span::before {
  background-color: #eee;
}

.checkbox [type="checkbox"]:checked + span::before {
  background-color: #009ad9;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-image
 * ----------------------------------------------------------------- */
.product-image {
  -webkit-order: -1;
  order: -1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
}

.product-image img {
  -webkit-flex: none;
  flex: none;
}

.product-image > a > img {
  width: 100%;
}

.product-image div.product-image-logo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  width: 40%;
}

 .product-image div.product-image-logo > img {
   position: absolute;
   right: 0;
   bottom: 0;
 }

/* --------------------------------------------------------------------
 * Module > Component Modules > groupset-name
 * ----------------------------------------------------------------- */
.groupset-name {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin: 20px 0;
}

.groupset-name-rs {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin: 5px 0;
  display: block;
}

.groupset-name::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #009ad9;
  margin: 22px 0 12px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-name
 * ----------------------------------------------------------------- */
.product-name {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .15rem;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-link
 * ----------------------------------------------------------------- */
a.product-link {
  font-size: 1.2rem;
  font-weight: 500;
  color: #009ad9;
  text-decoration: none;
}

a.product-link:hover {
  color: #00557a;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > series
 * ----------------------------------------------------------------- */
.series {
  font-size: 1.2rem;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > products-number
 * ----------------------------------------------------------------- */
.products-number {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > products-genre-wrap
 * ----------------------------------------------------------------- */
.products-genre-wrap {
  margin-right: 40px;
  margin-bottom: 20px;
  padding: 30px 20px 30px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 767px) {
  .products-genre-wrap {
    margin-right: 0;
    border-bottom: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > products-genre
 * ----------------------------------------------------------------- */
.products-genre {
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .products-genre {
    margin-right: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
}
.products-genre ul {
  margin-top: 10px;
}

.products-genre > li > .js-toggle > .js-toggle-ui {
  color: #999;
}

.products-genre > li,
.products-genre > li ul > li {
  margin-bottom: 10px;
}

.products-genre .js-toggle-ui {
  position: relative;
  padding-left: 20px;
  margin-left: -20px;
}

.products-genre .js-toggle-content {
  padding-left: 20px;
}

.products-genre li button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.products-genre li button > span {
  position: absolute;
  top: 4px;
  left: 1px;
  width: 14px;
  height: 14px;
  overflow: hidden;
}

.products-genre .js-toggle.closed > .js-toggle-ui > button > span::before,
.products-genre .js-toggle.opened > .js-toggle-ui > button > span::before {
  content: '';
  background: url(clientliball/image/icon-toggle_open.png) no-repeat #fff 0 0;
  display: inline-block;
  width: 15px;
  height: 15px;
}

.products-genre .js-toggle.opened > .js-toggle-ui > button > span::before {
  background: url(clientliball/image/icon-toggle_close.png) no-repeat #fff 0 0;
}

.products-genre a {
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.products-genre a:hover {
  color: #009ad9;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > spec-table
 * ----------------------------------------------------------------- */
.spec-table {
  max-width: 980px;
  margin: 20px auto 0;
  width: 100%;
  text-align: left;
  border-spacing: 6px;
}

.spec-table th,
.spec-table td {
  background-color: #fff;
  border-bottom: none;
  border-right: none;
  padding: 10px 20px;
  font-size: 1.6rem;
}

.spec-table th {
  width: 38.333333333333334%;
  font-weight: normal;
  background-color: #CCCCCC;
}

.spec-table td {
  width: 61.66666666666666%;
}

@media screen and (max-width: 767px) {
  .spec-table tr {
    display: block;
  }

  .spec-table th,
  .spec-table td {
    width: 100%;
    display: block;
    text-align: left;
  }

  .spec-table th {
    margin-bottom: 6px;
  }

  .spec-table td {
    margin-bottom: 20px;
  }

  .spec-table tr:last-child td {
    margin-bottom: 0;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > search-result-area
 * ----------------------------------------------------------------- */
.search-result-area {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > result-table
 * ----------------------------------------------------------------- */
.result-table {
  border-top: 1px solid #009ad9;
  border-left: 1px solid #009ad9;
  border-spacing: 0;
  width: 100%;
  max-width: 1000px;
  min-height: 70px;
  text-align: left;
}

.result-table a {
  color: #000;
  text-decoration: none;
  display: block;
}

.result-table th a:hover,
.result-table td a:hover {
  text-decoration: underline;
}

.result-table td a:hover {
  background-color: #f0f0f0;
}

.result-table td:last-child a {
  color: #009ad9;
  text-decoration: underline;
}

.result-table th,
.result-table td {
  border-bottom: 1px solid #009ad9;
  border-right: 1px solid #009ad9;
  padding: 5px;
}

.result-table thead th,
.result-table thead td,
.result-table tbody th {
  background-color: #8de4ff;
  font-weight: normal;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > search-result-table-area
 * ----------------------------------------------------------------- */
.search-result-table-area {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  .search-result-table-area {
    padding: 0 10px;
  }
}
.search-result-table-area .utl-pagination {
  max-width: 960px;
  margin: 0 auto 60px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > search-result-table
 * ----------------------------------------------------------------- */
.search-result-table {
  width: 100%;
  border-spacing: 20px;
}

.search-result-table th,
.search-result-table td {
  padding: 10px 20px;
  border: none;
  align-items: center;
}

.search-result-table thead th {
  background-color: #00557a;
  color: #fff;
  font-weight: normal;
}

.search-result-table td {
  background-color: #fff;
}

.search-result-table .width-btn {
  position: relative;
  padding-right: 60px;
}

.search-result-table td .btn-show {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  height: 100%;
}

.search-result-table td .btn-01 {
  position: relative;
  padding: 0;
  width: 40px;
}

.search-result-table td .btn-01::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #009ad9;
  content: "";
}

.search-result-table td .btn-01:hover::before {
  background-color: #00557a;
}

.search-result-table td .btn-01::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-block;
  content: ">>";
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.search-result-table td .btn-01 .btn-show-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-block;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.search-result-table .mobile-thead {
  display: none;
}

@media screen and (max-width: 767px) {
  .search-result-table {
    border-spacing: 0;
  }

  .search-result-table thead {
    display: none;
  }

  .search-result-table tbody tr {
    display: block;
    margin-bottom: 40px;
  }

  .search-result-table tbody td {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 0 !important;
    width: 100% !important;
  }

  .search-result-table .mobile-thead {
    display: inline-block;
    padding: 10px 20px;
    width: 40%;
    text-align: left;
    font-weight: normal;
    font-size: 1.4rem;
  }

  .search-result-table .mobile-tbody {
    padding: 10px 20px;
    width: 60%;
  }

  .search-result-table .width-btn .mobile-tbody {
    padding-right: 60px;
  }
}
@media screen and (min-width: 487px) and (max-width: 767px) {
  .search-result-table .width-btn .mobile-tbody {
    padding-right: 165px;
  }

  .search-result-table td .btn-01 {
    width: 145px;
  }

  .search-result-table td .btn-01::after {
    z-index: 1;
  }

  .search-result-table td .btn-01 .btn-show-inner {
    z-index: 3;
  }
}
@media screen and (max-width: 486px) {
  .search-result-table .mobile-thead,
  .search-result-table .mobile-tbody {
    width: 50%;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > product-section
 * ----------------------------------------------------------------- */
.product-section {
  max-width: 1280px;
  min-width: 320px;
  margin: 20px auto 20px;
  padding: 0 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .product-section {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}
.product-section-content {
  flex: 0 0 0%;
  min-width: 50%;
}

.product-section-content:first-child {
  min-width: 45%;
}

.groupset-head-area,
.product-description-area {
  padding-left: 20px;
}

.product-section .heading-01 {
  padding-left: 0;
  margin-left: 0;
  font-size: 3.8rem;
}

.product-section .heading-02 {
  font-size: 1.6rem;
  font-weight: 500;
  margin: 20px 0;
  padding-left: 0;
}

.product-section .heading-02 img {
  margin: 10px 0;
}

@media screen and (max-width: 767px) {
  .product-section .heading-01 {
    font-size: 2.4rem;
  }

  .product-section .heading-01,
  .groupset-head-area,
  .product-scalable-area,
  .product-description-area {
    width: 100%;
    padding: 0;
    -webkit-flex: none;
    flex: none;
  }
}
/* helpers */
.product-section .show-sm {
  display: none;
}

.product-section .hide-sm {
  display: block;
}

@media screen and (max-width: 767px) {
  .product-section .show-sm {
    display: block;
  }

  .product-section .hide-sm {
    display: none;
  }
}

 /* --------------------------------------------------------------------
 * performanceindicator
 * ----------------------------------------------------------------- */
.performanceindicator {
  padding-bottom: 10px;
}

.performanceindicator + .heading-02 {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .performanceindicator {
    padding-bottom: 0;
  }

  .performanceindicator + a>img{
    margin-top: 20px;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-head
 * ----------------------------------------------------------------- */
.product-head {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > mark
 * ----------------------------------------------------------------- */
.mark {
  color: #fff;
  letter-spacing: .15rem;
  background-color: #009ad9;
  font-size: 0.7em;
  text-align:center;
  margin-left: 10px;
  padding: 2px 4px 2px 4px;
  position: relative;
  line-height: 14px;
  min-width: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}

.mark::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid #009ad9;
  border-bottom: 9px solid transparent;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-scalable-area
 * ----------------------------------------------------------------- */
.product-scalable-area {
  margin-bottom: 40px;
}

.product-scalable-area .collective-list {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

@media screen and (max-width: 767px) {
  .product-scalable-area .collective-list {
    max-width: 600px;
    min-width: 280px;
    margin-left: 0;
  }

  .product-scalable-area .collective-list > li {
    width: 33.333%;
    min-width: auto;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > scalable-image
 * ----------------------------------------------------------------- */
.scalable-image {
  position: relative;
  margin-bottom: 20px;
}

.scalable-image img {
  width: 100%;
}

.collective-list.scalable-image-list > li:only-child {
  display: none;
}

@media screen and (min-width: 1025px) {
  .collective-list.scalable-image-list > li {
    width: auto;
  }

  .collective-list.scalable-image-list .btn-change-image > img {
    width: 80px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > utl-scalable
 * ----------------------------------------------------------------- */
.utl-scalable {
  display: -webkit-flex;
  display: flex;
  padding: 10px 0;
  justify-content: flex-end;
  position: absolute;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, 0%);
  left: 100%;
  width: 100%;
  z-index: 1;
}

.utl-scalable > li {
  margin: 0 0 0 15px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-scalable-01
 * ----------------------------------------------------------------- */
.btn-scalable-01 {
  background-color: transparent;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-description-area
 * ----------------------------------------------------------------- */
.product-description-area {
  font-size: 1.6rem;
}

.product-description-area p {
  margin-bottom: 15px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > .product-feature-list
 * ----------------------------------------------------------------- */
.product-feature-list {
  margin: 20px 0 40px;
}

.product-feature-list > li {
  margin: 20px 0;
}

.product-feature-list > li ul {
  list-style-type: disc;
  padding-left: 15px;
}

.product-feature-list ul > li {
  margin-bottom: 10px;
}

.product-feature-list .js-toggle > .js-toggle-ui {
  color: #999;
  margin-bottom: 10px;
}

.product-feature-list .js-toggle-ui {
  position: relative;
  padding-left: 20px;
  margin-left: 0;
}

.product-feature-list .js-toggle-content {
  padding-left: 10px;
}

.product-feature-list .js-toggle button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.product-feature-list .js-toggle button > span {
  position: absolute;
  top: 4px;
  left: 1px;
  width: 14px;
  height: 14px;
  overflow: hidden;
}

.product-feature-list .js-toggle.closed > .js-toggle-ui > button > span::before,
.product-feature-list .js-toggle.opened > .js-toggle-ui > button > span::before {
  content: '';
  background: url(clientliball/image/icon-toggle_open.png) no-repeat #fff 0 0;
  display: inline-block;
  width: 15px;
  height: 15px;
}

.product-feature-list .js-toggle.opened > .js-toggle-ui > button > span::before {
  background: url(clientliball/image/icon-toggle_close.png) no-repeat #fff 0 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > list-01
 * ----------------------------------------------------------------- */
.list-01 {
  list-style-type: disc;
  padding-left: 15px;
  margin-bottom: 30px;
}

.list-01 > li {
  margin-bottom: 15px;
}

.list-01 > li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-group
 * ----------------------------------------------------------------- */
.btn-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.btn-group > li {
  width: 160px;
  margin: 0 20px 20px 0;
}

@media screen and (max-width: 1024px) {
  .btn-group > li {
    margin: 0 10px 10px 0;
  }
}
@media screen and (max-width: 380px) {
  .btn-group {
    margin-right: 0;
    -webkit-justify-content: center;
    justify-content: center;
  }
}
.btn-group > li .btn-01,
.btn-group > li .btn-02 {
  width: 100%;
  display: block;
  padding: 13px 5px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-group-size
 * ----------------------------------------------------------------- */
.btn-group-size {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
}

.btn-group-size > li {
  width: 90px;
  margin: 0 20px 0px 0;
}

@media screen and (max-width: 1024px) {
  .btn-group-size > li {
    margin: 0 10px 0px 0;
  }
}
@media screen and (max-width: 380px) {
  .btn-group-size {
    margin-right: 0;
    -webkit-justify-content: center;
    justify-content: center;
  }
}
.btn-group-size > li .btn-01,
.btn-group-size > li .btn-02 {
  width: 100%;
  display: block;
  padding: 13px 5px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > share-dialog
 * ----------------------------------------------------------------- */
.share-dialog {
  position: relative;
}

.share-dialog .js-toggle.opened::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 3;
}

.share-dialog .js-toggle-ui,
.share-dialog .js-toggle-content {
  position: relative;
}

.share-dialog .js-toggle-ui:hover > .btn-02 {
  color: #fff;
  background-color: #00557a;
}

.share-dialog button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.share-dialog .js-toggle.opened button {
  background-color: #00557a;
  z-index: 10;
}

.share-dialog button > span {
  position: relative;
  z-index: -1;
}

.share-dialog .js-toggle.opened button > span {
  z-index: 1;
  color: #fff;
}

.share-dialog.active a {
  background: #00557a;
  color: #fff;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > share-btn-group
 * ----------------------------------------------------------------- */
.share-btn-group {
  padding: 10px;
  position: absolute;
  left: 0;
  background-color: #ededed;
  z-index: 10;
  display: none;
}

.share-btn-group > li {
  margin-bottom: 10px;
  width: 140px;
}

.share-btn-group > li:last-child {
  margin-bottom: 0;
}

.share-btn-group > li > a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #ccc;
  padding: 15px 10px;
  color: #fff;
  text-decoration: none;
}

.share-btn-group > li > a:hover {
  box-shadow: none;
}

.share-btn-group > li > .twitter {
  background-color: #1da1f2;
  box-shadow: 0 -5px 0 #0092ca inset;
}

.share-btn-group > li > .facebook {
  background-color: #3564a2;
  box-shadow: 0 -5px 0 #2c4373 inset;
}

.share-btn-group > li > .google-plus {
  background-color: #db4a39;
  box-shadow: 0 -5px 0 #ad3a2d inset;
}

.twitter::before,
.facebook::before,
.google-plus::before {
  content: '';
  display: inline-block;
  background: url(clientliball/image/logo-twitter-large.png) no-repeat 0 0;
  background-size: contain;
  width: 14px;
  height: 14px;
  margin-right: 10px;
}

.facebook::before {
  background: url(clientliball/image/logo-facebook-large.png) no-repeat 0 0;
  background-size: contain;
}

.google-plus::before {
  background: url(https://www.gstatic.com/images/icons/gplus-64.png) no-repeat 0 0;
  background-size: contain;
  width: 22px;
  height: 22px;
  margin-right: 5px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-variation-area
 * ----------------------------------------------------------------- */
.product-variation-area {
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.product-variation-area.has-icon {
  padding-top: 0;
}
.product-variation-area .collective-has-icon {
  display: -webkit-flex;
  display: flex;
}
.product-variation-area .collective-has-icon .collective-icon {
  width: 6%;
  margin-top: 5%;
  margin-right: 1%;
}
.product-variation-area .collective-has-icon .collective-icon li {
  margin-bottom: 10px;
}
.product-variation-area .collective-has-icon .collective-icon li:last-child {
  margin-bottom: 0;
}
.product-variation-area .collective-has-icon .collective-icon img {
  width: 100%;
}
.product-variation-area .collective-has-icon .collective-list {
  width: 94%;
  margin-bottom: -10px;
}
.product-variation-area .collective-has-icon .collective-list li {
  font-size: 1.35rem;
  word-break: break-all;
  line-height: 1.05;
  letter-spacing: -0.7px;
}
.product-variation-area .collective-has-icon .collective-list li > a {
  padding-right: 5px;
}
.product-variation-area .collective-has-icon .collective-list li img {
  position: relative;
  display: block;
  width: 90%;
  margin: 0 auto -15px;
  z-index: -1;
}
.product-variation-area .collective-has-icon .collective-list li small {
  font-size: 1.0rem;
  letter-spacing: -0.1px;
}
.product-variation-area .collective-has-icon .collective-list li small span {
  display: inline-block;
  margin-top: 2px;
  font-weight: bold;
}

.product-variation-area .collective-list li {
  display: block;
}

.product-variation-area .collective-list li > a {
  padding-right: 5px;
  display: block;
}

.product-variation-area .collective-list li .is-new {
  color: #009ad9;
}

@media screen and (max-width: 1220px) {
  .product-variation-area .collective-has-icon .collective-list li {
    font-size: 1.2rem;
    letter-spacing: -1.0px;
  }
}
@media screen and (max-width: 1024px) {
  .product-variation-area .collective-has-icon .collective-icon {
    margin-top: 12%;
  }
  .product-variation-area .collective-has-icon .collective-list li {
    font-size: 1.4rem;
    letter-spacing: normal;
  }
}
@media screen and (max-width: 767px) {
  .product-variation-area .collective-has-icon .collective-icon {
    width: 12%;
    margin-top: 10%;
    margin-right: 4%;
  }
  .product-variation-area .collective-has-icon .collective-list {
    min-width: 0;
    width: 84%;
  }
  .product-variation-area .collective-has-icon .collective-list li {
    width: 50%;
  }
  .product-variation-area .collective-has-icon .collective-list li small {
    font-size: 1.1rem;
  }
  .product-variation-area .collective-list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: 280px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > icon-group-list
 * ----------------------------------------------------------------- */
.icon-group-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.icon-group-list.technology > li {
  margin: 0 20px 30px 0;
}

.icon-group-list > li {
  margin: 0 10px 30px 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-icon-group
 * ----------------------------------------------------------------- */
.btn-icon-group {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .btn-icon-group {
    text-align: center;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > parts-search-area
 * ----------------------------------------------------------------- */
.parts-search-area {
  border-top: 1px solid #ccc;
  padding-top: 30px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > find-parts-form
 * ----------------------------------------------------------------- */
.find-parts-form {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .find-parts-form {
    display: block;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > select-area
 * ----------------------------------------------------------------- */
.select-area {
  width: 230px;
  margin-bottom: 40px;
  padding-right: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > select-title
 * ----------------------------------------------------------------- */
.select-title {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 40px;
}

.select-title:hover + .select-box {
  background-color: #f9f9f9;
}

.select-title:hover + .select-box:focus {
  background-color: #fff;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > select-box
 * ----------------------------------------------------------------- */
.select-box {
  width: 100%;
  max-width: 210px;
  margin-bottom: 40px;
  padding: 5px;
  border: 1px solid #009ad9;
}

.select-box:focus {
  background-color: #fff;
  box-shadow: 0px 0px 3px 0px #8de4ff;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > checkbox-area
 * ----------------------------------------------------------------- */
.checkbox-area {
  width: 925px;
  font-size: 1.4rem;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .checkbox-area {
    width: auto;
  }
}
.checkbox-area > li {
  margin-top: 40px;
}

.checkbox-area > li:first-child {
  margin-top: 0;
}

.checkbox-area label {
  font-size: 16px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > check-title
 * ----------------------------------------------------------------- */
.check-title {
  font-weight: 500;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > check-group
 * ----------------------------------------------------------------- */
.check-group {
  border-top: 1px solid #ccc;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.check-group.row {
  -webkit-flex-direction: column;
  flex-direction: column;
}

.check-group.col4 > li {
  width: 190px;
}

.check-group > li {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  margin-top: 20px;
  margin-right: 40px;
}

.check-group > li:last-child {
  margin-right: 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > image-list
 * ----------------------------------------------------------------- */
.image-list {
  margin: 0 auto 30px;
  padding: 0 10px;
  max-width: 1280px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.image-list.col2 > li {
  width: 50%;
}

.image-list > li {
  margin-bottom: 20px;
  padding: 0 10px;
}

@media screen and (max-width: 1024px) {
  .image-list {
    -webkit-justify-content: center;
    justify-content: center;
  }

  .image-list.col2 > li {
    width: auto;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > auroraheader
 * ----------------------------------------------------------------- */
header#hidden-header {
  top: 0;
  width: 100%;
  transition: top 0.3s;
  z-index: 3;
}
header#hidden-header .publish {
  position: fixed;
}

header .white-header {
  background-color: #FFFFFF;
}

#main-aurora {
  margin: 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > special-banner
 * ----------------------------------------------------------------- */
.special-banner-area {
  position: relative;
  margin: 20px 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > movie-container
 * ----------------------------------------------------------------- */
.movie-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.movie-container.size-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.movie-container.size-4x3 {
  padding-bottom: 75%;
}

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

/* --------------------------------------------------------------------
 * Module > Component Modules > learn-more-text
 * ----------------------------------------------------------------- */
.learn-more-text-sm-only {
  display: block;
}
@media screen and (max-width: 767px) {
  .learn-more-text-sm-only {
    display: none;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > learn-more-btn
 * ----------------------------------------------------------------- */
.learn-more-btn {
  margin-top: 28px;
  padding: 0 20px;
  width: 155px;
  line-height: 32px;
  border: 1px solid #009ad9;
  color: #009ad9;
  text-decoration: none;
  display: block;
  border-radius: 50px;
  position: relative;
  transition: background-color .4s,color .2s;
  text-align: left;
  font-family: inherit;
  font-size: 1.6rem;
  outline: none;
}
@media screen and (min-width: 768px) {
  .learn-more-btn:hover {
    background-color: rgba(0, 154, 217, 0.4);
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .learn-more-btn {
    margin-top: 15px;
  }
}
.learn-more-btn:before {
  content: attr(data-lm-open);
}
.learn-more-btn:after {
  content: "";
  display: block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
  background-image: url(clientliball/image/arw_down_blue.png);
  background-color: #fff;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
  background-size: 8px auto !important;
}
.learn-more-btn.active:before {
  content: attr(data-lm-close);
}
.learn-more-btn.active:after {
  transform: rotate(-180deg);
}
.learn-more-btn-sm-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .learn-more-btn-sm-only {
    display: block;
  }
}

/* --------------------------------------------------------------------
 * Module > Image and Video Modules > .movie-wrap
 * ----------------------------------------------------------------- */
.movie-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 90px;
}

.movie-wrap iframe {
  width: 960px;
  height: 540px;
}

/* --------------------------------------------------------------------
* Module > Component Modules > movie-modal-container
* ----------------------------------------------------------------- */
.movie-modal-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.movie-modal-container.size-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.movie-modal-container.size-4x3 {
  padding-bottom: 75%;
}

.movie-modal-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.play-icon {
  position: relative;
}

.play-icon img {
  vertical-align: middle;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > movie-modal
 * ----------------------------------------------------------------- */
.movie-modal {
  max-width: 1240px;
  min-width: 320px;
  margin: 0 auto;
  position: relative;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > iframe-container
 * ----------------------------------------------------------------- */
.iframe-container {
  position: relative;
  overflow: hidden;
}

.iframe-container.res-iframe-base {
  padding: 0 !important;
}

.iframe-container iframe {
  width: 100%;
}

.iframe-container iframe.iframe-fixed-size {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > column-separator
 * ----------------------------------------------------------------- */
.column-separator {
  margin: 0 auto 30px;
  min-width: 280px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px;
}

.column-separator > .column-separator-col {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-top: 20px;
  padding-left: 3%;
  padding-right: 3%;
}

.column-separator.col2 > .column-separator-col {
  width: 48%;
}

.column-separator.col3 > .column-separator-col {
  width: 33.333%;
}

.column-separator.col4 > .column-separator-col {
  width: 25%;
}

@media screen and (max-width: 1024px) {
  .column-separator > .column-separator-col,
  .column-separator.col2 > .column-separator-col,
  .column-separator.col3 > .column-separator-col,
  .column-separator.col4 > .column-separator-col {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .column-separator > .column-separator-col,
  .column-separator.col2 > .column-separator-col,
  .column-separator.col3 > .column-separator-col,
  .column-separator.col4 > .column-separator-col {
    width: 100%;
  }
}
/* ----------------------------------------------------------------------------
 * Module > Javascript Modules
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Module > Javascript Modules > carousel-area
 * ----------------------------------------------------------------- */
.carousel-area {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------
 * Module > Javascript Modules > carousel-dots-area
 * ----------------------------------------------------------------- */
.carousel-dots-area {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  max-width: 1440px;
  width: 100%;
  padding-left: 100px;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .carousel-dots-area {
    padding: 0 20px;
  }
}
/* --------------------------------------------------------------------
 * Module > Javascript Modules > carousel-dots
 * ----------------------------------------------------------------- */
.carousel-dots {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 80px;
}

.carousel-dots button {
  font-size: 1px;
  width: 12px;
  height: 12px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  display: block;
  z-index: 2;
}

.carousel-dots button::before {
  content: '';
  display: block;
  background-color: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.carousel-dots button.is-current::before {
  background-color: #009ad9;
}

.carousel-dots button:hover::before,
.carousel-dots button:focus::before {
  background-color: #00557a;
}

/* --------------------------------------------------------------------
 * Module > Javascript Modules > js-dialog
 * ----------------------------------------------------------------- */
#dialog-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;
  overflow: auto;
  width: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.dialog {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  display: none;
  margin: auto;
  min-width: 320px;
  max-width: 1024px;
  width: 100%;
  min-height: 115px;
  background-color: #fff;
}

.dialog-content {
  display: none;
}

.dialog .dialog-content,
.is-static .dialog-content {
  display: block;
}

.dialog .btn-close {
  position: absolute;
  top: 40px;
  right: 30px;
  background-color: transparent;
}

.dialog .image {
  text-align: center;
  padding: 50px 20px;
}

.dialog .dialog-content .popup-btn-image{
 width: 100%;
}

/* productVideo360
-----------------------------------*/
.video360 {
  width: 100%;
  height: 100%;
}

.video360, .dialog-content, .dialog-video{
  padding: 4px 4px 0px 4px
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-compare
 * ----------------------------------------------------------------- */
.btn-compare {
  margin-bottom: 30px;
  padding-right: 20px;
}

.btn-compare .btn-01 {
  padding: 17px 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-clear
 * ----------------------------------------------------------------- */
.btn-clear {
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > compare-content-wrap
 * ----------------------------------------------------------------- */
.compare-content-wrap {
  padding: 30px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > compare-heading
 * ----------------------------------------------------------------- */
.compare-heading {
  margin-bottom: 30px;
  padding-right: 180px;
  color: #009ad9;
  font-size: 4rem;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > compare-print-btn
 * ----------------------------------------------------------------- */
.compare-print-btn {
  position: absolute;
  top: 40px;
  right: 95px;
  padding: 10px 30px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > compare-table
 * ----------------------------------------------------------------- */
.compare-table {
  max-width: 1280px;
  width: 100%;
  border-spacing: 5px;
  text-align: left;
}

.compare-table th,
.compare-table td {
  position: relative;
  border: none;
  vertical-align: top;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: 10px 20px;
  background-color: #ededed;
  font-size: 1.4rem;
}

.compare-table tbody th {
  background-color: #00557a;
  color: #fff;
  font-weight: normal;
}

.compare-table .btn-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  background: none;
}

.compare-table .name {
  display: block;
  margin-top: 20px;
  color: #333;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .compare-content-wrap + .btn-close {
    top: 30px;
    right: 20px;
  }

  .compare-content-wrap {
    padding: 20px;
  }

  .compare-heading {
    margin-bottom: 20px;
    padding-right: 140px;
    min-height: 48px;
    font-size: 2.4rem;
  }

  .compare-table .btn-remove {
    display: none;
  }

  .compare-print-btn {
    top: 30px;
    right: 70px;
    padding: 10px 20px;
  }

  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table th,
  .compare-table td {
    display: block;
  }

  .compare-table tr {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .compare-table thead td.blank,
  .compare-table tbody tr.blank {
    display: none;
  }

  .compare-table tbody th {
    margin-bottom: 10px;
    width: 100%;
  }

  .compare-table thead th,
  .compare-table tbody td {
    width: 48%;
  }

  .compare-table thead th:nth-child(n+4),
  .compare-table tbody td:nth-child(n+4) {
    display: none;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > js-series-list
 * ----------------------------------------------------------------- */
.select-pull-box {
  position: relative;
  margin-bottom: 40px;
  max-width: 210px;
}

.select-pull-box .hook {
  position: relative;
  display: block;
  padding: 5px 10px;
  width: 100%;
  height: 36px;
  border: 1px solid #009ad9;
  background: none;
  text-align: left;
}

.select-pull-box .hook:focus {
  background-color: #fff;
  box-shadow: 0px 0px 3px 0px #8de4ff;
}

.select-pull-box .hook::after {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  display: block;
  box-sizing: border-box;
  margin: auto;
  height: 6px;
  border-top: solid 6px #333;
  border-right: solid 3px transparent;
  border-left: solid 3px transparent;
  content: "";
}

.select-pull-box .list-wrap {
  position: absolute;
  top: 37px;
  width: 100%;
  z-index: 1;
}

.select-pull-box .list {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  max-height: 320px;
  border: 1px solid #009ad9;
  border-top: none;
  background-color: #fff;
  z-index: 2;
}

.select-pull-box .list li:hover,
.select-pull-box .list li.is-active {
  background-color: #009ad9;
  color: #fff;
}

.select-pull-box .list li label {
  display: block;
  padding: 2px 10px;
}

.select-pull-box .list li label input[type=radio] {
  width: 0;
  opacity: 0;
}

/* ------------------------------------------------------------------------------
 * Module > Component Modules > serieslistlsg, ridingstylelistlsg, lsgbannerlist
 * ------------------------------------------------------------------------------ */
.series-info-container {
  position: relative;
}

.series-info-title {
  position: absolute;
  top: 17%;
  left: 4%;
  color: #fff;
}

/* --------------------------------------------------------------------
 * Module > Javascript Modules > js-search-wop
 * ----------------------------------------------------------------- */
.result-message {
  text-align: center;
  margin-top: 40px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > searchwop
 * ----------------------------------------------------------------- */
.productsite_searchwop label.checkbox {
  font-size: 1.4rem;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > site-search
 * ----------------------------------------------------------------- */
.gsc-table-result td {
  border: none !important;
}

.gsc-control-cse, .gsc-control-cse .gsc-table-result {
  width: auto !important;
}

.gsc-webResult .gsc-result {
  padding: 2px 0 !important;
}

.gsc-above-wrapper-area-container td {
  border: none !important;
}

.gsc-selected-option-container {
  height: 30px !important;
  line-height: 30px !important;
  max-width: 100% !important;
}

.gsc-tabsArea div {
  overflow: hidden !important;
  margin-bottom: -5px !important;
  border: 1px solid #ccc !important;
  position: relative !important;
  z-index: 3px !important;
  border-radius: 3px 3px 0 0;
}

.gsc-tabsArea .gsc-tabhActive {
  background-color: #fff !important;
  border-bottom: 2px solid #fff !important;
}

.gsc-tabsArea {
  height: auto !important;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > downgradeproductlist, upgradeproductlist
 * ----------------------------------------------------------------- */
.upgrade-downgrade-container {
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.upgrade-downgrade-container .collective-wrap {
  padding: 50px 0 0;
  float: left;
  width: 50%;
  background: #fff;
  margin-bottom: 25px;
}

.upgrade-downgrade-container .collective-list,
.upgrade-downgrade-container .collective-list {
  margin-bottom: 0px;
}

.upgrade-downgrade-container .upgrade.collective-wrap {
  margin-left: 20px;
  margin-right: 10px;
}

.upgrade-downgrade-container .downgrade.collective-wrap {
  margin-left: 10px;
  margin-right: 20px;
}

.upgrade-downgrade-container .collective-wrap-override.upgrade.collective-wrap,
.upgrade-downgrade-container .collective-wrap-override.downgrade.collective-wrap {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

@media screen and (max-width: 1024px) {
  .upgrade-downgrade-container {
    flex-wrap: wrap;
  }

  .upgrade-downgrade-container .upgrade.collective-wrap,
  .upgrade-downgrade-container .downgrade.collective-wrap {
    width: 100%;
    margin: 0 10px 25px;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > technologylogolist
 * ----------------------------------------------------------------- */
ul.technology-logo-list .title-parts-02 {
  margin: 0px;
}

ul.technology-logo-list .collective-title-02 {
  margin: 15px 0px 5px;
}

ul.technology-logo-list div.item-image {
  width: 80%;
  margin: 0px auto;
}

.tech-margin-top {
  margin-top: 80px;
}

.title-parts-02.title-parts-logo2 {
  padding-left: 1px;
  padding-right: 1px;
  line-height: 1;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > btn-tech-logo-group
 * ----------------------------------------------------------------- */
.btn-tech-logo-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
}

.btn-tech-logo-group > li {
  width: 160px;
  margin: 0 20px 20px 0;
}

@media screen and (max-width: 1024px) {
  .btn-group > li {
    margin: 0 20px 10px 0;
  }
}
@media screen and (max-width: 380px) {
  .btn-tech-logo-group {
    margin-right: 0;
    -webkit-justify-content: center;
    justify-content: center;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > category-search-condition-form
 * ----------------------------------------------------------------- */
.category-search-condition-form {
  margin-right: 40px;
  margin-bottom: 20px;
  padding: 30px 20px 30px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .category-search-condition-form {
    margin-right: 0;
    border-bottom: none;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > category-search-condition-area
 * ----------------------------------------------------------------- */
.category-search-condition-area {
  width: 200px;
  margin: 10px 0px 30px 0;
  display: inline-block;
  vertical-align: top;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > category-search-condition
 * ----------------------------------------------------------------- */
.category-search-condition {
  padding-left: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .category-search-condition {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
}

.category-search-condition label {
  font-size: 16px;
}

.category-search-condition ul {
  margin-top: 10px;
}

.category-search-condition > li {
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .category-search-condition > li {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > category-search-button
 * ----------------------------------------------------------------- */
.category-search-button > button {
  width: 160px;
  padding: 17px 20px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > category-search-condition-title
 * ----------------------------------------------------------------- */
.category-search-condition-title {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .category-search-condition-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
    letter-spacing: normal;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > series-header
 * ----------------------------------------------------------------- */
.series-header {
  padding: 60px 0 0 10px;
  max-width: 80%;
  z-index: 1;
}

.series-header .series-logo {
  margin: 0 0 20px;
}

.series-header .series-logo img.invert {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%);
}

#nexus img.invert {
  -webkit-filter: invert(0%);
  -moz-filter: invert(0%);
  -o-filter: invert(0%);
  -ms-filter: invert(0%);
  filter: invert(0%);
}

/* --------------------------------------------------------------------
 * Module > Component Modules > series-button
 * ----------------------------------------------------------------- */
.series-button {
  text-align: center;
  padding: 40px 0 80px;
}

.series-button .series-link {
  margin: 20px 0 20px 0;
}

.productsite_productlistseries label,
.productsite_productlistwop label {
  font-size: 16px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > cookies-notification
 * ----------------------------------------------------------------- */
.cookies-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 20px 55px;
  display: none;
  z-index: 999;
  color: #fff;
  text-align: center;
}

.cookies-content a {
  color: #fff;
}

.cookies-content a:visited {
  color: #00e;
}

.cookies-button-container .btn-01 {
  padding: 14px 30px;
  margin-top: 5px;
}

.cookies-button-container .btn-01.sh_cookie_accept {
  margin-right: 5px;
  margin-left: 5px;
}

.cookies-button-container .btn-01.sh_cookie_decline {
  margin-right: 5px;
  margin-left: 5px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > product-lineup
 * ----------------------------------------------------------------- */
.product-lineup-container {
  max-width: 1280px;
  list-style: none;
  margin: 0 auto;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-wrap: wrap;
  padding: 0 10px 20px 10px;
}

.line-up-collection .lineup-item {
  -webkit-box-flex: 0;
  min-width: 48%;
  height: auto;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.heading-02 .subrs-header {
  color: #009ad9;
  font-weight: 600;
  font-size: 3rem;
}

.line-up-collection {
  margin-bottom: 30px;
}

.line-up-collection .product-lineup-container {
  max-width: 1280px;
  list-style: none;
  margin: 0 auto;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
}

.line-up-collection .product-lineup-container .model {
  margin-bottom: 2%;
  padding: 10px;
  background-color: #f0f0f0;
}

.line-up-collection .product-lineup-container .model h6 {
  display: block;
  margin-bottom: 0px;
  font-size: 20px;
  font-weight: bold;
}

.line-up-collection .product-lineup-container .line-up {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


.line-up-collection .header {
  font-size: 1.4rem;
  background-color: #bbb;
  color: #fff;
  padding-left: 6px;
}

.line-up-collection .header .note {
  font-size: 1.2rem;
  margin-left: 5px;
}


.line-up-collection .product-lineup-container .lineup-item {
   width: 100%;
   margin-bottom: 6%;
}

.line-up-collection .product-lineup-container .line-up .item {
  width: 25%;
  text-align: center;
}

.line-up-collection .product-lineup-container .line-up .item:nth-of-type(n+5) {
  margin-top: 2%;
}

.line-up-collection .product-lineup-container .line-up .item b {
  font-size: 18px;
  margin-top: 25px;
}

.line-up-collection .product-lineup-container .line-up .item span+b  {
  margin-top: 0;
}

.line-up-collection .product-lineup-container .lineup-item ul {
   margin: 0;
}

.line-up-collection ul.line-up {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 0;
}

line-up-collection ul.line-up, line-up-collection div.model {
  padding: 12px 10px 10px 6px;
}

.line-up-collection p.comment {
  font-size: 1.2rem;
  padding: 0 0 12px 0;
  text-align: right;
}

.line-up-collection b {
  font-size: 1.3rem;
  margin-bottom: 2px;
  display: block;
  color: black;
  word-wrap: normal;
}


.line-up-collection div.colors {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 80%;
}

.line-up-collection .products-set .product-details {
  font-size: 1.4rem;
  text-align: center;
}

.line-up-collection ul.line-up li.item {
  padding: 0 0 0 5px;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 0%;
  flex: 0 1 0%;
  min-width: 25%;
}

.line-up-collection ul.line-up li.item > div {
  text-align: center;
}

.line-up-collection ul.line-up li.item b,
.line-up-collection ul.line-up li.item a {
  display: block;
  line-height: 1.3rem;
}

.line-up-collection ul.line-up li.item a img {
  width: 100%;
  margin-top: 2px;
  margin-bottom: 10px;
}

.line-up-collection ul.line-up li.item b span {
  font-size: 1.4rem;
  margin-right: 4px;
  color: #0099DC;
  display: inline-block;
}


.line-up-collection ul.line-up li.item span {
  font-size: 1.2rem;
}

/* Small only */
@media screen and (max-width: 639px) {
  .line-up-collection ul.line-up {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .line-up-collection ul.line-up li.item {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 0%;
    flex: 0 1 0%;
    min-width: 50%;
    margin-bottom: 15px;
  }

  .line-up-collection .product-lineup-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .line-up-collection .lineup-item {
  	-webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  .line-up-collection l.line-up li.item {
  	-webkit-box-flex: 0;
    -ms-flex: 0 1 0%;
    flex: 0 1 0%;
    min-width: 50%;
    padding: 0 0 0 5px;
    margin-bottom: 15px;
  }

  .heading-02 .subrs-header {
    font-size: 1.8rem;
  }
  .line-up-collection  .product-lineup-container .model h6 {
    font-size: 14px;
  }

  .line-up-collection .product-lineup-container .line-up .item {
    width: 50%;
  }

  .line-up-collection .product-lineup-container .line-up .item:nth-of-type(n+3) {
    margin-top: 2%;
  }

  .line-up-collection .product-lineup-container .line-up .item b {
      font-size: 12px;
  }
}
/* Medium only */
@media screen and (min-width: 640px) and (max-width: 1024px) {
  .line-up-collection ul.line-up li.item {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 0%;
    flex: 0 1 0%;
    min-width: 33%;
    padding: 0 0 0 5px;
    margin-bottom: 15px;
  }

  .line-up-collection .lineup-item {
  	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

   .line-up-collection .product-lineup-container .model h6 {
    font-size: 16px;
  }
    .line-up-collection .product-lineup-container .line-up .item {
    width: 33.3%;
  }

  .line-up-collection .product-lineup-container .line-up .item:nth-of-type(n+4) {
    margin-top: 2%;
  }

  .line-up-collection .product-lineup-container .line-up .item b {
    font-size: 14px;
  }
}
/* Large and up */
@media screen and (min-width: 1024px) {
  .line-up-collection ul.line-up div.model {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }
}



/* --------------------------------------------------------------------
 * Module > Component Modules > productview360
 * --------------------------------------------------------------------
 */
/* div containers */
.page-loader-360 {
  background-color: #fff;
  max-width: 1200px;
  max-height: 200px;
  text-align: center;
  padding: 50px;
}

.main-container-360 {
  display: none;
}

.main-container-360,
.main-container-360 .horizontal-images,
.main-container-360 .vertical-images {
  background-color: #000;
}

/* img tags */
.main-container-360 .image-content-360 {
  max-width: 100%;
  margin: auto;
}

a.color-360-select {
  text-decoration: none;
}

/* for phone and tablet displays */
@media screen and (max-width: 767px) {
  .nav-container .color-buttons-360 {
    display: none;
  }

  .nav-container {
    border-top: solid 1px #fff;
  }

  .nav-container-mobile {
    border-bottom: solid 1px #fff;
  }

  .nav-container,
  .nav-container-mobile {
    display: block;
    margin: 0 10px 0 10px;
  }

  .nav-container .nav-buttons-360 {
    display: inline-block;
    width: 95%;
    margin: 0 10px 0 10px;
    text-align: center;
  }

  .nav-container-mobile .color-buttons-360 {
    display: inline-block;
    width: 80%;
    margin: 10px;
    text-align: left;
  }

  .nav-container-mobile img.nav-btn {
    max-width: 80px;
    height: auto;
  }

  .nav-container img.nav-btn {
    margin: 5px 5px;
    max-width: 50px;
    height: auto;
  }
}
/* for web displays */
@media screen and (min-width: 768px) {
  .nav-container-mobile {
    display: none;
  }

  .nav-container {
    display: block;
    border-top: solid 1px #fff;
    margin: 0 10px 0 10px;
  }

  .nav-container .nav-buttons-360,
  .nav-container .color-buttons-360 {
    display: inline-block;
    width: 45%;
    margin: 0 10px 0 10px;
  }

  .nav-container .nav-buttons-360 {
    text-align: left;
  }

  .nav-container .color-buttons-360 {
    text-align: right;
  }

  .nav-container img.nav-btn {
    margin: 10px 5px;
    max-width: 70px;
    height: auto;
  }
}
/* Tooltip container */
.functional-feature-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.functional-feature-tooltip .functional-feature-tooltip-text {
  visibility: hidden;
  background-color: #666666;
  color: #fff;
  text-align: left;
  padding: 12px;
  border-radius: 6px;
  /* Position the tooltip text*/
  position: absolute;
  z-index: 1;
  width: 200px;
  bottom: 100%;
  left: 50%;
  margin-left: -100px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
  font-size: 1.1rem;
  margin-bottom: 5px;
}

/* weight text */
.functional-feature-tooltip.has-weight {
  letter-spacing: -.4em;
}
.functional-feature-tooltip.has-weight .weight-text {
  display: inline-block;
  margin-left: 10px;
  line-height: 1.1;
  letter-spacing: normal;
}

@media screen and (max-width: 767px) {
  .functional-feature-tooltip {
    overflow: hidden;
  }
}
.functional-feature-tooltip-text.spec {
  text-align: center;
  width: 100px;
  margin-left: -50px;
}

.functional-feature-tooltip .functional-feature-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #666666 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.functional-feature-tooltip:hover .functional-feature-tooltip-text {
  visibility: visible;
}

@media screen and (max-width: 1023px) {
  .functional-feature-tooltip:hover .functional-feature-tooltip-text {
    visibility: hidden;
  }
}
ul.feature-text {
  list-style: initial;
}

.spec_icons_row {
  padding-bottom: 15px;
  max-width: 95rem;
}

.spec_icons_col {
  padding: 0 0 15px 0;
  margin-right: 5px;
}

.icons-explanations, .product-features-modal {
  width: 100%;
  max-width: 95rem;
}

.stiffness-icon-holder {
  margin-right: 5px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > Series List Option 2
 * --------------------------------------------------------------------
 */
.sidebar-area .sidebar-header {
  font-size: 1.9rem;
  font-weight: 500;
  padding-bottom: 15px;
}
.sidebar-area .image:hover {
  opacity: 0.8;
}

.sidebar-header::after {
  content: '';
  display: block;
  width: 175px;
  height: 20px;
  border-bottom: 1px solid #ccc;
}

.sidebar-menu .product-link {
  font-size: 1.4rem;
  color: black;
}

.sidebar-menu .product-link:hover {
  color: #009ad9;
}

.heading-02-s02 {
  background-color: #cccccc;
  padding: 8px 0 8px 15px;
  font-size: 2rem;
  font-weight: 500;
  margin: 0 auto 20px;
}

.groupset-name-s02 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin-top: 20px;
}

.product-category-list .groupset-name {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .15rem;
  margin-top: 20px;
}

button.accordion {
  color: #333;
  background-color: white;
  padding: 15px 30px 15px 0px;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  display: none;
}

.arrow-up {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: lightgray;
  color: black;
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 600;
}

li.list-more {
  display: none;
}

#back-arrow-up {
  transform: rotate(-90deg);
  display: block;
  margin-right: 2px;
  font-weight: 700;
}

#back-top {
  position: fixed;
  display: none;
  color: black;
  bottom: 20px;
  right: 15px;
  width: auto;
}

a .back-to-top:hover {
  background-color: #555;
}

.product-list-margin-top {
  margin-top: 50px;
}

/* Small only */
@media screen and (max-width: 767px) {
  .main-contents-s02 {
    margin: 0 25px;
  }

  .content-area {
    width: 100%;
  }

  .sidebar-area-hide {
    display: none;
  }

  .product-category-list, .see-more-btn, .product-area .heading-02-s02 {
    display: none;
  }

  button.accordion {
    display: block;
    position: relative;
  }

  button.accordion:after {
    color: transparent;
    text-shadow: 0 0 0 #009ad9;
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  button.accordion.active:after {
    content: "\2796";
  }

  div#product-list .product-area {
    padding-top: 0px;
  }

  .back-to-top {
    font-size: 1.6rem;
  }
}
/* Medium only */
@media screen and (min-width: 49em) and (max-width: 64em) {
  .sidebar-area {
    display: block;
  }

  .product-category-list, .product-area .heading-02-s02 {
    display: block;
  }

  button.accordion {
    display: none;
  }

  button.accordion div {
    display: block;
  }

  button.accordion:after {
    color: transparent;
    text-shadow: 0 0 0 #009ad9;
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    float: right;
  }

  button.accordion.active:after {
    content: "\2796";
  }

  div#product-list .product-area {
    padding-top: 0px;
  }
}
@media screen and (min-width: 64em) {
  button.accordion div {
    display: block;
  }
}
/* --------------------------------------------------------------------
 * Module > Component Modules > prev-series-area
 * ----------------------------------------------------------------- */
.prev-series-area {
  margin: 20px 0px;
}

@media screen and (max-width: 767px) {
  .prev-series-area {
    margin: 20px 15px 10px;
  }
}

a.prev-series-link {
  text-decoration: none;
  color: #009ad9;
}

a.prev-series-link:hover {
  color: #00557a;
}
/* ----------------------------------------------------------------------------
 * Module > Unique Modules
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
 * Module > Unique Modules > separator
 * ----------------------------------------------------------------- */
.separator {
  margin: 90px auto 60px;
  max-width: 1240px;
  border: 1px solid transparent;
  border-top: 1px solid #ccc;
}

/* --------------------------------------------------------------------
 * Module > Javascript Modules > js-product-list
 * ----------------------------------------------------------------- */
.spinner {
  text-align: center;
  margin-bottom: 40px;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  content: " ";
}

.invisible {
  visibility: hidden;
  position: absolute;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > error-message
 * ----------------------------------------------------------------- */
.error-message {
  	color: #D8000C;
  	font-size: 1.6rem;
  	position: absolute;
  	text-align: center;
  	top: 50%;
    width: 100%;
    left: 0;
    padding: 0 60px;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.error-message:before {
    content: "";
    height: 30px;
    width: 30px;
    display: inline-block;
    background-image: url(clientliball/image/icon-error.png);
    background-repeat: no-repeat;
    background-size: 100%;
    vertical-align: middle;
    margin-right: 5px;
}

/* Medium Screen */
@media screen and (max-width: 1024px) {
  .error-message {
    padding: 0 45px;
  }
}
/* --------------------------------------------------------------------
 * Module > Javascript Modules > site search
 * ----------------------------------------------------------------- */
.search-result-area {
    margin: 20px auto;
    max-width: 1280px;
    min-height: 400px;
}


/*
 * New Color Icon
 */

.new-color-icon,
li.item span.new-color-icon {
    color: #f00;
    font: bold 10px Arial;
    margin: 0 0 2px;
 }

/* --------------------------------------------------------------------
 * Module > Footer > Newsletter Sign Up Button
 * ----------------------------------------------------------------- */
.btn-02-anchor {
	margin: 0 auto 50px;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.5;
	padding: 19px 30px;
	display: inline-block;
  	border: 1px solid #009ad9;
  	background-color: #fff;
  	font-family: sans-serif;
}

a.btn-02-anchor:link {
  	text-decoration: none;
    cursor: pointer;
}

a.btn-02-anchor:visited {
    color: #009ad9;
}

a.btn-02-anchor:focus,
a.btn-02-anchor:hover {
  background-color: #00557a;
  color: #fff;
}

@media screen and (max-width: 368px) {
  .btn-02-anchor {
    max-width: 290px;
    padding: 10px 70px;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > products-genre-wrap-category
 * ----------------------------------------------------------------- */
.products-genre-wrap-category {
  margin-top: 30px;
  margin-right: 40px;
  margin-bottom: 20px;
  border-top: none;
  border-bottom: none;
  background-color: #f5f5f5;
  padding-top: 0;
  padding-bottom: 0;
}
.products-genre-wrap-category.category-search-condition-form {
  padding: 0;
}
.products-genre-wrap-category .products-number {
  display: none;
}
@media screen and (max-width: 767px) {
  .products-genre-wrap-category .products-number {
    display: block;
    text-align: center;
    padding: 5px 15px 10px;
    margin-bottom: 0;
  }
}
.products-genre-wrap-category .category-search-condition-area {
  width: 100%;
  background-color: #f5f5f5;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .products-genre-wrap-category .category-search-condition-area {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .products-genre-wrap-category .category-search-condition-area {
    max-width: 260px;
  }
}
.products-genre-wrap-category .category-search-condition-title {
  margin: 0;
  padding: 15px;
  border-top: 1px solid #fff;
  background-image: url(clientliball/image/triangle_down.png);
  background-position: center right 10px;
  background-repeat: no-repeat;
  font-size: 16px;
  cursor: pointer;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .products-genre-wrap-category .category-search-condition-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
    letter-spacing: normal;
  }
}
.products-genre-wrap-category .category-search-condition-title.open {
  background-image: url(clientliball/image/triangle_up.png);
}
.products-genre-wrap-category .category-search-accordion {
  display: none;
}
.products-genre-wrap-category .category-search-condition {
  padding: 0;
  list-style: none;
}
.products-genre-wrap-category .category-search-condition ul {
  padding: 0;
  list-style: none;
}
.products-genre-wrap-category .category-search-condition > li {
  display: block;
  padding: 15px;
  padding-left: 20px;
  cursor: pointer;
  margin: 0;
}
.products-genre-wrap-category .category-search-condition > li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.products-genre-wrap-category .category-search-condition input {
  margin-right: 20px;
}
.products-genre-wrap-category .category-search-condition .checkbox {
  padding-top: 0;
  font-size: 14px;
  line-height: 20px;
  font-family: "Roboto", sans-serif;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"] {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  margin: 0 10px 0 3px;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"] + span {
  position: relative;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"] + span::before {
  content: '';
  display: inline-block;
  vertical-align: text-bottom;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #80CDEC;
  border-radius: 0;
  box-shadow: 0px 0px 0px 2px #fff inset;
  margin-right: 10px;
  margin-left: -26px;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"] + span::after {
  display: inline-block;
  height: 6px;
  width: 9px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  position: absolute;
  transform: rotate(-45deg);
  color: #0099D9;
  left: -20px;
  top: 3px;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"]:focus + span {
  color: #009ad9;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"]:focus + span::before {
  background-color: #fff;
}
.products-genre-wrap-category .category-search-condition .checkbox [type="checkbox"]:checked + span::after {
  content: "";
}
.products-genre-wrap-category .category-search-condition span {
  padding-bottom: 3px;
}
.products-genre-wrap-category .category-search-button {
  padding: 10px;
}
@media screen and (max-width: 767px) {
  .products-genre-wrap-category .category-search-button {
    width: 100%;
  }
}
.products-genre-wrap-category .category-search-button > button {
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  max-width: 275px;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .products-genre-wrap-category .category-search-button > button {
    display: block;
    margin: auto;
  }
}
@media screen and (max-width: 767px) {
  .products-genre-wrap-category {
    margin-right: 0;
  }
}
 
.fixed-category-nav {
  position: fixed;
  top: 0;
  margin-bottom: 735px;
  max-width: 309px;
}
@media screen and (max-width: 767px) {
  .fixed-category-nav {
    position: static;
    margin-bottom: 0;
  }
}
 
.sidebar-area .btn-compare {
  position: fixed;
  right: 20px;
  bottom: 15px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 3;
}
.sidebar-area .btn-compare .btn-01 {
  padding: 10px 15px;
}
@media screen and (max-width: 767px) {
  .sidebar-area .btn-compare .btn-01 {
    width: 100%;
    margin-top: 10px;
  }
}
.sidebar-area .btn-compare .btn-reset {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  padding: 10px 15px;
  margin-right: 11px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
  display: inline-block;
  text-transform: uppercase;
}
.sidebar-area .btn-compare .btn-reset:hover {
  color: #333;
  background-color: #e6e6e6;
  padding: 9px 14px;
  border: 1px solid #adadad;
}
.sidebar-area .btn-compare .btn-reset[disabled] {
  background-color: #ccc;
  color: #fff;
}
.sidebar-area .btn-compare .btn-reset[disabled]:hover {
  border: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .sidebar-area .btn-compare .btn-reset {
    width: 100%;
    margin-right: 0;
  }
}
.sidebar-area .btn-compare .btn-error, .sidebar-area .btn-compare .btn-error-sm {
  background-color: #ccc;
  color: #d93025;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .sidebar-area .btn-compare {
    margin-left: 20px;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > each-display-line
 * ----------------------------------------------------------------- */
.each-display-line {
  display: block;
  justify-content: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-heading
 * ----------------------------------------------------------------- */
.line-upheading {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
  min-width: 280px;
  padding: 40px 0 20px;
}
.line-upheading::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #009ad9;
  margin: 22px auto 12px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-collective-area
 * ----------------------------------------------------------------- */
@media screen and (min-width: 0px) {
  .lineup-collective-area {
    width: 333px;
  }
}
@media screen and (min-width: 500px) {
  .lineup-wrap-setter-2 .each-display-line .lineup-collective-area {
    min-width: 45%;
  }
  .lineup-wrap-setter-3 .each-display-line .lineup-collective-area {
    min-width: 30%;
  }
}
.lineup-collective-lead {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 auto 30px;
  width: 100%;
  padding: 0 10px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-collective-box
 * ----------------------------------------------------------------- */
.lineup-collective-box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
  margin: 15px;
}
.lineup-collective-box > a {
  text-decoration: none;
}
.lineup-collective-box > a:hover {
  opacity: 0.8;
}
.lineup-collective-box.bg-white {
  background-color: #fff;
}
li.lineup-collective-box, {
  margin: 0;
}
.lineup-collective-box .btn-01 {
  margin-bottom: 30px;
}
.lineup-collective-box::after {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
  margin: 15px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-collective-image
 * ----------------------------------------------------------------- */
.lineup-collective-image {
  -webkit-order: -1;
  order: -1;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lineup-collective-image img {
  max-width: none;
}
.lineu-collective-image.reset-order {
  -webkit-order: 0;
  order: 0;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-wrap-setter
 * ----------------------------------------------------------------- */
.lineup-wrap-setter-2,
.lineup-wrap-setter-3 {
  text-align: center;
  text-align: -webkit-center;
  padding-bottom: 40px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-wrap-title
 * ----------------------------------------------------------------- */
.lineup-wrap-title {
  font-weight: 500;
  letter-spacing: .15rem;
  padding: 5px;
  background-color: #444444;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-wrap-lump
 * ----------------------------------------------------------------- */
.lineup-wrap-lump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-wrap-component
 * ----------------------------------------------------------------- */
.lineup-wrap-component-white-black {
  background: white;
  color: black;
  padding: 0 25px;
}

.lineup-wrap-component-white-blue {
  background: white;
  color: #009ad9;
  padding: 0 25px;
}

.lineup-wrap-component-dkgray-white {
  background: #191919;
  color: white;
  padding: 0 25px;
}

.lineup-wrap-component-black-white {
  background: black;
  color: white;
  padding: 0 25px;
}

/* --------------------------------------------------------------------
 * Module > Component Modules > lineup-wrap-content
 * ----------------------------------------------------------------- */
.lineup-wrap-content-white-black {
  background: white;
  color: black;
}
.lineup-wrap-content-white-blue {
  background: white;
  color: #009ad9;
}
.lineup-wrap-content-white-white {
  background: white;
  color: white;
}
.lineup-wrap-content-black-white {
  background: black;
  color: white;
}
.lineup-wrap-content-black-blue {
  background: black;
  color: #009ad9;
}
.lineup-wrap-content-black-black {
  background: black;
  color: black;
}

/* --------------------------------------------------------------------
 * GDPR
 * ----------------------------------------------------------------- */

 .gdpr_placeholder {
     position: relative;
     width: 100%;
     height: auto;
     padding-bottom: 56.25%;
     background: #383636;
 }

 .gdpr_placeholder-inner-content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     padding: 10rem;
 }

 .gdpr_placeholder-inner-content-wrapper {
     position: relative;
     height: 100%;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: center;
     justify-content: center;
     -ms-flex-direction: column;
     flex-direction: column;
     text-align: center;
     color: #FFF;
 }

 .transparent-background {
     background: #383636f0;
 }

 .dealerlocatorgdpr {
     background-image: url(clientliball/image/dealerlocator-static.png);
     background-repeat: no-repeat;
     background-position: center;
 }

/* ----------------------------------------------------------------------------
 * Color > Background
 * ------------------------------------------------------------------------- */

.bg-transparent {
  background-color: transparent;
}

/**
 *   Here's where everything gets included. You don't need
 *   to change anything here, and doing so might break
 *   stuff. Here be dragons and all that.
 */
/**
 *   Default variables
 *
 *   While these can be set with JavaScript, it's probably
 *   better and faster to just set them here, compile to
 *   CSS and include that instead to use some of that
 *   hardware-accelerated goodness.
 */
.unslider {
  overflow: auto;
  margin: 0;
  padding: 0;
}
.unslider-wrap {
  position: relative;
}
.unslider-wrap.unslider-carousel > li {
  float: left;
}
.unslider-vertical > ul {
  height: 100%;
}
.unslider-vertical li {
  float: none;
  width: 100%;
}
.unslider-fade {
  position: relative;
}
.unslider-fade .unslider-wrap li {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 8;
}
.unslider-fade .unslider-wrap li.unslider-active {
  z-index: 10;
}
.unslider ul, .unslider ol, .unslider li {
  list-style: none;
  /* Reset any weird spacing */
  margin: 0;
  padding: 0;
  border: none;
}
.unslider-arrow {
  position: absolute;
  left: 20px;
  z-index: 2;
  cursor: pointer;
}
.unslider-arrow.next {
  left: auto;
  right: 20px;
}

.unslider-nav ol {
  list-style: none;
  
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}

/*
NOTE: Do not remove this style. This is needed for the loading order. This will override the css in unslider.css.
*/
.unslider-arrow.next,
.unslider-arrow.prev {
  display: block;
  z-index: 2;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -52px;
  padding: 30px 10px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.unslider-arrow.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.unslider-arrow.prev {
  left: 0;
}

.unslider-arrow.prev, .unslider-arrow.next {
  background-color: rgba(0, 0, 0, 0.3);
}
.unslider-arrow.prev:hover, .unslider-arrow.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.unslider {
  position: relative;
}
.unslider-nav {
  position: absolute;
  bottom: 30px;
    left: 100px;}
.unslider-nav ol {
  list-style: none;

}
.unslider-nav ol li {
  border-radius: 50%;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background: #fff;
  overflow: hidden;
  text-indent: -999em;

  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #009ad9;
  cursor: default;
}

@media screen and (max-width: 767px) {
  .unslider-nav {
    -webkit-transform: translate(0%, -50%);
    transform: translate(-50%, 0%);
    left: 50%;
        display: none;
    }
}
@charset "utf-8";
/*  Product Info
----------------------------------------*/

.seriesLogoLink:hover {
    opacity: 0.4;
}

.additional-info-area .videos-area {
    text-align: center;
}

.additional-info-area .videos-area video {
    margin: 20px 0;
    width: 100%;
    border: 1px solid #f0f0f0;
}

.thumbnails-inline img {
    height: 125px;
    object-fit: cover;
    margin-right : 10px;
    margin-bottom : 10px;
}

@media screen and (min-width: 768px) {
    .btn-collective a.btn-01 {
        padding-left: 100px;
        padding-right: 100px;
    }
    .additional-info-area .videos-area video {
        max-width: 980px;
    }
}

@media screen and (max-width: 767px) {
    .btn-collective a.btn-01 {
        padding: 13px 5px;
        width: 80%;
    }
    .additional-info-area .videos-area video {
        max-width: 380px;
    }
}
/* Product Features CSS */

.features-inline img {
    margin-right : 10px;
    margin-bottom : 10px;
}

@charset "utf-8";

/*  FLYOUT ZOOM
----------------------------------------*/

.holder {
    position:absolute;
    top: -10px;
    width: 100%;
}

#s7flyoutzoom_div {
    position:relative;
    visibility: hidden;
}

#s7flyoutzoom_div.s7flyoutviewer {
    width: 100%;
    height: 100%;
}

[data-namespace='s7viewers'].s7flyoutzoomview {
    border: none;
}

.s7flyoutviewer *:focus {
    outline: none;
}

.s7innercontainer+.s7innercontainer {
    visibility: hidden;
}

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom{
    left: 110%;
    width: 115%;
    height: 100%;
    z-index: 1;
}


img.js-switch-image-target {
    display: block;
}

.s7staticimage {
    visibility: hidden;
}


@charset "utf-8";
/*  Compatible Model
----------------------------------------*/

.product-feature-list.compatible-model {
  margin-top: -30px;
}

.product-feature-list.compatible-model a {
  color: #1779ba;
  text-decoration: none;
}
@charset "utf-8";

/* --------------------------------------------------------------------
 * Video Component
 * ----------------------------------------------------------------- */

.video-container video {
  width: 100%;
  height: auto;
}


@charset "utf-8";

/*  MEGA MENU
----------------------------------------*/

@media screen and (min-width: 1025px) {

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair {
    display: block;
    padding: 10px 0 10px;
    font-size: 0;
    letter-spacing: normal;
    white-space: unset;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair.nothas4th {
    padding: 0;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair h3 {
    font-weight: normal;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair div {
    display: block;
    flex: none;
    width: auto;
    min-width: 0;
    border: none;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair > div {
    margin-bottom: 5px;
    padding: 5px 20px;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair.nothas4th > div {
    padding: 5px 20px 5px 10px;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair > div:first-of-type {
    margin-top: 0;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair > div.twocol {
    display: flex;
    padding: 0;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair > div.twocol > div.half {
    display: inline-block;
    vertical-align: top;
  }

  .global-navi .menu > li > .sub-menu a.is-active-sub ~ .sub-menu-inner.repair > div.twocol > div.half + div.half {
    border-left: 1px solid #ccc;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items {
    display: block;
    margin: 0;
    padding: 0 0 25px;
    white-space: normal;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items:first-of-type {padding-top: 0;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items:last-of-type  {padding-bottom: 0;}

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items + .sub-menu-inner-items {
    border-top: 1px solid #ccc;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items {min-width: 390px;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col1 {width: auto;  min-width: 0;}
  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items {width: 390px;}

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li {
    display: inline-block;
    vertical-align: top;
    width: auto;
    margin: 2px 0 3px;
    padding: 0;
    flex: none;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col1 li {width: 100%; margin-top: 10px;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col2 li {width:  49%;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col3 li {width:  33%;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col4 li {width:  25%;}
  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col5 li {width:  20%;}

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li a {
    height: auto;
    margin: 0;
    padding: 5px 10px;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col5 li a {
    padding: 5px 2px;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col1 li a {
    padding-right: 25px;
    white-space: nowrap;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items.col1 li a.hasimg {
    padding-right: 2px;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li a.hasimg {
    display: block;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li a.hasimg img {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li a.hasimg p {
    margin-top: 5px;
    text-align: center;
  }

  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items li {
    vertical-align: middle;
  }

  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items li a.hasimg {
    vertical-align: middle;
  }

  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items.col2 li a.hasimg,
  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items.col3 li a.hasimg {
    padding: 10px 15px;
  }

  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items.col4 li a.hasimg,
  .sub-menu .sub-menu-inner.repair div.half .sub-menu-inner-items.col5 li a.hasimg {
    padding: 5px 10px;
  }

  .sub-menu .sub-menu-inner.repair .sub-menu-inner-items li a img.category-icon {
    display: inline;
    float: none;
    margin-right: 5px;
  }

}


@charset "UTF-8";
/* --------------------------------------------------------------------
 * Module > Component Modules > carousel-3070
 * ----------------------------------------------------------------- */

/* Slider */

.slick-slider {
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 105px;
  width: 34px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 1;
  margin: 0 auto;
}

.slick-prev {
  left: 0px;
  z-index: 4;
}
[dir="rtl"] .slick-prev {
  left: auto;
  right: 0px;
}
.slick-prev:before {
  content: '';
  width: 13px;
  height: 21px;
  display: block;
}
[dir="rtl"] .slick-prev:before {
  content: '';
  width: 13px;
  height: 21px;
  display: block;
}

.slick-next {
  right: 0px;
  z-index: 4;
}
[dir="rtl"] .slick-next {
  left: 0px;
  right: auto;
}
.slick-next:before {
  content: '';
  width: 13px;
  height: 21px;
  display: block;
}
[dir="rtl"] .slick-next:before {
  content: '';
  width: 13px;
  height: 21px;
  display: block;
}

.carousel-separate_slider-color-black .slick-prev,
.carousel-separate_slider-color-black .slick-next {
  background: rgba(51, 51, 51, 0.6);
}
.carousel-separate_slider-color-black .slick-prev:before {
  background: url(clientliball/image/btn_prev.png);
}
[dir="rtl"] .carousel-separate_slider-color-black .slick-prev:before {
  background: url(clientliball/image/btn_prev.png);
}
.carousel-separate_slider-color-black .slick-next:before {
  background: url(clientliball/image/btn_next.png);
}
[dir="rtl"] .carousel-separate_slider-color-black .slick-next:before {
  background: url(clientliball/image/btn_next.png);
}

.carousel-separate_slider-color-blue .slick-prev,
.carousel-separate_slider-color-blue .slick-next {
  background: rgba(0, 154, 217, 0.6);
}
.carousel-separate_slider-color-blue .slick-prev:before {
  background: url(clientliball/image/btn_prev.png);
}
[dir="rtl"] .carousel-separate_slider-color-blue .slick-prev:before {
  background: url(clientliball/image/btn_prev.png);
}
.carousel-separate_slider-color-blue .slick-next:before {
  background: url(clientliball/image/btn_next.png);
}
[dir="rtl"] .carousel-separate_slider-color-blue .slick-next:before {
  background: url(clientliball/image/btn_next.png);
}

.carousel-separate_slider-color-white .slick-prev,
.carousel-separate_slider-color-white .slick-next {
  background: rgba(255, 255, 255, 0.6);
}
.carousel-separate_slider-color-white .slick-prev:before {
  background: url(clientliball/image/btn_black_prev.png);
}
[dir="rtl"] .carousel-separate_slider-color-white .slick-prev:before {
  background: url(clientliball/image/btn_black_prev.png);
}
.carousel-separate_slider-color-white .slick-next:before {
  background: url(clientliball/image/btn_black_next.png);
}
[dir="rtl"] .carousel-separate_slider-color-white .slick-next:before {
  background: url(clientliball/image/btn_black_next.png);
}

/* Dots */
.slick-dots {
  position: absolute;
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  line-height: 1;
  bottom: 25px;
  left: calc(-43% + 60px);
}
@media screen and (max-width: 767px) {
  .slick-dots {
    text-align: center;
    left: 0 !important;
    bottom: -25px;
  }
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  padding: 0;
  vertical-align: top;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 12px;
  width: 12px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .slick-dots li button {
    background: #ccc;
  }
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li.slick-active button {
  background: #0099d9;
}

.carousel-separate_slider-dots-none .slick-dots {
  display: none;
}

/* visual styling */
.carousel-separate {
  display: flex;
  margin: 0 auto;
}
.carousel-separate.left {
  margin-left: 0px;
}
.carousel-separate.right {
  margin-right: 0px;
}
.carousel-separate div {
  flex-direction: row;
}
@media screen and (max-width: 767px) {
  .carousel-separate {
    flex-direction: column-reverse;
  }
}

.carousel-separate_textArea {
  width: 30%;
  padding: 30px;
  background: #000;
  display: flex;
}
@media screen and (max-width: 767px) {
  .carousel-separate_textArea {
    width: 100%;
    padding: 20px;
  }
}
.carousel-separate_textArea .inner {
  border-left: 1px solid #0099d9;
  padding: 0 30px 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .carousel-separate_textArea .inner {
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  .carousel-separate_textArea .inner {
    padding: 0;
    border-left: none;
  }
}
.carousel-separate_textArea .inner .btn-details {
  margin-top: 25px;
  width: 100%;
}
.carousel-separate_textArea .inner .btn-details a {
  letter-spacing: 0.09em;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .carousel-separate_textArea .inner .btn-details {
    margin-top: 15px;
  }
  .carousel-separate_textArea .inner .btn-details a {
    width: 100%;
    padding: 20px 70px;
  }
}

.carousel-separate-text-20 {
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .carousel-separate-text-20 {
    padding: 40px 20px 20px;
  }
}

.carousel-separate-text-30 {
  padding: 30px;
}
@media screen and (max-width: 767px) {
  .carousel-separate-text-30 {
    padding: 50px 30px 30px;
  }
}

.carousel-separate-text-40 {
  padding: 40px;
}
.carousel-separate-text-40.carousel-separate_textArea .inner .btn-details {
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .carousel-separate-text-40.carousel-separate_textArea .inner .btn-details {
    margin-top: 15px;
  }
}
@media screen and (max-width: 767px) {
  .carousel-separate-text-40 {
    padding: 60px 40px 40px;
  }
}

.carousel-separate-text-horizon-left,
.carousel-separate-text-horizon-left p,
.carousel-separate-text-horizon-left .image {
  text-align: left;
}

.carousel-separate-text-horizon-center,
.carousel-separate-text-horizon-center p,
.carousel-separate-text-horizon-center .image {
  text-align: center;
}

.carousel-separate-text-horizon-right,
.carousel-separate-text-horizon-right p,
.carousel-separate-text-horizon-right .image {
  text-align: right;
}

.carousel-separate-text-vertical-top .inner {
  justify-content: flex-start;
}

.carousel-separate-text-vertical-center .inner {
  justify-content: center;
}

.carousel-separate-text-vertical-bottom .inner {
  justify-content: flex-end;
}

.carousel-separate-text-color-white-black {
  background: white;
  color: black;
}

.carousel-separate-text-color-white-blue {
  background: white;
  color: #009ad9;
}

.carousel-separate-text-color-white-red {
  background: white;
  color: red;
}

.carousel-separate-text-color-black-white {
  background: black;
  color: white;
}

.carousel-separate-border-black .inner {
  border-color: black;
}

.carousel-separate-border-blue .inner {
  border-color: #009ad9;
}

.carousel-separate-border-red .inner {
  border-color: red;
}

.carousel-separate-border-white .inner {
  border-color: white;
}

.carousel-separate-btn-horizon-left .btn-details {
  text-align: left;
}

.carousel-separate-btn-horizon-center .btn-details {
  text-align: center;
}

.carousel-separate-btn-horizon-right .btn-details {
  text-align: right;
}

.carousel-separate_slider {
  width: 70%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .carousel-separate_slider {
    width: 100%;
  }
}
.carousel-separate_slider .slick-list li {
  position: relative;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.carousel-separate_slider .slick-list li a {
  display: block;
  height: 100%;
}
.carousel-separate_slider .slick-list li span {
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  display: flex;
  font-weight: 900;
  letter-spacing: 0.19em;
}
@media screen and (max-width: 767px) {
  .carousel-separate_slider .slick-list li span {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .carousel-separate_slider .slick-list li {
    width: 100%;
  }
}

.carousel-separate_slider-text-15 .slick-list li span {
  padding: 15px;
}

.carousel-separate_slider-text-20 .slick-list li span {
  padding: 20px;
}

.carousel-separate_slider-text-25 .slick-list li span {
  padding: 25px;
}

.carousel-separate_slider-text-horizon-left .slick-list li span {
  justify-content: flex-start;
}

.carousel-separate_slider-text-horizon-center .slick-list li span {
  justify-content: center;
}

.carousel-separate_slider-text-horizon-right .slick-list li span {
  justify-content: flex-end;
}

.carousel-separate_slider-text-vertical-top .slick-list li span {
  align-items: flex-start;
}

.carousel-separate_slider-text-vertical-center .slick-list li span {
  align-items: center;
}

.carousel-separate_slider-text-vertical-bottom .slick-list li span {
  align-items: flex-end;
}

.carousel-separate_slider-none .slick-dots {
  display: none !important;
}

.carousel-separate_slider .slick-list li span.carousel-separate_slider-caption-color-black {
  color: black;
}

.carousel-separate_slider .slick-list li span.carousel-separate_slider-caption-color-blue {
  color: #009ad9;
}

.carousel-separate_slider .slick-list li span.carousel-separate_slider-caption-color-red {
  color: red;
}

.carousel-separate_slider .slick-list li span.carousel-separate_slider-caption-color-white {
  color: white;
}

.carousel-separate .image {
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .carousel-separate .image {
    max-width: 120px;
  }
}

.carousel-separate .title {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.2;
  letter-spacing: 0.19em;
}

.carousel-separate .catch,
.carousel-separate .catch p {
  letter-spacing: 0.08em;
}

.carousel-separate_slider_textArea-font-style-bold .title {
  font-weight: 900;
}

.carousel-separate_slider_textArea-font-style-bold .catch,
.carousel-separate_slider_textArea-font-style-bold .catch p {
  font-weight: bold;
}

.carousel-separate_slider_textArea-font-style-italic .title,
.carousel-separate_slider_textArea-font-style-italic .catch,
.carousel-separate_slider_textArea-font-style-italic .catch p {
  font-style: italic;
}

.carousel-separate_slider_textArea-font-style-underline .title,
.carousel-separate_slider_textArea-font-style-underline .catch,
.carousel-separate_slider_textArea-font-style-underline .catch p {
  text-decoration: underline;
}

@charset "UTF-8";
/* --------------------------------------------------------------------
 * Module > Component Modules > textMedia5050
 * ----------------------------------------------------------------- */
.panel {
  margin: 0 auto;
}
.panel.left {
  margin-left: 0px;
}
.panel.right {
  margin-right: 0px;
}
.panelWrap {
  display: flex;
}
.panelWrap.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .panelWrap {
    flex-direction: column-reverse !important;
  }
}
.panelWrap > div {
  flex-direction: row;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .panelWrap > div {
    width: 100% !important;
  }
}
.panelWrap.panel-wrap-overlaymedia .panelWrap_text .panelWrap_text_inner {
  margin-right: 80px;
}
.panelWrap.reverse.panel-wrap-overlaymedia .panelWrap_text .panelWrap_text_inner {
  margin-right: 0;
  margin-left: 80px;
}
.panelWrap .panelWrap_text {
  padding: 30px;
  display: flex;
  align-self: stretch;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_text .panelWrap_text_inner {
    margin: 0 !important;
  }
}
.panelWrap .panelWrap_text .panelWrap_text_inner {
  padding: 0 30px;
  border-left: 1px solid #0099d9;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_text .panelWrap_text_inner {
    max-width: none;
    width: 100%;
    padding: 0;
    border-left: none;
  }
}
.panelWrap .panelWrap_text .panelWrap_text_title {
  font-size: 28px;
  margin-bottom: 10px;
  letter-spacing: 0.19em;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_text .panelWrap_text_title {
    font-size: 3rem;
  }
}
.panelWrap .panelWrap_text .panelWrap_text_cont,
.panelWrap .panelWrap_text .panelWrap_text_cont p {
  font-size: 16px;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_text .panelWrap_text_cont br,
  .panelWrap .panelWrap_text .panelWrap_text_cont p br {
    display: none;
  }
}
.panelWrap .panelWrap_text .btn-details {
  margin-top: 30px;
}
.panelWrap .panelWrap_text .btn-details a.btn-01 {
  letter-spacing: 0.09em;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_text .btn-details a.btn-01 {
    width: 100%;
  }
}
.panelWrap .panel-wrap-horizon-left {
  justify-content: flex-start;
}
.panelWrap .panel-wrap-horizon-center {
  justify-content: center;
}
.panelWrap .panel-wrap-horizon-right {
  justify-content: flex-end;
}
.panelWrap .panel-wrap-text-20 {
  padding: 20px;
}
.panelWrap .panel-wrap-text-30 {
  padding: 30px;
}
.panelWrap .panel-wrap-text-40 {
  padding: 40px;
}
.panelWrap .panel-wrap-text-horizon-left .panelWrap_text_title,
.panelWrap .panel-wrap-text-horizon-left .panelWrap_text_cont,
.panelWrap .panel-wrap-text-horizon-left .panelWrap_text_cont p {
  text-align: left;
}
.panelWrap .panel-wrap-text-horizon-center .panelWrap_text_title,
.panelWrap .panel-wrap-text-horizon-center .panelWrap_text_cont,
.panelWrap .panel-wrap-text-horizon-center .panelWrap_text_cont p {
  text-align: center;
}
.panelWrap .panel-wrap-text-horizon-right .panelWrap_text_title,
.panelWrap .panel-wrap-text-horizon-right .panelWrap_text_cont,
.panelWrap .panel-wrap-text-horizon-right .panelWrap_text_cont p {
  text-align: right;
}
.panelWrap .panel-wrap-text-vertical-top .panelWrap_text_inner {
  align-self: flex-start;
}
.panelWrap .panel-wrap-text-vertical-center .panelWrap_text_inner {
  align-self: center;
}
.panelWrap .panel-wrap-text-vertical-bottom .panelWrap_text_inner {
  align-self: flex-end;
}
.panelWrap .panel-wrap-text-color-white-black {
  background: white;
  color: black;
}
.panelWrap .panel-wrap-text-color-white-blue {
  background: white;
  color: #009ad9;
}
.panelWrap .panel-wrap-text-color-white-red {
  background: white;
  color: red;
}
.panelWrap .panel-wrap-text-color-black-white {
  background: black;
  color: white;
}
.panelWrap .panel-wrap-border-black .panelWrap_text_inner {
  border-color: black;
}
.panelWrap .panel-wrap-border-blue .panelWrap_text_inner {
  border-color: #009ad9;
}
.panelWrap .panel-wrap-border-red .panelWrap_text_inner {
  border-color: red;
}
.panelWrap .panel-wrap-border-white .panelWrap_text_inner {
  border-color: white;
}
.panelWrap .panel-wrap-btn-horizon-left .btn-details {
  text-align: left;
}
.panelWrap .panel-wrap-btn-horizon-center .btn-details {
  text-align: center;
}
.panelWrap .panel-wrap-btn-horizon-right .btn-details {
  text-align: right;
}
.panelWrap .panel-wrap-font-style-bold .panelWrap_text_title {
  font-weight: 900;
}
.panelWrap .panel-wrap-font-style-bold .panelWrap_text_cont,
.panelWrap .panel-wrap-font-style-bold .panelWrap_text_cont p {
  font-weight: bold;
}
.panelWrap .panel-wrap-font-style-italic .panelWrap_text_title,
.panelWrap .panel-wrap-font-style-italic .panelWrap_text_cont,
.panelWrap .panel-wrap-font-style-italic .panelWrap_text_cont p {
  font-style: italic;
}
.panelWrap .panel-wrap-font-style-underline .panelWrap_text_title,
.panelWrap .panel-wrap-font-style-underline .panelWrap_text_cont,
.panelWrap .panel-wrap-font-style-underline .panelWrap_text_cont p {
  text-decoration: underline;
}
.panelWrap .panelWrap_img {
  position: relative;
  min-height: 540px;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img {
    min-height: auto;
  }
}
.panelWrap .panelWrap_img .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img .bg {
    position: static;
    transform: translateX(0) translateY(0);
    max-width: 100%;
    height: auto;
  }
}
.panelWrap .panelWrap_img .bg img {
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img .bg img {
    opacity: 1;
  }
}
.panelWrap .panelWrap_img .bg video {
  max-width: none;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img .bg video {
    position: static;
    transform: translateX(0) translateY(0);
    max-width: 100%;
    height: auto;
  }
}
.panelWrap .panelWrap_img .movie {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -80px;
  margin: auto 0;
  text-align: center;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img .movie {
    position: static;
    left: auto;
    width: 100%;
    height: auto;
  }
}
.panelWrap .panelWrap_img .movie img {
  width: 100%;
}
.panelWrap .panelWrap_img .movie video {
  height: 100%;
  position: relative;
  left: -66.5px;
}
@media screen and (max-width: 767px) {
  .panelWrap .panelWrap_img .movie video {
    position: static;
    height: auto;
    width: 100%;
  }
}
.panelWrap.reverse > div.panelWrap_img {
  position: relative;
}
.panelWrap.reverse > div.panelWrap_img .bg img, .panelWrap.reverse > div.panelWrap_img .bg video {
  left: auto;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
}
@media screen and (max-width: 767px) {
  .panelWrap.reverse > div.panelWrap_img .bg img, .panelWrap.reverse > div.panelWrap_img .bg video {
    transform: translateX(0) translateY(0);
  }
}
.panelWrap.reverse > div.panelWrap_img .movie {
  position: absolute;
  z-index: 2;
  left: auto;
  right: -80px;
}
@media screen and (max-width: 767px) {
  .panelWrap.reverse > div.panelWrap_img .movie {
    position: static;
    right: auto;
  }
}
@charset "UTF-8";
/* --------------------------------------------------------------------
 * Module > Component Modules > header-image
 * ----------------------------------------------------------------- */
.header-image {
  display: flex;
  margin: 0 auto;
  overflow: hidden;
}

.header-image.left {
  margin-left: 0px;
}

.header-image.right {
  margin-right: 0px;
}

.header-image-box {
  width: 100%;
  position: relative;
  display: flex;
  padding: 2%;
}

.header-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.header-image-bg-sp {
  display: none;
}

@media only screen and (max-device-width: 480px) {
    .header-image-bg-sp {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: bottom;
      display: block;
      min-height: auto !important;
    }
    .header-image-bg {
        display: none;
    }
}

.header-image-text_area {
  width: 30%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header-image-text_area-half {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header-image-title {
  font-size: 28px;
  letter-spacing: 0.19em;
  line-height: 1.15;
  margin-bottom: 15px;
}

.header-image-text {
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 25px;
  margin-bottom: 30px;
}

.header-image-btn a {
  font-weight: 900;
  padding: 0;
  max-width: 156px;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 767px) {
  .header-image {
    display: block;
    min-height: auto !important;
  }

  .header-image-box {
    width: 100%;
    padding: 30px;
  }

  .header-image-text_area, .header-image-text_area-half {
    width: 50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
  }

  .header-image-title {
    margin-bottom: 20px;
  }

  .header-image-text {
    margin-bottom: 35px;
  }
}
.header-image-title_color-black .header-image-title {
  color: black;
}

.header-image-title_color-blue .header-image-title {
  color: #009ad9;
}

.header-image-title_color-red .header-image-title {
  color: red;
}

.header-image-title_color-white .header-image-title {
  color: white;
}

.header-image-text_color-black .header-image-text,
.header-image-text_color-black .header-image-text p {
  color: black;
}

.header-image-text_color-blue .header-image-text,
.header-image-text_color-blue .header-image-text p {
  color: #009ad9;
}

.header-image-text_color-red .header-image-text,
.header-image-text_color-red .header-image-text p {
  color: red;
}

.header-image-text_color-white .header-image-text,
.header-image-text_color-white .header-image-text p {
  color: white;
}

.header-image-title_style-bold .header-image-text_area .header-image-title,
.header-image-title_style-bold .header-image-text_area-half .header-image-title {
  font-weight: 900;
}

.header-image-title_style-italic .header-image-text_area .header-image-title,
.header-image-title_style-italic .header-image-text_area-half .header-image-title {
  font-style: italic;
}

.header-image-title_style-underline .header-image-text_area .header-image-title,
.header-image-title_style-underline .header-image-text_area-half .header-image-title {
  text-decoration: underline;
}

.header-image-text_style-bold .header-image-text_area .header-image-text,
.header-image-text_style-bold .header-image-text_area .header-image-text p,
.header-image-text_style-bold .header-image-text_area-half .header-image-text,
.header-image-text_style-bold .header-image-text_area-half .header-image-text p {
  font-weight: bold;
}

.header-image-text_style-italic .header-image-text_area .header-image-text,
.header-image-text_style-italic .header-image-text_area .header-image-text p,
.header-image-text_style-italic .header-image-text_area-half .header-image-text,
.header-image-text_style-italic .header-image-text_area-half .header-image-text p {
  font-style: italic;
}

.header-image-text_style-underline .header-image-text_area .header-image-text,
.header-image-text_style-underline .header-image-text_area .header-image-text p
.header-image-text_style-underline .header-image-text_area-half .header-image-text,
.header-image-text_style-underline .header-image-text_area-half .header-image-text p {
  text-decoration: underline;
}

.header-image-title_layout-left .header-image-title {
  text-align: left;
}

.header-image-title_layout-center .header-image-title {
  text-align: center;
}

.header-image-title_layout-right .header-image-title {
  text-align: right;
}

.header-image-text_layout-left .header-image-text,
.header-image-text_layout-left .header-image-text p {
  text-align: left;
}

.header-image-text_layout-center .header-image-text,
.header-image-text_layout-center .header-image-text p {
  text-align: center;
}

.header-image-text_layout-right .header-image-text,
.header-image-text_layout-right .header-image-text p {
  text-align: right;
}

.header-image-btn_layout-left .header-image-btn a {
  margin-right: auto;
}

.header-image-btn_layout-center .header-image-btn a {
  margin: auto;
}

.header-image-btn_layout-right .header-image-btn a {
  margin-left: auto;
}

.header-image-border_color-black .header-image-text_area,
.header-image-border_color-black .header-image-text_area-half {
  border-color: black !important;
}

.header-image-border_color-blue .header-image-text_area,
.header-image-border_color-blue .header-image-text_area-half {
  border-color: #009ad9 !important;
}

.header-image-border_color-red .header-image-text_area,
.header-image-border_color-red .header-image-text_area-half {
  border-color: red !important;
}

.header-image-border_color-white .header-image-text_area,
.header-image-border_color-white .header-image-text_area-half {
  border-color: white !important;
}

.header-image-border_color-hide .header-image-text_area,
.header-image-border_color-hide .header-image-text_area-half {
  border: none !important;
}

.header-image-text_layout-horizon_left .header-image-text_area,
.header-image-text_layout-horizon_left .header-image-text_area-half {
  margin-right: auto;
  border-right: 1px solid #009ad9;
  padding-right: 20px;
}

.header-image-text_layout-horizon_right .header-image-text_area,
.header-image-text_layout-horizon_right .header-image-text_area-half {
  margin-left: auto;
  border-left: 1px solid #009ad9;
  padding-left: 20px;
}

.header-image-text_layout-horizon_center .header-image-text_area,
.header-image-text_layout-horizon_center .header-image-text_area-half {
  margin: 0 auto;
  width: 70%;
}
@media screen and (max-width: 767px) {
  .header-image-text_layout-horizon_center .header-image-text_area,
  .header-image-text_layout-horizon_center .header-image-text_area-half {
    width: 100%;
  }
}

.header-image-text_layout-horizon_left_spcenter .header-image-text_area,
.header-image-text_layout-horizon_left_spcenter .header-image-text_area-half {
  margin-right: auto;
  border-right: 1px solid #009ad9;
  padding-right: 20px;
}
@media screen and (max-width: 767px) {
  .header-image-text_layout-horizon_left_spcenter .header-image-text_area,
  .header-image-text_layout-horizon_left_spcenter .header-image-text_area-half {
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
}

.header-image-text_layout-horizon_right_spcenter .header-image-text_area,
.header-image-text_layout-horizon_right_spcenter .header-image-text_area-half {
  margin-left: auto;
  border-left: 1px solid #009ad9;
  padding-left: 20px;
}
@media screen and (max-width: 767px) {
  .header-image-text_layout-horizon_right_spcenter .header-image-text_area,
  .header-image-text_layout-horizon_right_spcenter .header-image-text_area-half {
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
}

.header-image-text_layout-vertical_top .header-image-text_area,
.header-image-text_layout-vertical_top .header-image-text_area-half {
  padding-bottom: 30px;
  justify-content: flex-start;
}

.header-image-text_layout-vertical_center .header-image-text_area,
.header-image-text_layout-vertical_center .header-image-text_area-half {
  padding-top: 15px;
  padding-bottom: 15px;
  justify-content: center;
}

.header-image-text_layout-vertical_bottom .header-image-text_area,
.header-image-text_layout-vertical_bottom .header-image-text_area-half {
  padding-top: 30px;
  justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  .header-image-text_layout-vertical_top .header-image-text_area,
  .header-image-text_layout-vertical_top .header-image-text_area-half {
    padding-bottom: 70px;
  }

  .header-image-text_layout-vertical_center .header-image-text_area,
  .header-image-text_layout-vertical_center .header-image-text_area-half {
    padding: 25px 0;
  }

  .header-image-text_layout-vertical_bottom .header-image-text_area,
  .header-image-text_layout-vertical_bottom .header-image-text_area {
    padding-top: 70px;
  }
}

@charset "UTF-8";

/* --------------------------------------------------------------------
 * Module > Component Modules > multicolumn-2col
 * ----------------------------------------------------------------- */

.multicolumn-2 {
  margin: 0 auto;
  min-width: 280px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.multicolumn-2.left {
  margin-left: 0px;
}
.multicolumn-2.right {
  margin-right: 0px;
}

.multicolumn-2.multicolumn-2-padding-0 {
  padding: 0px;
}

.multicolumn-2.multicolumn-2-padding-20 {
  padding: 20px;
}

.multicolumn-2.multicolumn-2-padding-30 {
  padding: 30px;
}

.multicolumn-2.multicolumn-2-padding-40 {
  padding: 40px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-left-0 .parbase {
  padding-left: 0px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-left-10 .parbase {
  padding-left: 10px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-left-15 .parbase {
  padding-left: 15px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-left-20 .parbase {
  padding-left : 20px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-right-0 .parbase {
  padding-right: 0px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-right-10 .parbase {
  padding-right: 10px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-right-15 .parbase {
  padding-right: 15px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-right-20 .parbase {
  padding-right: 20px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-bottom-0 .parbase {
  padding-bottom: 0px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-bottom-20 .parbase {
  padding-bottom: 20px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-bottom-30 .parbase {
  padding-bottom: 30px;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-padding-bottom-40 .parbase {
  padding-bottom: 40px;
}

.multicolumn-2 > .multicolumn-2-col {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-width-0{
  width: 0%;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-width-25{
  width: 25%;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-width-50{
  width: 50%;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-width-75{
  width: 75%;
}

.multicolumn-2 .multicolumn-2-col.multicolumn-2-col-width-100{
  width: 100%;
}

@media screen and (max-width: 767px) {
  .multicolumn-2 > .multicolumn-2-col {
    width: 100%;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > js-following-sidebar
 * ----------------------------------------------------------------- */
.js-following-sidebar {
  padding-top:10px;
  padding-bottom:10px;
}

@charset "utf-8";
/*  アコーディオンパーツ
----------------------------------------*/

.collective-wrap.accord {
  padding-bottom: 0px;
}

.accordion-parts .spec-table {
  margin-top: -5px;
}

.accordion-parts .accordion-contents {
  display: none;
}

.accordion-parts .white-line {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  text-align: center;
  margin-top: -25px;
}

.accordion-parts .white-line .btn-accordion {
  width: 120px;
  height: 110px;
  background-image: url(clientliball/image/btn-triangle.png);
  background-size: 50px auto;
  background-position: center center;
  background-repeat: no-repeat;
  outline: none;
}

.accordion-parts.open .spec-table.dummy {
  display: none;
}

.accordion-parts.open .accordion-contents {
  display: block;
}

.accordion-parts.open .white-line {
  height: 110px;
  background: none;
}

.accordion-parts.open .white-line .btn-accordion {
  transform: rotate(180deg);
}

/* ShowHide CSS */

.showhide-area {
  color: #fff;
  position: relative;
}

.showhide-area.bkcolor-black{
  background-color: #000;
}

.showhide-area.bkcolor-gray{
  background-color: #444444;
}

.showhide-area.bkcolor-dark-gray{
  background-color: #191919;
}

.showhide-area.bkcolor-blue{
  background-color: #009ad9;
}

.showhide-header {
  text-align: center;
  font-family: "Roboto", Verdana, sans-serif;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  cursor: pointer;
}

.showhide-header:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  content: "";
  background: url(clientliball/image/concept-arrow.png) no-repeat 50%;
  background-size: cover;
}

.showhide-header.active:after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

@media screen and (min-width: 768px) {
  .showhide-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .showhide-header:after {
    width: 28px;
    height: 28px;
  }
}

@media screen and (max-width: 767px) {
  .showhide-header {
    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
    padding: 15px 0;
    font-size: 16px;
    line-height: 1;
  }
  .showhide-header:after {
    width: 16px;
    height: 16px;
    bottom: 10px;
  }
}

.showhide-close {
  text-align: center;
  padding: 10px 0;
}

.showhide-close img {
  width: 44px;
  height: 44px;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  cursor: pointer;
}

.showhide-close img:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.showhide-contents {
  padding-top: 15px;
  padding-bottom: 15px;
}

.showhide-contents.padd0 {
  padding-left: 0;
  padding-right: 0;
}

.showhide-contents.padd5 {
  padding-left: 5%;
  padding-right: 5%;
}

.showhide-contents.padd10 {
  padding-left: 10%;
  padding-right: 10%;
}

.showhide-contents.padd15 {
  padding-left: 15%;
  padding-right: 15%;
}

@media screen and (max-width: 767px) {
  .showhide-contents h1 {
    font-size: 28px;
  }
  .showhide-contents h2 {
    font-size: 18px;
  }
  .showhide-contents p {
    margin-top: 5px;
    font-size: 16px;
  }
  .showhide-contents.padd5,
  .showhide-contents.padd10,
  .showhide-contents.padd15 {
  	padding-left:5%;
 	padding-right:5%;
  }
}

@charset "utf-8";

/*  Positioning map
----------------------------------------*/

.positioning-map.pc,
.positioning-map.sp {
  display: none;
}

.positioning-map a {
  text-decoration: none;
  color: #000;
}

.positioning-map a:hover {
  opacity: 0.7;
}

.positioning-map.pc .main-series-header {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (min-width: 768px) {

  .positioning-map.pc {
    display: block;
    max-width: 1200px;
    margin: 10px auto 60px;
  }

  .positioning-map.pc table {
    width: 100%;
    border-collapse: collapse;
  }

  .positioning-map.pc table + table {
    margin-top: 30px;
  }

  .positioning-map.pc table th,
  .positioning-map.pc table td {
    position: relative;
    border: none;
    text-align: center;
  }

  .positioning-map.pc table thead th {
    padding: 1px;
  }

  .positioning-map.pc table thead th:nth-of-type(1) {
    width: 35px;
  }

  .positioning-map.pc table thead th:nth-of-type(2) {
    width: 230px;
  }

  .positioning-map.pc table thead th .thumb {
    display: block;
    position: relative;
    height: 230px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .positioning-map.pc table thead th .thumb .title {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
  }

  .positioning-map.pc table tbody td {
    height: 100px;
    border-right: 1px solid #b5b5b5;
    font-size: 11px;
  }

  .positioning-map.pc table tbody td img {
    padding: 0px 0 3px 0;
    vertical-align: middle;
  }

  .positioning-map.pc table tbody tr.odd td {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .positioning-map.pc table tbody tr:nth-of-type(1) td:nth-of-type(1) {
    background: none;
  }

  .positioning-map.pc table tbody td:last-child,
  .positioning-map.pc table tbody tr:nth-of-type(1) td:nth-of-type(1) {
    border: none;
  }

  .positioning-map.pc table .gradation {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: linear-gradient(#FA7C3A, #15A3FE);
  }

  .positioning-map.pc table .gradation .gradation-label {
    display: block;
    position: absolute;
    right: 15px;
    font-size: 13px;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-orientation: sideways-right;
  }

  .positioning-map.pc table .gradation .gradation-label.label-top {
    top: 0;
    color: #FA7C3A;
  }

  .positioning-map.pc table .gradation .gradation-label.label-bottom {
    bottom: 0;
    color: #15A3FE;
  }

  .positioning-map.pc table tbody td .cover-line {
    display: none;
    width: calc(100% + 1px);
    height: 50px;
    background-color: #47B3E0;
  }

  .positioning-map.pc table tbody td:last-child .cover-line {
    width: 100%;
  }

  .positioning-map.pc table tbody td .cover-line.active {
    display: block;
  }

  .positioning-map.pc table.none-thumb thead th {
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    text-align: left;
  }

  .positioning-map.pc table.none-thumb thead th:nth-of-type(1) {
    background: none;
  }

  .positioning-map.pc table.none-thumb .gradation  {
    display: none;
  }

}

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

  .positioning-map.pc {
    margin: 10px 20px 60px;
  }

}

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

  .positioning-map.sp {
    display: block;
    margin-top: 30px;
    padding: 30px 15px 45px;
    background-color: #D9D9D9;
    font-size: 0;
  }

  .positioning-map.sp > div + div {
    margin-top: 30px
  }

  .positioning-map.sp .thumb {
    display: block;
    position: relative;
    width: 100%;
    height: 345px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .positioning-map.sp .thumb .title {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }

  .positioning-map.sp .link {
    display: inline-block;
    width: calc(50% - 5px);
    height: 70px;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #fff;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
  }

  .positioning-map.sp .link:nth-child(even) {
    margin-left: 9px;
  }

  .positioning-map.sp .link img {
    vertical-align: bottom;
  }

  .positioning-map.sp .link.nosrlabel {
    padding: 0 15px;
    line-height: 70px;
  }

  .positioning-map.sp .link.nosrlabel img {
    vertical-align: middle;
  }

}


@charset "utf-8";

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

  .contentList.col3 > li {
    width: 33.333%;
  }

  .contentList.col4 > li {
    width: 25%;
  }
}

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

  .contentList.col3 > li, 
  .contentList.col4 > li {
    width: 100%;
  }
}

@charset "utf-8";

/*  TOP PAGE
----------------------------------------*/

@media screen and (min-width: 768px) {

  .contentslist2 {
    max-width: 1440px;
    min-width: 280px;
    margin: 0 auto 30px;
    padding: 0 15px;
    font-size: 0;
  }

  .contentslist2 ul {
    margin-left: -25px;
  }

  .contentslist2 ul li {
    display: inline-block;
    vertical-align: top;
    margin-left: 25px;
    margin-bottom: 25px;
    font-size: 1rem;
  }

  .contentslist2 ul.col3 li {
    width: calc(33.33% - 25px);
  }

  .contentslist2 ul.col4 li {
    width: calc(24.999% - 25px);
  }

  .contentslist2 ul li a {
    display: block;
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
  }

  .contentslist2 ul li a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #009ad9;
    opacity: 0.2;
    z-index: 1;
  }

  .contentslist2 ul li a .category-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    background-color: #009ad9;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
    z-index: 2;
  }

  .contentslist2 ul li a .overlay-text {
    position: absolute;
    top: calc(100% - 50px);
    left: 0;
    width: 100%;
    height: 150px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    transition: all 0.2s;
    z-index: 2;
  }

  .contentslist2 ul li a:hover .overlay-text {
    top: calc(100% - 150px);
  }

  .contentslist2 ul li a:hover .overlay-text.nodigest {
    top: calc(100% - 50px);
  }

  .contentslist2 ul li a .overlay-text .title {
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: bold;
  }

  .contentslist2 ul li a .overlay-text p.lead {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .contentslist2 ul li a.nolink {
    cursor: default;
  }
  .contentslist2 ul li a.nolink:hover:after {
    opacity: 0;
  }
}


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

  .contentslist2 {
    padding: 0 15px;
  }

  .contentslist2 ul li {
    margin-bottom: 25px;
  }

  .contentslist2 ul li a {
    display: block;
    position: relative;
    color: #fff;
    text-decoration: none;
  }

  .contentslist2 ul li a img {
    width: 100%;
  }

  .contentslist2 ul li a .category-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    background-color: #009ad9;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
    z-index: 2;
  }

  .contentslist2 ul li a .overlay-text {
    padding: 15px;
    text-align: center;
  }

  .contentslist2 ul li a .overlay-text {
    background-color: #000;
  }

  .contentslist2 ul li a .overlay-text .title {
    font-size: 1.6rem;
    font-weight: bold;
  }

  .contentslist2 ul li a .overlay-text .title {
    margin-bottom: 10px;
  }

  .contentslist2 ul li a .overlay-text p.lead {
    font-size: 1.5rem;
    line-height: 1.8;
  }

}

/* --------------------------------------------------------------------
 * Module > Component Modules > Component Category
 * ----------------------------------------------------------------- */

.compcat-container {
  background-color: #eee;
  margin: 20px 30px 20px 30px;
  padding: 30px;
}

.compcat-container .heading-03.compcat-header {
  min-width: auto;
}

.compcat-container .compcat-items {
  margin: 0 auto;
  width: 1340px;
}

.compcat-container .compcat-items li {
  display: inline-block;
  width: 260px;
  padding: 10px 10px 10px 10px;
  white-space: normal;
}

.compcat-container .compcat-items a {
  color: #000;
  padding: 5px 0;
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.compcat-container .compcat-items a:hover {
  color: #009ad9;
}
.compcat-container .compcat-items > li a > img {
  padding: 0 20px;
}

.compcat-container .compcat-items > li a:hover > img {
  opacity: 0.4;
}

@media screen and (max-width: 665px) {
  .compcat-container { padding: 30px 0 30px 0; margin: 0; }
  .compcat-container .compcat-items { width: 100%; display: flex; flex-wrap: wrap; padding: 0 15px; }
  .compcat-container .compcat-items li { width: 50%; }
  .compcat-container .compcat-items > li a > img { padding: 0 10px 0 0; width: 50px; }
}
@media screen and (min-width: 666px) and (max-width: 940px) { .compcat-container .compcat-items { width: 530px; } }
@media screen and (min-width: 941px) and (max-width: 1205px) { .compcat-container .compcat-items { width: 800px; } }
@media screen and (min-width: 1206px) and (max-width: 1475px) { .compcat-container .compcat-items { width: 1070px; } }

@charset "utf-8";

/*  LINKED MEDIA
----------------------------------------*/

.linkedmedia {
  position: relative;
  overflow: hidden;
}

.linkedmedia.left {
  margin-right: auto;
}

.linkedmedia.center {
  margin: 0 auto;
}

.linkedmedia.right {
  margin-left: auto;
}

.linkedmedia a {
  text-decoration: none;
}

.linkedmedia a:hover {
  opacity: 0.8;
}

.linkedmedia img,
.linkedmedia video {
  width: 100%;
}


.linkedmedia .overlay-text {
  position: absolute;
  line-height: 50px;
  top: calc(100% - 50px);
  vertical-align: middle;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.linkedmedia .overlay-text .title {
  font-size: 1.6rem;
  color: #fff;
}

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

  .linkedmedia .overlay-text {
    line-height: 30px;
    top: calc(100% - 30px);
  }

  .linkedmedia .overlay-text .title {
    font-size: 1.3rem;
  }

}

@charset "utf-8";

/* --------------------------------------------------------------------
 * Layout > Main Content > banner-list
 * ----------------------------------------------------------------- */
.banner-list {
  margin: 0 auto 30px;
  max-width: 1440px;
  min-width: 280px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.banner-list.col2 {
  max-width: 1440px;
}
.banner-list.col2 > li {
  width: 50%;
}
.banner-list.col3 > li {
  width: 33.333%;
}
.banner-list > li > a:hover > .banner-box {
  opacity: 0.8;
}
.banner-list.col3.gutter {
  max-width: 100%;
  padding: 10px 0 30px;
}
.banner-list.col3.gutter > li {
  padding: 3px;
}
.banner-list.gutter.ptn2 {
  margin: 0 auto 0;
}
.banner-list.gutter.ptn2 img {
  width: 100%;
}
.banner-list.col2.gutter.ptn2 {
  padding: 0 0 40px;
}
.banner-list.col3.gutter.ptn2 {
  padding: 0 3px 30px;
}
.banner-list.col2.gutter.ptn2 > li {
  padding: 20px 10px 0px;
}
.banner-list.col3.gutter.ptn2 > li {
  padding: 3px;
}
.banner-list.ptn2 .banner-box {
  margin: 0 auto 0;
}
.banner-list.ptn2 .banner-box .banner-image {
  padding-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .banner-list.col2 > li {
    width: 50%;
  }

  .banner-list.col3 > li {
    width: 33.333%;
  }
}
@media screen and (max-width: 767px) {
  .banner-list.gutter.ptn2 {
    margin-top: 15px;
    padding-top: 0;
  }
  .banner-list.col2.gutter.ptn2,
  .banner-list.col3.gutter.ptn2 {
    padding: 0 0 25px;
  }
  .banner-list.col2.gutter.ptn2 > li {
    padding: 10px 0;
  }
  .banner-list.col3.gutter.ptn2 > li {
    padding: 5px 10px;
  }
  .banner-list.col2 > li,
  .banner-list.col3 > li {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .banner-list {
    max-width: 960px;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > banner-list gutter
 * ----------------------------------------------------------------- */
.banner-list.gutter {
  max-width: 1460px;
  margin-top: -20px;
  padding: 0 10px;
}
.banner-list.gutter.col2 {
  max-width: 1440px;
}
.banner-list.gutter > li {
  padding: 20px 10px 0;
}
@media screen and (max-width: 767px) {
  .banner-list.gutter {
    padding: 0;
  }
  .banner-list.gutter > li {
    padding: 20px 0 0;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > banner-list banner-box
 * ----------------------------------------------------------------- */
.banner-box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
  max-width: 720px;
  width: 100%;
  margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
  .banner-box {
    margin: 5px auto 0;
  }
}

/* --------------------------------------------------------------------
 * Module > Component Modules > banner-list btn
 * ----------------------------------------------------------------- */
.banner-box .banner-image {
  padding-bottom: 15px;
}
.banner-box .btn-outer-box {
  width: 100%;
  text-align: center;
}
.banner-box .btn-outer-box a {
  display: inline-block;
  width: 30%;
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .banner-box .btn-outer-box a {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .banner-box.btn-01 {
    width: 100%;
  }
}

@charset "utf-8";

/*  productlistseries
----------------------------------------*/

.categorychecklist {
    margin-top : 0;
}

@media screen and (min-width: 768px) {
  .series-editable-area {
    margin-right: 40px;
  }
}

@charset "utf-8";

/*  productlisttempzone
----------------------------------------*/

.tempzone-content-margin-top {
  margin-top: 35px;
}

div.tempzone-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  text-align: right;
  line-height: 1;
}

div.tempzone-icon > img {
  padding-left: 4px;
  padding-bottom: 2px;
  width: 33%;
}
@charset "utf-8";

/*  productlistwop
----------------------------------------*/

.productlistwop .btn-compare {
  display: none;
}

.productlistwop .product-box label.checkbox {
  display: none;
}