@charset "UTF-8";
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese");
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * 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-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  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 */
}

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

/* Text-level semantics
   ========================================================================== */
/**
 * 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 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and 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
   ========================================================================== */
/**
 * Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

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

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

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

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

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

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

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

@font-face {
  font-family: 'Oswald';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Oswald-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'YuGothicM';
  font-style: normal;
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}

@font-face {
  font-family: 'YuGothicM';
  font-style: normal;
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
}

[class^="icon-"]::before,
.svgicon,
.card-staff > .text > .link > .button > a::after,
.contact-form .elemsubmit button[type="submit"]::after,
.footer-isms > a::after,
.footer-isms > a > .text p::after,
.index-staff .block > .item > .body .button > span::after,
.index-staff > .slick-arrow::after,
.list-works > li .more::after,
.nav-button a::after,
.nav-local > li > a::after,
.nav-service .grid > .hdg::after,
.project-list > .project > .body > .nav > a::after,
.project-slide > .slick-arrow::after,
.projectslide-content .body > .nav > a::after,
.section-contact > .nav > li.mail a::after,
.top-recruit > .nav > li a::after,
.top-servicelist > li.feature .title::after,
.top-servicelist > li.field .title::after,
.top-servicelist > li.system .title::after,
.works-keywords > .button::after,
.works-slide > .slick-arrow::after,
.workslide-content .body > .nav > a::after {
  content: '';
  display: block;
  background-image: url("../img/SVGsprite.svg");
  background-repeat: no-repeat;
}

.icon-icon-top-service-feature::before,
.icon-top-service-feature-style,
.top-servicelist > li.feature .title::after {
  width: 1.171875em;
  height: 0.6640625em;
  background-position: -0.078125em -0.078125em;
  background-size: 326.66667% 540%;
}

.icon-arrow-blue::before,
.arrow-blue-style,
.card-staff > .text > .link > .button > a::after,
.contact-form .elemsubmit button[type="submit"]::after,
.index-staff .block > .item > .body .button > span::after,
.index-staff > .slick-arrow::after,
.list-works > li .more::after,
.nav-button a::after,
.nav-local > li > a::after,
.nav-service .grid > .hdg::after,
.project-list > .project > .body > .nav > a::after,
.project-slide > .slick-arrow::after,
.projectslide-content .body > .nav > a::after,
.section-contact > .nav > li.mail a:hover::after,
.section-contact > .nav > li.mail a:active::after,
.section-contact > .nav > li.mail a:focus::after,
.top-recruit > .nav > li a:hover::after,
.top-recruit > .nav > li a:active::after,
.top-recruit > .nav > li a:focus::after,
.works-keywords > .button::after,
.workslide-content .body > .nav > a:hover::after,
.workslide-content .body > .nav > a:active::after,
.workslide-content .body > .nav > a:focus::after {
  width: 0.625em;
  height: 1em;
  background-position: -0.078125em -0.8203125em;
  background-size: 612.5% 358.59375%;
}

.icon-arrow-white::before,
.arrow-white-style,
.card-staff > .text > .link > .button > a:hover::after,
.card-staff > .text > .link > .button > a:active::after,
.card-staff > .text > .link > .button > a:focus::after,
.contact-form .elemsubmit button[type="submit"]:hover::after,
.contact-form .elemsubmit button[type="submit"]:active::after,
.contact-form .elemsubmit button[type="submit"]:focus::after,
.footer-isms > a::after,
.footer-isms > a > .text p::after,
.index-staff .block a.item:hover > .body > .button > span::after,
.index-staff .block a.item:active > .body > .button > span::after,
.index-staff .block a.item:focus > .body > .button > span::after,
.list-works > li > a:hover .more::after,
.list-works > li > a:active .more::after,
.list-works > li > a:focus .more::after,
.nav-button a:hover::after,
.nav-button a:active::after,
.nav-button a:focus::after,
.nav-local > li > a:hover::after,
.nav-local > li > a:active::after,
.nav-local > li > a:focus::after,
.nav-local > li > a.current::after,
.project-list > .project > .body > .nav > a:hover::after,
.project-list > .project > .body > .nav > a:active::after,
.project-list > .project > .body > .nav > a:focus::after,
.projectslide-content .body > .nav > a:hover::after,
.projectslide-content .body > .nav > a:active::after,
.projectslide-content .body > .nav > a:focus::after,
.section-contact > .nav > li.mail a::after,
.top-recruit > .nav > li a::after,
.works-slide > .slick-arrow::after,
.workslide-content .body > .nav > a::after {
  width: 0.625em;
  height: 1em;
  background-position: -1.328125em -0.078125em;
  background-size: 612.5% 358.59375%;
}

.icon-icon-top-service-field::before,
.icon-top-service-field-style,
.top-servicelist > li.field .title::after {
  width: 0.9375em;
  height: 0.625em;
  background-position: -2.03125em -0.078125em;
  background-size: 408.33333% 573.75%;
}

.icon-icon-top-service-system::before,
.icon-top-service-system-style,
.top-servicelist > li.system .title::after {
  width: 0.859375em;
  height: 0.796875em;
  background-position: -2.03125em -0.78125em;
  background-size: 445.45455% 450%;
}

.icon-icon-service-pchan::before,
.icon-service-pchan-style {
  width: 0.5546875em;
  height: 0.8359375em;
  background-position: -0.078125em -1.8984375em;
  background-size: 690.14085% 428.97196%;
}

.icon-icon-service-pchan_white::before,
.icon-service-pchan_white-style {
  width: 0.515625em;
  height: 0.7734375em;
  background-position: -0.7109375em -1.8984375em;
  background-size: 742.42424% 463.63636%;
}

.icon-icon-service-apps::before,
.icon-service-apps-style {
  width: 0.625em;
  height: 0.7578125em;
  background-position: -1.3046875em -1.8984375em;
  background-size: 612.5% 473.19588%;
}

.icon-icon-service-apps_white::before,
.icon-service-apps_white-style {
  width: 0.625em;
  height: 0.7578125em;
  background-position: -2.0078125em -1.8984375em;
  background-size: 612.5% 473.19588%;
}

.icon-icon-service-content_white::before,
.icon-service-content_white-style {
  width: 0.703125em;
  height: 0.7578125em;
  background-position: -3.046875em -0.078125em;
  background-size: 544.44444% 473.19588%;
}

.icon-icon-service-website::before,
.icon-service-website-style {
  width: 0.625em;
  height: 0.71875em;
  background-position: -3.046875em -0.9140625em;
  background-size: 612.5% 498.91304%;
}

.icon-icon-service-website_white::before,
.icon-service-website_white-style {
  width: 0.625em;
  height: 0.71875em;
  background-position: -3.046875em -1.7109375em;
  background-size: 612.5% 498.91304%;
}

.icon-icon-service-marketing_white::before,
.icon-service-marketing_white-style {
  width: 0.703125em;
  height: 0.703125em;
  background-position: -0.078125em -2.8125em;
  background-size: 544.44444% 510%;
}

.icon-icon-service-server_white::before,
.icon-service-server_white-style {
  width: 0.703125em;
  height: 0.703125em;
  background-position: -0.859375em -2.8125em;
  background-size: 544.44444% 510%;
}

.icon-icon-service-content::before,
.icon-service-content-style {
  width: 0.625em;
  height: 0.6796875em;
  background-position: -1.640625em -2.8125em;
  background-size: 612.5% 527.58621%;
}

.icon-icon-service-server::before,
.icon-service-server-style {
  width: 0.625em;
  height: 0.625em;
  background-position: -2.34375em -2.8125em;
  background-size: 612.5% 573.75%;
}

.icon-icon-service-marketing::before,
.icon-service-marketing-style {
  width: 0.625em;
  height: 0.625em;
  background-position: -3.046875em -2.8125em;
  background-size: 612.5% 573.75%;
}

html {
  margin: 0;
  font-size: 62.5%;
  line-height: 1.8;
  font-family:  "Noto Sans JP", "YuGothicM", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 140%;
  font-size: 1.4rem;
  background: #fff;
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

div, section, article, aside {
  box-sizing: border-box;
}

figure {
  margin: 0;
}

p {
  max-height: 100%;
}

strong {
  font-weight: bold;
}

em {
  font-weight: bold;
  font-style: normal;
}

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

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

hr {
  display: none;
}

input,
textarea,
button,
optgroup,
select {
  font: inherit;
}

a:hover, a:active, input:hover, input:active, textarea:hover, textarea:active, button:hover, button:active {
  outline: none !important;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.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 */
.slick-loading .slick-list {
  background: #fff url("/recruit/design/img/common/ajax-loader.gif") center center no-repeat;
}

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

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}

.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir="rtl"] .slick-prev {
  left: auto;
  right: -25px;
}

.slick-prev:before {
  content: "←";
}

[dir="rtl"] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir="rtl"] .slick-next {
  left: -25px;
  right: auto;
}

.slick-next:before {
  content: "→";
}

[dir="rtl"] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}

.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 button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

#page {
  overflow: hidden;
}

#content {
  margin: 0 auto;
  max-width: 1080px;
}

#header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

#header > .ci {
  margin: 0 0 0 18px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 1rem;
}

#header > .ci a {
  display: block;
}

#header > .ci img {
  width: 116px;
  height: auto;
}

#header > .global {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

#header > .global > .nav {
  display: -ms-flexbox;
  display: flex;
  font-size: 1.5rem;
  line-height: 1.4;
}

#header > .global > .nav > li a {
  display: block;
  padding: 28px 10px 24px;
  text-decoration: none;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

#header > .global > .nav > li a > span {
  display: inline-block;
  border-bottom: 2px solid #fff;
}

#header > .global > .nav > li a:hover, #header > .global > .nav > li a:active, #header > .global > .nav > li a:focus, #header > .global > .nav > li a.-current {
  color: #053075;
}

#header > .global > .nav > li a:hover > span, #header > .global > .nav > li a:active > span, #header > .global > .nav > li a:focus > span, #header > .global > .nav > li a.-current > span {
  border-bottom-color: #053075;
}

#header > .global > .nav > li a.-current {
  font-weight: bold;
}

#header > .global > .sns {
  display: -ms-flexbox;
  display: flex;
  line-height: 1.4;
  margin-left: 5px;
}

#header > .global > .sns > ul > li > a {
  transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

#header > .global > .sns > ul > li > a:hover, #header > .global > .sns > ul > li > a:active, #header > .global > .sns > ul > li > a:focus {
  opacity: 0.8;
}

#header > .global > .sns > ul > li > a img {
  width: 24px;
  height: 24px;
}

#header > .spsns {
  display: none;
  position: absolute;
  top: 16px;
  right: 55px;
}

#header > .spsns a {
  transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

#header > .spsns a:hover, #header > .spsns a:active, #header > .spsns a:focus {
  opacity: 0.8;
}

#header > .spsns img {
  width: 24px;
  height: 24px;
}

#hamburger {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10000;
  border: none;
  background: transparent;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  margin: 0;
  cursor: pointer;
  display: none;
}

#hamburger > .bar {
  display: block;
  height: 3px;
  background: #9b9b9b;
  margin: 0 0 6px;
  width: 100%;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

#hamburger > .bar:nth-child(3) {
  margin-bottom: 0;
}

#hamburger[aria-expanded="true"] {
  position: fixed;
}

#hamburger[aria-expanded="true"] > .bar:nth-child(1) {
  -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
          transform: translate3d(0, 9px, 0) rotate(45deg);
}

#hamburger[aria-expanded="true"] > .bar:nth-child(2) {
  opacity: 0;
}

#hamburger[aria-expanded="true"] > .bar:nth-child(3) {
  -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg);
          transform: translate3d(0, -9px, 0) rotate(-45deg);
}

#drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  z-index: 9500;
  padding-top: 60px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
}

#drawer[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.drawer-open #overlay {
  opacity: 1;
  visibility: visible;
}

.anchor-link {
  margin-left: -103px;
  margin-right: -103px;
  margin-top: 4.4em;
  line-height: 1.4;
  display: -ms-flexbox;
  display: flex;
}

.anchor-link > li {
  margin-right: 12px;
  margin-left: 12px;
  width: calc((100% - 12px * 2 * 3) / 3);
  border-bottom: 10px solid #053075;
}

.anchor-link > li > a {
  display: block;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  text-decoration: none;
  text-align: center;
  font-size: 2rem;
  color: #053075;
  padding: 0.8em 0.8em 0.6em;
  position: relative;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.anchor-link > li > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 20% 30% repeat;
  background-size: 250%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.anchor-link > li > a > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.4rem;
  color: #000;
  font-family: 'Oswald', sans-serif;
}

.anchor-link > li > a.-active, .anchor-link > li > a:hover, .anchor-link > li > a:active, .anchor-link > li > a:focus {
  color: #fff;
  border-color: #053075;
}

.anchor-link > li > a.-active::before, .anchor-link > li > a:hover::before, .anchor-link > li > a:active::before, .anchor-link > li > a:focus::before {
  opacity: 1;
}

.anchor-link > li > a.-active > span::after, .anchor-link > li > a:hover > span::after, .anchor-link > li > a:active > span::after, .anchor-link > li > a:focus > span::after {
  color: #67ADFF;
}

.board-member > li {
  position: relative;
  padding-left: 8.5em;
}

.board-member > li > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  display: block;
}

.breaking-out.-inprim, .company-message, .project-header, .project-list, .project-mv, .project-pickup, .selected-keywords, .staff-mv, .view-wide, .works-keywords, .works-pickup, .works-resultouter {
  margin-right: -91px;
  margin-left: -91px;
}

.button-clear {
  margin: 0 0 0 18px;
  text-align: right;
}

.button-clear > button {
  cursor: pointer;
  border: 0;
  background: #053075;
  border: 1px solid #053075;
  border-radius: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.7em 1em 0.7em 2.3em;
  position: relative;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.button-clear > button::before {
  margin-right: 0.5em;
  position: absolute;
  top: 50%;
  left: 0.6em;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  display: inline-block;
  content: "\f2c0";
  font-size: 1.6rem;
  line-height: 1;
}

.button-clear > button:hover, .button-clear > button:active, .button-clear > button:focus {
  background: #fff;
  color: #053075;
}

.card-staff {
  margin: 0 0 45px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.card-staff > .text {
  -ms-flex-order: 2;
      order: 2;
  width: calc(100% - (180px + 24px));
}

.card-staff > .text > .body {
  position: relative;
  top: -3px;
}

.card-staff > .text > .body > .hdg {
  font-size: 2.4rem;
  line-height: 1.3;
  margin: 0;
  border-bottom: 1px solid #ccc;
  padding: 0 0 12px;
}

.card-staff > .text > .body > .year {
  margin: 6px 0 0;
  font-weight: bold;
  color: #053075;
  font-size: 1.6rem;
}

.card-staff > .text > .link {
  margin: 25px 0 0;
}

.card-staff > .text > .link > .button {
  text-align: center;
}

.card-staff > .text > .link > .button > a {
  display: inline-block;
  border: 1px solid #053075;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  color: #053075;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 12px 70px;
  position: relative;
  text-align: center;
}

.card-staff > .text > .link > .button > a::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.2rem;
}

.card-staff > .text > .link > .button > a:hover, .card-staff > .text > .link > .button > a:active, .card-staff > .text > .link > .button > a:focus {
  background-color: #053075;
  color: #fff;
}

.card-staff > .image {
  -ms-flex-order: 1;
      order: 1;
}

.card-staff > .image a {
  display: block;
  transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-staff > .image a:hover, .card-staff > .image a:active, .card-staff > .image a:focus {
  opacity: 0.8;
}

.card-staff > .image p {
  margin: 0;
}

.cards-desc {
  margin-top: 1.6em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.cards-desc > li {
  margin-bottom: 48px;
  display: -ms-flexbox;
  display: flex;
}

.cards-desc > li > .item {
  width: 100%;
  text-decoration: none;
}

.cards-desc > li > .item > .image {
  display: block;
  overflow: hidden;
  border: 1px solid #ccc;
}

.cards-desc > li > .item > .image > span {
  display: block;
  padding-top: 70%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.cards-desc > li > .item > .body > .hdg {
  color: #053075;
  font-size: 2rem;
  border-bottom: 1px solid #ccc;
  text-align: center;
  margin: 0;
  padding: 0.7em 0;
}

.cards-desc.-col2 > li {
  width: calc((100% - 24px * 1 ) / 2);
}

.cards-desc.-col3 > li {
  width: calc((100% - 24px * 2 ) / 3);
}

.cards-desc.-col4 > li {
  width: calc((100% - 24px * 3 ) / 4);
}

.cards-image {
  margin-left: -103px;
  margin-right: -103px;
  margin-top: 1.6em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cards-image > li {
  margin-right: 12px;
  margin-left: 12px;
  margin-bottom: 24px;
  display: -ms-flexbox;
  display: flex;
}

.cards-image > li > .item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 100%;
  text-decoration: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cards-image > li > .item > .image {
  display: block;
  overflow: hidden;
}

.cards-image > li > .item > .image > span {
  display: block;
  padding-top: 70%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.cards-image > li > .item > .body {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: 13px 18px;
  position: relative;
}

.cards-image > li > .item > .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 10% 30% repeat;
  background-size: 250%;
  opacity: 0.3;
  z-index: -1;
}

.cards-image > li > .item > .body .title {
  margin: 0;
  line-height: 1.5;
  font-size: 1.6rem;
  position: relative;
}

.cards-image > li a.item > .body > .title {
  color: #053075;
  padding-left: 0.8em;
}

.cards-image > li a.item > .body > .title::before {
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  content: "\f3d1";
  color: #053075;
}

.cards-image > li a.item:hover > .image > span, .cards-image > li a.item:active > .image > span, .cards-image > li a.item:focus > .image > span {
  -webkit-filter: opacity(0.8) brightness(102%);
          filter: opacity(0.8) brightness(102%);
}

.cards-image > li a.item:hover > .body > .title, .cards-image > li a.item:active > .body > .title, .cards-image > li a.item:focus > .body > .title {
  text-decoration: underline;
}

.cards-image.-col2 > li {
  width: calc((100% - 12px * 2 * 2) / 2);
}

.cards-image.-col3 > li {
  width: calc((100% - 12px * 2 * 3) / 3);
}

.cards-image.-col4 > li {
  width: calc((100% - 12px * 2 * 4) / 4);
}

.view-wide .cards-image {
  margin-right: -12px;
  margin-left: -12px;
}

.category-mv {
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  height: 230px;
  position: relative;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
}

.category-mv > .hdg {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 3.4rem;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
  white-space: nowrap;
}

.category-mv > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.category-mv.-service {
  background-image: url("/service/img/category-mv_bg.jpg");
}

.category-mv.-works {
  background-image: url("/works/img/category-mv_bg.jpg");
}

.category-mv.-project {
  background-image: url("/project/img/category-mv_bg.jpg");
}

.category-mv.-company {
  background-image: url("/company/img/category-mv_bg.jpg");
}

.category-mv.-recruit {
  background-image: url("/recruit/img/category-mv_bg.jpg");
}

.category-mv.-news {
  background-image: url("/news/img/category-mv_bg.jpg");
}

.category-mv.-contact {
  background-image: url("/contact/img/category-mv_bg.jpg");
}

.category-mv.-faq {
  background-image: url("/faq/img/category-mv_bg.jpg");
}

.category-mv.-recruit {
  background-image: url("/recruit/design/img/common/category-mv_utility_bg.jpg");
}

.category-mv.-utility {
  background-image: url("/recruit/design/img/common/category-mv_utility_bg.jpg");
}

#notfound .category-mv .hdg > span::after {
  margin-top: 0.5em;
}

.company-message {
  margin-top: 4em;
  margin-bottom: 5em;
  background: url("/company/img/company-message_bg_pc.png") 0 0 no-repeat;
  min-height: 1945px;
}

.company-message strong {
  font-weight: bold;
  color: #053075;
}

.company-message p {
  margin: 0;
  font-size: 2rem;
  line-height: 2.4;
}

.company-message .content1 .image {
  padding: 22px 0 0;
  text-align: center;
}

.company-message .content1 .text {
  padding: 20px 0 0;
  text-align: center;
}

.company-message .content1 .text p {
  font-size: 5rem;
  line-height: 1.7;
}

.company-message .content2 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 70px 70px 0 0;
}

.company-message .content2 .image {
  -ms-flex-order: 2;
      order: 2;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.company-message .content2 .text {
  -ms-flex-order: 1;
      order: 1;
  padding: 130px 30px 0 0;
}

.company-message .content2 .text p {
  font-size: 2.2rem;
  line-height: 2;
}

.company-message .content3 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 100px 0 0 0;
}

.company-message .content3 .image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 34px 0 0 65px;
}

.company-message .content3 .text {
  padding: 65px 0 0 40px;
}

.company-message .content4 {
  padding: 40px 0 0;
}

.company-message .content4 .image {
  text-align: right;
  padding: 0 80px 0 0;
}

.company-message .content4 .text {
  text-align: center;
  padding: 50px 0 0 0;
}

.company-message .content4 .text p {
  font-size: 3rem;
  line-height: 2;
}

.contact-form {
  margin: 2em 0 0;
}

.contact-form .elemcontent {
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  position: relative;
}

.contact-form .elemcontent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 40% 40% repeat;
  background-size: 100%;
  opacity: 0.3;
  z-index: -1;
}

.contact-form .elemrow {
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ccc;
  -ms-flex-align: center;
      align-items: center;
}

.contact-form .elemrow .elemhead {
  width: 250px;
  box-sizing: border-box;
  padding: 20px 17px;
}

.contact-form .elemrow .elemhead label {
  cursor: pointer;
  color: #053075;
  font-weight: bold;
}

.contact-form .elemrow .elemhead .must-data {
  margin-left: 1em;
}

.contact-form .elemrow .elembody {
  padding: 20px 17px;
  border-left: 1px solid #ccc;
  background-color: #fff;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.contact-form .elemrow .elembody .mauticform-errormsg {
  display: block;
  color: #D0011B;
  font-weight: bold;
  font-size: 1.4rem;
  margin: 0 0 0.5em;
}

.contact-form .elemrow .elembody textarea,
.contact-form .elemrow .elembody input[type="text"],
.contact-form .elemrow .elembody input[type="tel"],
.contact-form .elemrow .elembody input[type="email"],
.contact-form .elemrow .elembody input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #979797;
  background-color: #efefef;
  padding: 0.5em;
}

.contact-form .elemrow .elembody textarea:focus,
.contact-form .elemrow .elembody input[type="text"]:focus,
.contact-form .elemrow .elembody input[type="tel"]:focus,
.contact-form .elemrow .elembody input[type="email"]:focus,
.contact-form .elemrow .elembody input[type="url"]:focus {
  background-color: #fff;
}

.contact-form .elemrow .elembody textarea {
  height: 10em;
}

.contact-form .elemrow .elembody input[name="mauticform[hui_she_ming]"],
.contact-form .elemrow .elembody input[name="mauticform[bu_shu_ming]"],
.contact-form .elemrow .elembody input[name="mauticform[ming_zi]"],
.contact-form .elemrow .elembody input[name="mauticform[ming_qian]"],
.contact-form .elemrow .elembody input[name="mauticform[dian_hua_fan_hao]"] {
  width: 55%;
}

.contact-form .elemrow.mauticform-has-error .elembody textarea,
.contact-form .elemrow.mauticform-has-error .elembody input {
  background-color: rgba(208, 2, 27, 0.05);
}

.contact-form .elemsubmit {
  margin: 4em 0 0;
}

.contact-form .elemsubmit > div {
  text-align: center;
}

.contact-form .elemsubmit button[type="submit"] {
  display: inline-block;
  border: 1px solid #053075;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #053075;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 16px 45px;
  position: relative;
  min-width: 360px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
}

.contact-form .elemsubmit button[type="submit"]::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3.4rem;
}

.contact-form .elemsubmit button[type="submit"]:hover, .contact-form .elemsubmit button[type="submit"]:active, .contact-form .elemsubmit button[type="submit"]:focus {
  background-color: #053075;
  color: #fff;
}

.contact-form .note {
  margin: 30px 0 0;
  text-align: center;
}

.drawer-link > li {
  border-bottom: 1px solid #666;
  opacity: 0;
  -webkit-transform: scale(0) translateX(-280px);
          transform: scale(0) translateX(-280px);
}

.drawer-link > li:first-child {
  border-top: 1px solid #666;
}

.drawer-link > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.4;
  padding: 16px 20px 16px 35px;
  position: relative;
}

.drawer-link > li > a::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "\f3d1";
}

.drawer-link > li > a:hover, .drawer-link > li > a:active, .drawer-link > li > a:focus {
  background-color: rgba(5, 48, 117, 0.9);
}

#drawer[aria-hidden="false"] > .drawer-link > li {
  opacity: 1;
  -webkit-transform: scale(1) translateX(0);
          transform: scale(1) translateX(0);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(1) {
  transition-delay: 0.4s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(2) {
  transition-delay: 0.5s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(3) {
  transition-delay: 0.6s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(4) {
  transition-delay: 0.7s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(5) {
  transition-delay: 0.8s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(6) {
  transition-delay: 0.9s;
}

#drawer[aria-hidden="false"] > .drawer-link > li:nth-child(7) {
  transition-delay: 1s;
}

.em-01 {
  color: #D0011B;
  font-weight: bold;
}

.em-02 {
  font-weight: bold;
  font-style: normal;
}

.fadein-normal {
  opacity: 0;
}

.set-fadeinnormal {
  -webkit-animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

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

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

.fadein-slide {
  opacity: 0;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
}

.set-fadeinslide {
  -webkit-animation: fadein-slide 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-slide 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@-webkit-keyframes fadein-slide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadein-slide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.fadein-up {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

.set-fadeinup {
  -webkit-animation: fadein-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@-webkit-keyframes fadein-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadein-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.faq-content {
  max-width: 800px;
}

.faq-content .faq-category:focus {
  outline: none;
}

.faq-content .faq-category + .faq-category {
  margin-top: 67px;
}

.faq-content .faq-category + .faq-category .sub-tit {
  padding-top: 67px;
}

.faq-content .faq-category .sub-tit {
  margin: 0;
  font-size: 2.8rem;
  color: #053075;
  font-weight: 700;
  text-align: center;
}

.faq-content .faq-category__box {
  margin-top: 60px;
  border-bottom: 1px solid #cccccc;
}

.faq-content .faq-category__accordion {
  border-top: 1px solid #cccccc;
}

.faq-content .faq-category__accordion .cat {
  position: relative;
  margin: 0;
  padding: 25px 70px 25px 40px;
  cursor: pointer;
}

.faq-content .faq-category__accordion .cat.-open::after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.faq-content .faq-category__accordion .cat::before, .faq-content .faq-category__accordion .cat::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -1px;
  width: 18px;
  height: 2px;
  background: #053075;
}

.faq-content .faq-category__accordion .cat::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.faq-content .faq-category__accordion .cat span {
  display: block;
  position: relative;
  font-size: 1.8rem;
}

.faq-content .faq-category__accordion .cat span::before {
  display: block;
  content: "Q.";
  position: absolute;
  top: 0;
  left: -40px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #053075;
}

.faq-content .faq-category__accordion .text-box {
  display: none;
  padding-left: 40px;
}

.faq-content .faq-category__accordion .text-box .text {
  margin-bottom: 30px;
  position: relative;
}

.faq-content .faq-category__accordion .text-box .text::before {
  display: block;
  content: "A.";
  position: absolute;
  top: 3px;
  left: 0;
  margin-left: -40px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #67adff;
}

.faq-content .faq-category__accordion .text-box .text p {
  margin: 0;
}

.faq-content .faq-category__accordion .text-box .text p + p {
  margin-top: 20px;
}

.faq-content .faq-category__accordion .text-box .related-links {
  margin: 0 0 30px -40px;
}

.faq-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  box-sizing: border-box;
  gap: 0 40px;
  margin-bottom: 80px;
}

.faq-side {
  max-width: 240px;
  position: relative;
}

.faq-side__list {
  margin-top: 4.5em;
}

.faq-side__list.fixed {
  position: fixed;
  top: 0;
}

.faq-side__list.stopped {
  position: absolute;
  bottom: 0;
  width: 240px;
}

.faq-side__list-item .link {
  display: block;
  position: relative;
  padding-left: 12px;
  text-decoration: none;
  font-weight: 700;
}

.faq-side__list-item .link::before, .faq-side__list-item .link::after {
  display: block;
  content: "";
  position: absolute;
}

.faq-side__list-item .link::before {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #053075;
}

.faq-side__list-item .link::after {
  display: none;
  position: static;
}

.faq-side__list-item .link.active {
  color: #053075;
}

.faq-side__list-item + .faq-side__list-item {
  margin-top: 15px;
}

.fig-servicelist {
  margin: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.fig-servicelist > li {
  width: calc((100% - 2px) / 3);
  padding: 25px 10px 25px 73px;
  box-sizing: border-box;
  color: #053075;
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
}

.fig-servicelist > li::before {
  position: absolute;
  top: 25%;
  left: 25px;
  content: '';
  display: block;
}

.fig-servicelist > li.website::before {
  background-image: url(../img/sprite.png);
  background-position: -255px 0px;
  width: 40px;
  height: 47px;
}

.fig-servicelist > li.marketing::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -97px;
  width: 40px;
  height: 40px;
  top: calc(25% + 5px);
}

.fig-servicelist > li.content::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -52px;
  width: 40px;
  height: 40px;
}

.fig-servicelist > li.apps::before {
  background-image: url(../img/sprite.png);
  background-position: -35px -206px;
  width: 33px;
  height: 40px;
  left: 30px;
}

.fig-servicelist > li.server::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -142px;
  width: 40px;
  height: 40px;
}

.fig-servicelist > li.pchan::before {
  background-image: url(../img/sprite.png);
  background-position: 0px -206px;
  width: 30px;
  height: 45px;
}

.footer-banner {
  border-top: 1px solid #ccc;
  padding: 25px 0 20px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
}

.footer-banner > .item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.footer-banner > .item > li {
  margin: 0 10px;
}

.footer-banner > .item .banner {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 5px;
}

.footer-banner > .item .banner > li {
  margin: 0 10px;
}

.footer-banner > .item .banner > li a {
  display: block;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-banner > .item .banner > li a:hover, .footer-banner > .item .banner > li a:active, .footer-banner > .item .banner > li a:focus {
  opacity: 0.8;
}

.footer-isms {
  margin: 25px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.footer-isms > a {
  display: block;
  border: 1px solid #666;
  padding: 15px 60px 15px 15px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  text-decoration: none;
  position: relative;
  transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-isms > a::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3.4rem;
}

.footer-isms > a:hover, .footer-isms > a:active, .footer-isms > a:focus {
  background: #666;
}

.footer-isms > a > .banner img {
  width: 97px;
  height: auto;
}

.footer-isms > a > .text {
  margin-left: 20px;
}

.footer-isms > a > .text p {
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.5;
}

.footer-isms > a > .text p::after {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
}

.footer-portal {
  background: #fff;
  padding: 25px 0;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
}

.footer-portal .hdg {
  margin: 0;
  text-align: center;
  font-size: 2rem;
  color: #053075;
}

.footer-portal .link {
  margin: 7px 0 0;
  text-align: center;
}

.footer-portal .link > li {
  display: inline-block;
  margin: 0 0.8em;
}

.footer-portal .link > li a {
  color: #053075;
  text-decoration: none;
  position: relative;
  padding-left: 0.8em;
}

.footer-portal .link > li a:hover, .footer-portal .link > li a:active, .footer-portal .link > li a:focus {
  text-decoration: underline;
}

.footer-portal .link > li a::before {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  content: "\f3d1";
}

.footer-sitemap {
  padding: 43px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  position: relative;
}

.footer-sitemap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 0 30% repeat;
  background-size: 75%;
  opacity: 0.3;
  z-index: -1;
}

.footer-sitemap a {
  color: #053075;
  text-decoration: none;
}

.footer-sitemap a:hover, .footer-sitemap a:active, .footer-sitemap a:focus {
  text-decoration: underline;
}

.footer-sitemap > .logo {
  margin: 0;
}

.footer-sitemap > .logo img {
  width: 160px;
  height: auto;
}

.footer-sitemap > .nav {
  margin: 5px 0 0;
  width: 860px;
  display: -ms-flexbox;
  display: flex;
}

.footer-sitemap > .nav > li {
  padding-left: 1em;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.footer-sitemap > .nav > li > a {
  font-size: 1.6rem;
  font-weight: bold;
}

.footer-sitemap > .nav > li > ul {
  margin: 10px 0 0;
  line-height: 1.45;
}

.footer-sitemap > .nav > li > ul > li {
  margin: 0 0 3px;
  position: relative;
  padding-left: 1em;
}

.footer-sitemap > .nav > li > ul > li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\f3d1";
  color: #053075;
}

.footer-sitemap > .nav > li > ul > li + li {
  margin-top: 8px;
}

.footer-utility {
  color: #fff;
  background: #000;
  padding: 30px 0 20px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  font-size: 1.2rem;
}

.footer-utility a {
  color: #fff;
}

.footer-utility .link {
  text-align: center;
}

.footer-utility .link > li {
  display: inline-block;
  margin: 0 1em;
}

.footer-utility .address {
  display: block;
  margin: 10px 0;
  text-align: center;
  font-style: normal;
}

.footer-utility .copyright {
  display: block;
  margin: 10px 0 0;
  font-size: 1.2rem;
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
}

.gmap-block {
  border: 1px solid #ccc;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  max-width: 100%;
  height: 0;
  padding: 0 0 53%;
}

.gmap-block > div[id] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.go-pageheader {
  position: fixed;
  right: 25px;
  bottom: 25px;
  bottom: 55px;
  margin: 0;
  z-index: 100;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  transition: all 0.4s cubic-bezier(0.17, 0.88, 0.19, 1.22);
  opacity: 0;
  visibility: hidden;
}

.go-pageheader.-show, .go-pageheader:hover, .go-pageheader:active, .go-pageheader:focus {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.go-pageheader a {
  display: block;
  width: 46px;
  height: 46px;
  background-color: #4A4A4A;
  border: 1px solid #4A4A4A;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  position: relative;
  color: #fff;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

.go-pageheader a::before {
  display: block;
  content: "\f3d8";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 2.4rem;
}

.go-pageheader a:hover, .go-pageheader a:active, .go-pageheader a:focus {
  color: #053075;
  background-color: #fff;
  border-color: #ccc;
}

.go-pageheader span {
  display: block;
  text-indent: -9999px;
  width: 0;
  height: 0;
}

.hdg-center {
  margin: 65px 0 0;
  text-align: center;
  color: #053075;
  font-size: 2.8rem;
}

.hdg-lv2, .wysiwyg-block.-works h2:not([class]), .wysiwyg-block.-news h1:not([class]) {
  margin: 2.1em 0 0;
  font-size: 2.4rem;
  line-height: 1.4;
  border-bottom: 1px solid #ccc;
  padding: 0 0 0.5em;
}

.hdg-lv2.-indent > span, .wysiwyg-block.-works h2.-indent:not([class]) > span, .wysiwyg-block.-news h1.-indent:not([class]) > span {
  display: -ms-flexbox;
  display: flex;
}

.hdg-lv2.-indent > span > .number, .wysiwyg-block.-works h2.-indent:not([class]) > span > .number, .wysiwyg-block.-news h1.-indent:not([class]) > span > .number {
  white-space: nowrap;
  display: block;
  margin-right: 0.4em;
}

.hdg-lv2b {
  margin: 2.2em 0 1.4em;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #053075;
  text-align: center;
}

.hdg-lv2b > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Oswald', sans-serif;
}

.lead-text + .hdg-lv2b {
  margin-top: 1.6em;
}

.hdg-lv3, .wysiwyg-block.-works h3:not([class]), .wysiwyg-block.-news h2:not([class]) {
  margin: 1.7em 0 0;
  font-size: 2rem;
  line-height: 1.4;
  border-left: 10px solid #053075;
  padding: 1px 0 3px 0.7em;
}

.hdg-lv2 + .hdg-lv3, .wysiwyg-block.-works h2:not([class]) + .hdg-lv3, .wysiwyg-block.-news h1:not([class]) + .hdg-lv3, .wysiwyg-block.-works .hdg-lv2 + h3:not([class]), .wysiwyg-block.-works h2:not([class]) + h3:not([class]), .wysiwyg-block.-news .wysiwyg-block.-works h1:not([class]) + h3:not([class]), .wysiwyg-block.-works .wysiwyg-block.-news h1:not([class]) + h3:not([class]), .wysiwyg-block.-news .hdg-lv2 + h2:not([class]), .wysiwyg-block.-works .wysiwyg-block.-news h2:not([class]) + h2:not([class]), .wysiwyg-block.-news .wysiwyg-block.-works h2:not([class]) + h2:not([class]), .wysiwyg-block.-news h1:not([class]) + h2:not([class]) {
  margin-top: 1.2em;
}

.layout-cols > .col > .hdg-lv3:first-child, .wysiwyg-block.-works .layout-cols > .col > h3:first-child:not([class]), .wysiwyg-block.-news .layout-cols > .col > h2:first-child:not([class]) {
  margin-top: 0.5em;
}

.hdg-lv4 {
  margin: 1.3em 0 0;
  font-size: 2rem;
  line-height: 1.4;
}

.cards-desc > li > .item > .body > .hdg, .category-mv > .hdg, .hdg-lv2, .wysiwyg-block.-works h2:not([class]), .wysiwyg-block.-news h1:not([class]), .hdg-lv2b, .hdg-lv3, .wysiwyg-block.-works h3:not([class]), .wysiwyg-block.-news h2:not([class]), .hdg-lv4, .list-flow > li > .body .hdg, .list-works > li .hdg, .page-mv.-works > .hdg, .page-title, .section-contact > .hdg, .top-news > .hdgouter > .hdg, .top-project > .hdg, .top-recruit > .hdg, .top-service > .hdg, .top-servicelist > li .title, .top-works > .hdg {
  -webkit-font-feature-settings: 'palt';
          font-feature-settings: 'palt';
  letter-spacing: 0.04em;
}

a.hover-flash:hover, #header > .ci a:hover, .footer-sitemap > .logo a:hover, a.hover-flash:focus, #header > .ci a:focus, .footer-sitemap > .logo a:focus {
  opacity: 1;
  -webkit-animation: hover-flash 1s cubic-bezier(0.23, 1, 0.32, 1);
          animation: hover-flash 1s cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes hover-flash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hover-flash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.index-staff {
  margin-left: -15px;
  margin-right: -15px;
  margin-top: 15px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.index-staff .block {
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 30px;
  display: -ms-flexbox;
  display: flex;
}

.index-staff .block > .item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 100%;
  text-decoration: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.index-staff .block > .item > .image {
  display: block;
  overflow: hidden;
}

.index-staff .block > .item > .image > span {
  display: block;
  padding-top: 67%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.index-staff .block > .item > .body {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: 15px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.index-staff .block > .item > .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 10% 30% repeat;
  opacity: 0.3;
  z-index: -1;
}

.index-staff .block > .item > .body .catchcopy {
  font-weight: bold;
  color: #053075;
  font-size: 1.8rem;
  margin: 0;
  line-height: 1.5;
}

.index-staff .block > .item > .body .info {
  margin: 15px 0 20px;
  font-size: 1.4rem;
}

.index-staff .block > .item > .body .info > span {
  padding-right: 0.6em;
}

.index-staff .block > .item > .body .button {
  margin-top: auto;
}

.index-staff .block > .item > .body .button > span {
  display: block;
  border: 1px solid #053075;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  color: #053075;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 12px 15px;
  position: relative;
  text-align: center;
}

.index-staff .block > .item > .body .button > span::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.2rem;
}

.index-staff .block a.item:hover > .image > span, .index-staff .block a.item:active > .image > span, .index-staff .block a.item:focus > .image > span {
  -webkit-filter: opacity(0.8) brightness(102%);
          filter: opacity(0.8) brightness(102%);
}

.index-staff .block a.item:hover > .body > .button > span, .index-staff .block a.item:active > .body > .button > span, .index-staff .block a.item:focus > .body > .button > span {
  background-color: #053075;
  color: #fff;
}

.index-staff.-col2 .block {
  width: calc((100% - 15px * 2 * 2) / 2);
}

.index-staff.-col3 .block {
  width: calc((100% - 15px * 2 * 3) / 3);
}

.index-staff.-col4 .block {
  width: calc((100% - 15px * 2 * 4) / 4);
}

.index-staff.slick-initialized {
  visibility: visible;
  opacity: 1;
  height: auto;
}

.index-staff > .slick-arrow {
  width: auto;
  height: auto;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.index-staff > .slick-arrow::before {
  display: none;
}

.index-staff > .slick-arrow::after {
  font-size: 2.6rem;
}

.index-staff > .slick-arrow:hover, .index-staff > .slick-arrow:active, .index-staff > .slick-arrow:focus {
  opacity: 0.7;
}

.index-staff > .slick-arrow.slick-prev {
  left: -21px;
}

.index-staff > .slick-arrow.slick-prev::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.index-staff > .slick-arrow.slick-next {
  right: -21px;
}

.index-staff > .slick-dots {
  bottom: -25px;
}

.index-staff > .slick-dots li {
  margin: 0 9px;
  width: 11px;
  height: 11px;
}

.index-staff > .slick-dots button {
  width: auto;
  height: auto;
  padding: 0;
}

.index-staff > .slick-dots button::before {
  content: '';
  display: block;
  opacity: 1;
  width: 9px;
  height: 9px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #053075;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.index-staff > .slick-dots button:hover::before, .index-staff > .slick-dots button:active::before, .index-staff > .slick-dots button:focus::before {
  opacity: 1;
  background-color: #053075;
}

.index-staff > .slick-dots .slick-active button::before {
  opacity: 1;
  background-color: #053075;
}

.inline-link {
  position: relative;
  margin-left: 1.25em;
  padding-left: 0.8em;
  color: #053075;
  text-decoration: none;
  white-space: nowrap;
}

.inline-link::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  content: "\f3d1";
  line-height: 1;
}

.inline-link:hover, .inline-link:active, .inline-link:focus {
  text-decoration: underline;
}

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

.label-article > p {
  margin: 0;
  padding: 7px 25px;
  font-size: 1.3rem;
  display: inline-block;
  color: #fff;
  background: #053075;
  line-height: 1.4;
  min-width: 210px;
  text-align: center !important;
  box-sizing: border-box;
}

.layout-cols {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -13px;
  margin-left: -13px;
}

.layout-cols > .col {
  margin-top: 25px;
  margin-right: 13px;
  margin-left: 13px;
}

.layout-cols.-col2 > .col {
  width: calc((100% - 13px * 2 * 2) / 2);
}

.layout-cols.-col3 > .col {
  width: calc((100% - 13px * 2 * 3) / 3);
}

.layout-cols.-col4 > .col {
  width: calc((100% - 13px * 2 * 4) / 4);
}

.layout-cols.-panels > .col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
}

.hdg-lv4 + .layout-cols.-panels {
  margin-top: -8px;
}

.layout-cols.-breakoutprim {
  margin-right: -104px;
  margin-left: -104px;
}

.layout-cols.-inpanel-image > .col {
  margin-top: 0;
}

.layout-cols.-inpanel-image > .col > p {
  margin-top: 0;
}

.layout-cols.-inpanel-image > .col > p.media-one {
  padding-top: 0;
}

.lead-text {
  margin: 2.2em 0 3em;
  font-size: 1.6rem;
  text-align: center !important;
  line-height: 2;
}

.page-title + .lead-text {
  margin-top: -1.7em;
}

.hdg-lv2b + .lead-text {
  margin-top: -1em;
}

.link-blank, .list-link > li a[target="_blank"], .pgh-normal a[target="_blank"], p a[target="_blank"] {
  position: relative;
  margin-right: 0.5em;
  padding-right: 1.1em;
  display: inline-block;
}

.link-blank::after, .list-link > li a[target="_blank"]::after, .pgh-normal a[target="_blank"]::after, p a[target="_blank"]::after {
  content: '';
  display: block;
  content: "\f3ef";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #053075;
}

.link-pdf:not([class~="_imglink"]), .list-link > li a:not([class~="_imglink"])[href$=".pdf"][target="_blank"], .list-link > li a:not([class~="_imglink"])[href$=".doc"][target="_blank"], .pgh-normal a:not([class~="_imglink"])[href$=".pdf"][target="_blank"], p a:not([class~="_imglink"])[href$=".pdf"][target="_blank"] {
  position: relative;
  margin-right: 0.4em;
  padding-right: 1.1em;
  display: inline-block;
}

.link-pdf:not([class~="_imglink"])::after, .list-link > li a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after, .list-link > li a[target="_blank"][href$=".doc"]:not([class~="_imglink"])::after, .pgh-normal a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after, p a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after {
  content: '';
  display: block;
  content: "\f471";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #053075;
}

.list-bullet > li, .wysiwyg-block.-works ul:not([class]) > li, .wysiwyg-block.-news ul:not([class]) > li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 0.4em;
}

.list-bullet > li:last-child, .wysiwyg-block.-works ul:not([class]) > li:last-child, .wysiwyg-block.-news ul:not([class]) > li:last-child {
  margin-bottom: 0;
}

.list-bullet > li::before, .wysiwyg-block.-works ul:not([class]) > li::before, .wysiwyg-block.-news ul:not([class]) > li::before {
  display: block;
  content: "\f21a";
  position: absolute;
  top: 5px;
  left: 3px;
  font-size: 0.8rem;
  color: #053075;
}

.list-bullet > li > p, .wysiwyg-block.-works ul:not([class]) > li > p, .wysiwyg-block.-news ul:not([class]) > li > p {
  font-size: 1.2rem;
  margin: 0.3em 0 1em 1em;
}

.list-bullet > li > .list-bullet, .wysiwyg-block.-works ul:not([class]) > li > .list-bullet, .wysiwyg-block.-news ul:not([class]) > li > .list-bullet, .wysiwyg-block.-works .list-bullet > li > ul:not([class]), .wysiwyg-block.-works ul:not([class]) > li > ul:not([class]), .wysiwyg-block.-news .list-bullet > li > ul:not([class]), .wysiwyg-block.-news ul:not([class]) > li > ul:not([class]) {
  margin-top: 0.3em;
}

.list-bullet.-linear2col, .wysiwyg-block.-works ul.-linear2col:not([class]), .wysiwyg-block.-news ul.-linear2col:not([class]) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.list-bullet.-linear2col > li, .wysiwyg-block.-works ul.-linear2col:not([class]) > li, .wysiwyg-block.-news ul.-linear2col:not([class]) > li {
  width: calc(100% / 2);
  padding-right: 2rem;
  box-sizing: border-box;
}

.list-ordered > li > .list-bullet, .wysiwyg-block.-works ol:not([class]) > li > .list-bullet, .wysiwyg-block.-news ol:not([class]) > li > .list-bullet, .wysiwyg-block.-works .list-ordered > li > ul:not([class]), .wysiwyg-block.-works ol:not([class]) > li > ul:not([class]), .wysiwyg-block.-news .list-ordered > li > ul:not([class]), .wysiwyg-block.-news ol:not([class]) > li > ul:not([class]) {
  margin-top: 0;
  margin-bottom: 1em;
}

.list-contact {
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
  margin-right: -12px;
  margin-left: -12px;
}

.list-contact > li {
  display: -ms-flexbox;
  display: flex;
  margin-right: 12px;
  margin-left: 12px;
  width: calc((100% - 12px * 2 * 2) / 2);
  line-height: 1.5;
}

.list-contact > li p {
  margin: 0;
}

.list-contact > li a {
  display: block;
  width: 100%;
  border: 1px solid #053075;
  background-color: #053075;
  color: #fff;
  text-decoration: none;
  padding: 15px 25px;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-sizing: border-box;
}

.list-contact > li a:hover, .list-contact > li a:active, .list-contact > li a:focus {
  background-color: #fff;
  color: #053075;
}

.list-contact > li.mail a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.list-contact > li.mail .left {
  -ms-flex-positive: 1;
      flex-grow: 1;
  font-size: 1.6rem;
}

.list-contact > li.mail .right {
  white-space: nowrap;
  font-size: 2.4rem;
  margin-left: 1em;
}

.list-contact > li.tel a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.list-contact > li.tel .left {
  -ms-flex-positive: 1;
      flex-grow: 1;
  font-size: 1.6rem;
}

.list-contact > li.tel .left .time {
  color: #67ADFF;
  font-size: 1.2rem;
}

.list-contact > li.tel .right {
  white-space: nowrap;
  font-size: 2.8rem;
  margin-left: 1em;
}

.list-contact.-col1 {
  margin-right: 0;
  margin-left: 0;
  -ms-flex-pack: center;
      justify-content: center;
}

.list-contact.-col1 > li {
  margin-right: 0;
  margin-left: 0;
  display: block;
  width: auto;
}

.list-contact.-col1 > li > a {
  -ms-flex-pack: center;
      justify-content: center;
}

.list-contact.-col1 > li > a .left {
  -ms-flex-positive: 0;
      flex-grow: 0;
}

.list-desc > dt {
  margin: 0.8em 0 0;
  font-weight: bold;
  position: relative;
  padding-left: 1.5em;
}

.list-desc > dt:first-of-type {
  margin-top: 0;
}

.list-desc > dt::before {
  display: block;
  content: "\f21a";
  position: absolute;
  top: 5px;
  left: 3px;
  font-size: 0.8rem;
  color: #053075;
}

.list-desc > dd {
  margin: 0.4em 0 0 1.5em;
}

.list-desc > dd > * {
  margin-top: 0.3em;
}

.list-desc > dd > :first-child {
  margin-top: 0;
}

.list-flow {
  margin: 1.7em 0 0;
}

.list-flow > li {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 55px;
  position: relative;
}

.list-flow > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  display: block;
  width: 47px;
  height: 100%;
  background-image: url("../img/common/list-flow_bg.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 47px auto;
}

.list-flow > li > .body {
  border: 1px solid #ccc;
  padding: 15px 18px;
}

.list-flow > li > .body .hdg {
  margin: 0 0 0.5em;
  font-size: 1.8rem;
  color: #053075;
  line-height: 1.5;
  font-weight: bold;
}

.list-flow > li > .body .hdg.-head {
  position: relative;
  padding-left: 1.5em;
}

.list-flow > li > .body .hdg.-head > .num {
  position: absolute;
  top: 0;
  left: 0;
}

.list-flow > li > .body > p {
  margin: 0;
}

.list-flow > li > .body > .rowdiv {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.list-flow > li > .body > .rowdiv > div.-middle {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.list-keywords {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.list-keywords > li {
  margin: 10px 10px 0 0;
}

.list-keywords > li > button {
  white-space: nowrap;
  background: #0e3192;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 1.4rem;
  color: #fff;
  font-weight: normal;
  display: block;
  padding: 0.1em 0.8em 0.2em;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.list-keywords > li > button:hover, .list-keywords > li > button:active, .list-keywords > li > button:focus {
  background: #1548d8;
}

.list-keywords > li > button.-selected {
  background-color: #fff !important;
  color: #0e3192 !important;
}

.list-keywords.-show {
  opacity: 1;
  visibility: visible;
}

.list-link > li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 0.2em;
}

.list-link > li::before {
  display: block;
  position: absolute;
  top: 1px;
  left: 7px;
  content: "\f3d1";
  color: #053075;
}

.list-link > li a {
  color: #053075;
  text-decoration: none;
}

.list-link > li a:hover, .list-link > li a:active, .list-link > li a:focus {
  text-decoration: underline;
}

.list-link.-linear > li {
  display: inline-block;
  margin: 0 1.2em 0.4em 0;
}

.list-ordered > li > .list-link, .wysiwyg-block.-works ol:not([class]) > li > .list-link, .wysiwyg-block.-news ol:not([class]) > li > .list-link {
  margin-top: 0;
  margin-bottom: 1em;
}

.list-news {
  margin: 2.5em 1.25em 3em;
}

.list-news > li {
  margin: 0 0 1.2em;
}

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

.list-news > li header {
  display: table-cell;
}

.list-news > li .date {
  display: table-cell;
  vertical-align: top;
  font-size: 1.4rem;
  color: #053075;
}

.list-news > li .tag {
  display: table-cell;
  vertical-align: top;
  padding: 0 2.5em 0 1.9em;
}

.list-news > li .tag > .t {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  background-color: #053075;
  padding: 0 1em;
  min-width: 115px;
  box-sizing: border-box;
  text-align: center;
}

.list-news > li .title {
  display: table-cell;
  vertical-align: top;
}

.list-notice {
  margin: 3em 0;
  padding: 1.2em 1.7em;
  background: #eee;
  font-size: 1.2rem;
  line-height: 1.6;
}

.list-notice > li {
  position: relative;
  padding-left: 1.1em;
  margin: 0 0 5px;
}

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

.list-notice > li > .mark {
  position: absolute;
  top: 0;
  left: 0;
}

.list-ordered, .wysiwyg-block.-works ol:not([class]), .wysiwyg-block.-news ol:not([class]) {
  counter-reset: li;
}

.list-ordered > li, .wysiwyg-block.-works ol:not([class]) > li, .wysiwyg-block.-news ol:not([class]) > li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 0.4em;
}

.list-ordered > li:last-child, .wysiwyg-block.-works ol:not([class]) > li:last-child, .wysiwyg-block.-news ol:not([class]) > li:last-child {
  margin-bottom: 0;
}

.list-ordered > li::before, .wysiwyg-block.-works ol:not([class]) > li::before, .wysiwyg-block.-news ol:not([class]) > li::before {
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: li;
  content: counter(li) ".";
  color: #053075;
  font-weight: bold;
}

.list-ordered > li > .list-ordered, .wysiwyg-block.-works ol:not([class]) > li > .list-ordered, .wysiwyg-block.-news ol:not([class]) > li > .list-ordered, .wysiwyg-block.-works .list-ordered > li > ol:not([class]), .wysiwyg-block.-works ol:not([class]) > li > ol:not([class]), .wysiwyg-block.-news .list-ordered > li > ol:not([class]), .wysiwyg-block.-news ol:not([class]) > li > ol:not([class]) {
  margin-top: 0;
  margin-bottom: 1em;
}

.list-works {
  margin-left: -103px;
  margin-right: -103px;
  margin-top: 4em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list-works > li {
  margin-right: 12px;
  margin-left: 12px;
  margin-bottom: 25px;
  width: calc((100% - 12px * 2 * 3) / 3);
  display: -ms-flexbox;
  display: flex;
  line-height: 1.5;
  position: relative;
}

.list-works > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 20% 10% repeat;
  background-size: 250%;
  opacity: 0.3;
  z-index: -1;
}

.list-works > li p {
  margin: 0;
}

.list-works > li .image {
  overflow: hidden;
}

.list-works > li .image > span {
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 75%;
}

.list-works > li .body {
  padding: 13px 10px;
}

.list-works > li .hdg {
  margin: 0;
  font-size: 1.8rem;
  color: #053075;
  font-weight: bold;
  line-height: 1.4;
}

.list-works > li .client {
  margin-top: 0.6em;
  font-size: 1.2rem;
}

.list-works > li .url {
  margin-top: 0.1em;
  font-size: 1.2rem;
}

.list-works > li .keywords {
  margin-top: 0.6em;
  font-size: 1.2rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list-works > li .keywords > li {
  margin: 5px 5px 0 0;
  white-space: nowrap;
  background: #0e3192;
  border: 1px solid #ccc;
  color: #fff;
  font-weight: normal;
  display: block;
  padding: 0.3em 0.8em 0.4em;
}

.list-works > li .more {
  margin-top: 1.6em;
  border: 1px solid #053075;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
  text-align: center;
  padding: 14px 45px;
  color: #053075;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #fff;
}

.list-works > li .more::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.6rem;
}

.list-works > li > a {
  display: block;
  border: 1px solid #ccc;
  width: 100%;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.list-works > li > a:hover, .list-works > li > a:active, .list-works > li > a:focus {
  border-color: #053075;
}

.list-works > li > a:hover .more, .list-works > li > a:active .more, .list-works > li > a:focus .more {
  background: #053075;
  color: #fff;
}

.loading-motion,
.loading-motion::before,
.loading-motion::after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation: loading 1.8s infinite cubic-bezier(0.86, 0, 0.07, 1);
          animation: loading 1.8s infinite cubic-bezier(0.86, 0, 0.07, 1);
}

.loading-motion {
  color: #053075;
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation-delay: -0.25s;
          animation-delay: -0.25s;
}

.loading-motion::before, .loading-motion::after {
  content: '';
  position: absolute;
  top: 0;
}

.loading-motion::before {
  left: -3.5em;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

.loading-motion::after {
  left: 3.5em;
}

@-webkit-keyframes loading {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes loading {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.media-border > .body {
  margin: 2.5em 0;
  border: 1px solid #ccc;
}

.media-border > .body + .caption {
  margin-top: -2em;
  margin-bottom: 3em;
}

.media-border > .body > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.media-border > .caption {
  margin: 5px 0 0;
  text-align: center;
}

.media-border > .caption.-right {
  text-align: right;
}

.media-border.-bglightgray > .body {
  background-color: #f6f6f6;
}

.media-one {
  padding-top: 10px;
  text-align: center !important;
}

.media-one .caption {
  display: block;
  margin: 0.4em 0 0;
  font-size: 1.2rem;
}

.media-one .caption ._strong {
  margin-top: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #053075;
}

.media-one .caption ._strong + p {
  margin-top: 0;
}

.media-parallel > .media .media-one {
  padding-top: 0;
}

.media-one.-imgborder img {
  display: block;
  border: 1px solid #ccc;
}

.media-parallel {
  display: -ms-flexbox;
  display: flex;
  padding-top: 20px;
}

.media-parallel > .body {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.media-parallel > .body > *:first-child {
  margin-top: 0;
}

.media-parallel > .media {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.media-parallel > .media > *:first-child {
  margin-top: 0;
}

.media-parallel.-medialeft > .body {
  -ms-flex-order: 2;
      order: 2;
  margin-left: 30px;
}

.media-parallel.-medialeft > .media {
  -ms-flex-order: 1;
      order: 1;
}

.media-parallel.-mediaright > .body {
  -ms-flex-order: 1;
      order: 1;
  margin-right: 30px;
}

.media-parallel.-mediaright > .media {
  -ms-flex-order: 2;
      order: 2;
}

.hdg-lv2 + .media-parallel, .wysiwyg-block.-works h2:not([class]) + .media-parallel, .wysiwyg-block.-news h1:not([class]) + .media-parallel {
  margin-top: 0;
}

.list-flow > li > .body > .media-parallel {
  margin-top: 0;
  padding-top: 0;
}

.must-data {
  display: inline-block;
  color: #fff;
  background-color: #D0011B;
  font-size: 1.2rem;
  padding: 0 0.6em;
  margin: 0 0.7em 0 0;
}

.nav-breadcrumb {
  margin: 1em 0;
}

.nav-breadcrumb > .path {
  margin: 0;
}

.nav-breadcrumb > .path > .item {
  margin-right: 0.8em;
  padding-right: 1.3em;
  position: relative;
}

.nav-breadcrumb > .path > .item::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  content: "\f3d1";
}

.nav-breadcrumb > .path > .here {
  font-weight: normal;
}

#top .nav-breadcrumb {
  display: none;
}

.nav-button {
  margin: 60px 0 0;
  text-align: center;
  line-height: 1.5;
}

.nav-button > li {
  display: inline-block;
}

.nav-button a {
  display: block;
  border: 1px solid #053075;
  background: #fff;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #053075;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 20px 45px;
  position: relative;
  min-width: 360px;
  text-align: center;
}

.nav-button a::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3.4rem;
}

.nav-button a:hover, .nav-button a:active, .nav-button a:focus {
  background-color: #053075;
  color: #fff;
}

.nav-button a.-prev::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  left: 12px;
}

.nav-button a.-down::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  right: 18px;
}

.nav-button.-small a {
  padding: 13px 70px;
  min-width: 0;
  font-size: 1.4rem;
}

.nav-button.-small a::after {
  font-size: 2.2rem;
  right: 10px;
}

.nav-button.-col2, .nav-button.-col3, .nav-button.-col4 {
  text-align: left;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -104px;
  margin-right: -104px;
}

.nav-button.-col2 > li, .nav-button.-col3 > li, .nav-button.-col4 > li {
  display: block;
  margin-right: 13px;
  margin-left: 13px;
}

.nav-button.-col2 > li.-big, .nav-button.-col3 > li.-big, .nav-button.-col4 > li.-big {
  margin-bottom: 26px;
  width: 100%;
}

.nav-button.-col2 > li.-big > a, .nav-button.-col3 > li.-big > a, .nav-button.-col4 > li.-big > a {
  font-size: 3.2rem;
  padding-top: 30px;
  padding-bottom: 30px;
}

.nav-button.-col2 a, .nav-button.-col3 a, .nav-button.-col4 a {
  min-width: 0;
}

.nav-button.-col2 {
  margin-bottom: -26px;
}

.nav-button.-col2 li {
  margin-bottom: 26px;
}

.nav-button.-col2 > li {
  width: calc((100% - 13px * 2 * 2) / 2);
}

.nav-button.-col3 > li {
  width: calc((100% - 13px * 2 * 3) / 3);
}

.nav-button.-col4 > li {
  width: calc((100% - 13px * 2 * 4) / 4);
}

.panel-header .nav-button.-inpanelheader {
  margin-right: -10px;
  margin-left: -10px;
  margin-top: 15px;
}

.panel-header .nav-button.-inpanelheader > li {
  margin-right: 10px;
  margin-left: 10px;
}

.panel-header .nav-button.-inpanelheader > li > a {
  font-size: 1.4rem;
  padding: 12px 20px;
}

.panel-header .nav-button.-inpanelheader > li > a::after {
  font-size: 2.2rem;
}

.panel-header .nav-button.-inpanelheader.-col2 > li {
  width: calc((100% - 10px * 2 * 2) / 2);
}

.company-message .nav-button {
  margin-top: 30px;
}

.nav-local {
  margin: 0.7em -13px 0;
  line-height: 1.5;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav-local > li {
  margin-top: 0.9em;
  margin-right: 13px;
  margin-left: 13px;
  display: -ms-flexbox;
  display: flex;
}

.nav-local > li > a {
  display: block;
  border: 1px solid #053075;
  text-decoration: none;
  color: #053075;
  font-weight: bold;
  padding: 0.6em 1em;
  font-size: 1.6rem;
  position: relative;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}

.nav-local > li > a::after {
  position: absolute;
  top: 50%;
  right: 9px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
}

.nav-local > li > a:hover, .nav-local > li > a:active, .nav-local > li > a:focus, .nav-local > li > a.current {
  background-color: #053075;
  color: #fff;
}

.nav-local.-col2 > li {
  width: calc((100% - 13px * 2 * 2) / 2);
}

.nav-local.-col3 > li {
  width: calc((100% - 13px * 2 * 3) / 3);
}

.nav-local.-col4 > li {
  width: calc((100% - 13px * 2 * 4) / 4);
}

.nav-recruit {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  margin-top: 5.8em;
  display: -ms-flexbox;
  display: flex;
}

.nav-recruit > li {
  border-right: 1px solid #fff;
  width: calc((100% - 2px) / 3);
  position: relative;
  overflow: hidden;
}

.nav-recruit > li:last-child {
  border-right: 0;
}

.nav-recruit > li > a {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-recruit > li > a > .image {
  overflow: hidden;
}

.nav-recruit > li > a > .image > span {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 350px;
}

.nav-recruit > li > a > .body {
  position: relative;
  color: #fff;
}

.nav-recruit > li > a > .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 15% 30% repeat;
  background-size: 200%;
  z-index: -1;
}

.nav-recruit > li > a > .body > .title {
  margin: 0;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.4;
  padding: 3.3em 0;
}

.nav-recruit > li > a > .body > .title > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.nav-recruit > li > a:hover, .nav-recruit > li > a:active, .nav-recruit > li > a:focus {
  opacity: 0.9;
}

.nav-recruit > li.-disabled::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.58);
  z-index: 10;
}

.nav-recruit > li.-disabled::before {
  content: 'COMING SOON';
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  color: #fff;
  z-index: 20;
  font-family: 'Oswald', sans-serif;
  font-size: 3.6rem;
  white-space: nowrap;
}

.nav-recruit > li.-disabled > a {
  pointer-events: none;
}

.nav-recruit > li.-disabled > a > .image {
  -webkit-filter: blur(2px);
          filter: blur(2px);
}

.nav-recruit > li.-disabled > a > .body {
  -webkit-filter: blur(2px);
          filter: blur(2px);
}

.nav-recruit > li.business .image span {
  background-image: url("/recruit/img/nav-recruit_img_business.jpg");
  background-position: 0 0;
}

.nav-recruit > li.team .image span {
  background-image: url("/recruit/img/nav-recruit_img_team.jpg");
  background-position: 35% 50%;
}

.nav-recruit > li.office .image span {
  background-image: url("/recruit/img/nav-recruit_img_office.jpg");
  background-position: 0 0;
}

body#recruit.leaf .nav-recruit .image {
  display: none;
}

body#recruit.index .nav-recruit > .business {
  opacity: 0;
  -webkit-animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

body#recruit.index .nav-recruit > .team {
  opacity: 0;
  -webkit-animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

body#recruit.index .nav-recruit > .office {
  opacity: 0;
  -webkit-animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: fadein-normal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.nav-service {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0;
  margin-bottom: -80px;
}

.nav-service .gridcontainer {
  border-top: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav-service .grid {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: calc((100% - 2px) / 3);
  padding: 40px calc(100% / 18);
}

.nav-service .grid:nth-of-type(3n+3) {
  border-right: 0;
}

.nav-service .grid a {
  color: #053075;
  text-decoration: none;
}

.nav-service .grid a:hover, .nav-service .grid a:active, .nav-service .grid a:focus {
  text-decoration: underline;
}

.nav-service .grid > .hdg {
  margin: 0 0 0.5em;
  font-size: 2.4rem;
  color: #053075;
  position: relative;
  padding-left: 50px;
}

.nav-service .grid > .hdg::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
}

.nav-service .grid > .hdg::after {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  font-size: 2.4rem;
}

.nav-service .grid > .hdg.-website::before {
  background-image: url(../img/sprite.png);
  background-position: -255px 0px;
  width: 40px;
  height: 47px;
}

.nav-service .grid > .hdg.-marketing::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -97px;
  width: 40px;
  height: 40px;
  top: 5px;
}

.nav-service .grid > .hdg.-content::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -52px;
  width: 40px;
  height: 40px;
}

.nav-service .grid > .hdg.-apps::before {
  background-image: url(../img/sprite.png);
  background-position: -35px -206px;
  width: 33px;
  height: 40px;
  left: 5px;
}

.nav-service .grid > .hdg.-server::before {
  background-image: url(../img/sprite.png);
  background-position: -255px -142px;
  width: 40px;
  height: 40px;
}

.nav-service .grid > .hdg.-pchan::before {
  background-image: url(../img/sprite.png);
  background-position: 0px -206px;
  width: 30px;
  height: 45px;
}

.nav-service .grid > .hdg.-marketing::before {
  font-size: 6.5rem;
}

.nav-service .grid > .hdg.-server::before {
  font-size: 7rem;
}

.nav-service .grid > .hdg.-disabled {
  color: #979797;
}

.nav-service .grid > .link > li {
  position: relative;
  padding-left: 0.9em;
  margin: 0 0 0.1em;
  color: #979797;
}

.nav-service .grid > .link > li::before {
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  content: "\f3d1";
  color: #053075;
}

.nav-service .grid.js-accordion-open > .hdg::after {
  -webkit-transform: translateY(-50%) rotate(270deg);
          transform: translateY(-50%) rotate(270deg);
}

.news-date {
  color: #053075;
  font-weight: bold;
  margin: 0.3em 0 3.7em;
}

.page-mv.-works {
  padding: 45px 0 0;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-top: 35px;
  padding-right: calc(50vw - (50% + 91px));
  padding-left: calc(50vw - (50% + 91px));
  color: #fff;
  position: relative;
  border-bottom: 1px solid #ccc;
  z-index: 100;
}

.page-mv.-works::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 20% 30% repeat;
  background-size: cover;
  z-index: -1;
}

.page-mv.-works > .hdg {
  margin: 0 0 25px;
  font-size: 3.6rem;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
}

.page-mv.-works .imagewrap {
  position: relative;
}

.page-mv.-works .image.-wide {
  text-align: center;
}

.page-mv.-works .image.-narrow {
  margin: 0;
  position: absolute;
  top: -100px;
  right: 91px;
  color: #000;
}

.page-mv.-works .image.-narrow img {
  box-shadow: 1px 1px 5px 1px rgba(68, 68, 68, 0.4);
}

.page-mv.-works .image.-narrow .caption {
  display: block;
  margin: 10px 0 0;
  font-size: 1.2rem;
  text-align: right;
}

.page-title {
  font-size: 3.6rem;
  text-align: center;
  color: #053075;
  line-height: 1.3;
  margin: 0.8em 0 1.8em;
}

.page-title ruby rt {
  font-size: 35%;
}

.panel-header {
  border: 1px solid #ccc;
}

.panel-header > .hdg {
  margin: -1px -1px 0;
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.4;
  background: #053075;
  padding: 10px 20px 13px;
}

.panel-header > .panelbody {
  padding: 15px 20px 20px;
}

.panel-header > .panelbody > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.panel-header > .panelbody > p:not([class]) {
  margin-top: 0.7em;
}

.layout-cols > .col > .panel-header {
  margin-top: 0;
  width: 100%;
}

p + .panel-header {
  margin-top: 1.7em;
}

.panel-note {
  border: 1px solid #ccc;
  padding: 16px 20px 18px 20px;
  position: relative;
}

.panel-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 30% 60% repeat;
  background-size: 250%;
  opacity: 0.3;
  z-index: -1;
}

.panel-note > .hdg {
  margin: 0 0 1.1em;
  font-size: 1.8rem;
  color: #053075;
  line-height: 1.4;
}

.panel-note > .panelbody > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.panel-note > .panelbody > p:not([class]) {
  margin-top: 0.7em;
}

.layout-cols > .col > .panel-note {
  margin-top: 0;
  width: 100%;
}

.layout-cols > .col > .panel-note::before {
  background-size: 180%;
}

p + .panel-note {
  margin-top: 1.7em;
}

.panel-schedule {
  margin: 50px 0 0;
  border: 1px solid #ccc;
  padding: 30px 35px 35px;
  position: relative;
}

.panel-schedule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 15% 35% repeat;
  opacity: 0.3;
  z-index: -1;
}

.panel-schedule > .hdg {
  margin: 0;
  font-size: 2rem;
  line-height: 1.4;
  border-left: 10px solid #053075;
  padding: 1px 0 3px 0.7em;
}

.panel-schedule > .schedule {
  margin: 30px 0 0;
}

.panel-schedule > .schedule > li {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px dotted #ccc;
  display: -ms-flexbox;
  display: flex;
}

.panel-schedule > .schedule > li:last-child {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.panel-schedule > .schedule > li > .time {
  margin: 0;
  font-size: 1.6rem;
  font-weight: normal;
  color: #053075;
  width: 85px;
}

.panel-schedule > .schedule > li > .cont {
  margin: 0;
}

.hdg-lv3 + .pgh-normal, .wysiwyg-block.-works h3:not([class]) + .pgh-normal, .wysiwyg-block.-news h2:not([class]) + .pgh-normal, .hdg-lv3 + p, .wysiwyg-block.-works h3:not([class]) + p, .wysiwyg-block.-news h2:not([class]) + p {
  margin-top: 1.3em;
}

.hdg-lv4 + .pgh-normal, .hdg-lv4 + p {
  margin-top: 0.8em;
}

.list-ordered > li > .pgh-normal, .wysiwyg-block.-works ol:not([class]) > li > .pgh-normal, .wysiwyg-block.-news ol:not([class]) > li > .pgh-normal, .list-ordered > li > p, .wysiwyg-block.-works ol:not([class]) > li > p, .wysiwyg-block.-news ol:not([class]) > li > p {
  margin-top: 0;
  margin-bottom: 1em;
}

.section-top p {
  -webkit-font-feature-settings: 'pwid';
          font-feature-settings: 'pwid';
  text-align: justify;
}

.project-header {
  margin-top: -1em;
}

.project-header > .inner {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}

.project-header > .inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 80% 15% repeat;
  background-size: cover;
  z-index: -1;
}

.project-header > .inner > .hdg {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.45;
}

.project-header > .inner > .client {
  margin: 0.8em 0 0;
  font-size: 1.8rem;
  color: #67ADFF;
}

.project-header > .inner > .client > span:not([class]) {
  font-size: 0.8em;
  margin-left: 0.5em;
}

.project-header > .inner > .client > span.en {
  font-family: 'Oswald', sans-serif;
}

.project-list {
  margin-bottom: 40px;
}

.project-list > .project {
  min-height: 232px;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}

.project-list > .project + .project {
  margin-top: 20px;
}

.project-list > .project > .image {
  overflow: hidden;
  width: 40%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.project-list > .project > .image > span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.project-list > .project > .body {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: 24px 40px 24px 30px;
  position: relative;
}

.project-list > .project > .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 40% 40% repeat;
  background-size: 150%;
  z-index: -1;
  opacity: 0.3;
}

.project-list > .project > .body > .hdg {
  margin: 0;
  font-size: 2.4rem;
  color: #053075;
  line-height: 1.43;
}

.project-list > .project > .body > .client {
  margin: 0.6em 0 0;
  font-size: 1.6rem;
}

.project-list > .project > .body > .client > span {
  font-size: 0.8em;
  margin-left: 0.5em;
}

.project-list > .project > .body > .nav {
  margin: 1.5em 0 0;
}

.project-list > .project > .body > .nav > a {
  display: inline-block;
  border: 1px solid #053075;
  color: #053075;
  text-decoration: none;
  text-align: center;
  padding: 10px 60px 12px;
  position: relative;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-list > .project > .body > .nav > a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
}

.project-list > .project > .body > .nav > a:hover, .project-list > .project > .body > .nav > a:active, .project-list > .project > .body > .nav > a:focus {
  background-color: #053075;
  color: #fff;
}

.project-mv > .inner {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  background: #f6f6f6;
  color: #fff;
  padding-top: 30px;
  padding-bottom: 45px;
  position: relative;
  margin-bottom: 60px;
}

.project-pickup > .inner {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  padding-top: 60px;
  position: relative;
}

.project-slide {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-slide.slick-initialized {
  visibility: visible;
  opacity: 1;
  height: auto;
}

.project-slide > .slick-arrow {
  width: auto;
  height: auto;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-slide > .slick-arrow::before {
  display: none;
}

.project-slide > .slick-arrow::after {
  font-size: 5rem;
}

.project-slide > .slick-arrow:hover, .project-slide > .slick-arrow:active, .project-slide > .slick-arrow:focus {
  opacity: 0.7;
}

.project-slide > .slick-arrow.slick-prev {
  left: -60px;
}

.project-slide > .slick-arrow.slick-prev::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.project-slide > .slick-arrow.slick-next {
  right: -60px;
}

.project-slide > .slick-dots li {
  margin: 0 9px;
  width: 11px;
  height: 11px;
}

.project-slide > .slick-dots button {
  width: auto;
  height: auto;
  padding: 0;
}

.project-slide > .slick-dots button::before {
  content: '';
  display: block;
  opacity: 1;
  width: 9px;
  height: 9px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-slide > .slick-dots button:hover::before, .project-slide > .slick-dots button:active::before, .project-slide > .slick-dots button:focus::before {
  opacity: 1;
  background-color: #fff;
}

.project-slide > .slick-dots .slick-active button::before {
  opacity: 1;
  background-color: #fff;
}

.projectslide-content .o {
  display: -ms-flexbox;
  display: flex;
}

.projectslide-content .image {
  width: 40%;
}

.projectslide-content .image > p {
  margin: 0;
}

.projectslide-content .body {
  margin-left: 40px;
  width: calc(100% - (40% + 40px));
}

.projectslide-content .body > .hdg {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1.46;
}

.projectslide-content .body > .client {
  margin: 0.8em 0 0;
  font-size: 2rem;
  color: #053075;
}

.projectslide-content .body > .client > span {
  font-size: 0.8em;
  margin-left: 0.5em;
}

.projectslide-content .body > .pgh {
  margin-top: 1.3em;
}

.projectslide-content .body > .nav {
  margin: 2em 0 0;
}

.projectslide-content .body > .nav > a {
  display: inline-block;
  border: 1px solid #053075;
  color: #053075;
  text-decoration: none;
  text-align: center;
  padding: 10px 60px 12px;
  position: relative;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.projectslide-content .body > .nav > a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
}

.projectslide-content .body > .nav > a:hover, .projectslide-content .body > .nav > a:active, .projectslide-content .body > .nav > a:focus {
  background-color: #053075;
  color: #fff;
}

.related-links {
  margin: 30px 0 45px;
  padding: 14px 17px;
  color: #fff;
  background-color: #053075;
  display: -ms-flexbox;
  display: flex;
}

.related-links a {
  color: #fff;
}

.related-links > .hdg {
  margin: 0 25px 0 0;
  font-size: 1.4rem;
}

.related-links > .link > li {
  display: inline-block;
  margin: 0 1.5em 0 0;
}

.ripple-white, .card-staff > .text > .link > .button > a, .nav-button a, .nav-local > li > a, .nav-recruit > li > a, .top-worklist > li > a,
.ripple-blue,
.go-pageheader a,
.project-list > .project > .body > .nav > a,
.projectslide-content .body > .nav > a,
.section-contact > .nav > li.mail a,
.top-recruit > .nav > li a,
.works-keywords > .button,
.workslide-content .body > .nav > a {
  overflow: hidden;
  position: relative;
}

.ripple-white > .ripple, .card-staff > .text > .link > .button > a > .ripple, .nav-button a > .ripple, .nav-local > li > a > .ripple, .nav-recruit > li > a > .ripple, .top-worklist > li > a > .ripple,
.ripple-blue > .ripple,
.go-pageheader a > .ripple,
.project-list > .project > .body > .nav > a > .ripple,
.projectslide-content .body > .nav > a > .ripple,
.section-contact > .nav > li.mail a > .ripple,
.top-recruit > .nav > li a > .ripple,
.works-keywords > .button > .ripple,
.workslide-content .body > .nav > a > .ripple {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100%;
  pointer-events: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

.ripple-white.-show > .ripple, .card-staff > .text > .link > .button > a.-show > .ripple, .nav-button a.-show > .ripple, .nav-local > li > a.-show > .ripple, .nav-recruit > li > a.-show > .ripple, .top-worklist > li > a.-show > .ripple,
.ripple-blue.-show > .ripple,
.go-pageheader a.-show > .ripple,
.project-list > .project > .body > .nav > a.-show > .ripple,
.projectslide-content .body > .nav > a.-show > .ripple,
.section-contact > .nav > li.mail a.-show > .ripple,
.top-recruit > .nav > li a.-show > .ripple,
.works-keywords > .-show.button > .ripple,
.workslide-content .body > .nav > a.-show > .ripple {
  -webkit-animation: ripple 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation: ripple 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

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

.ripple-white > .ripple, .card-staff > .text > .link > .button > a > .ripple, .nav-button a > .ripple, .nav-local > li > a > .ripple, .nav-recruit > li > a > .ripple, .top-worklist > li > a > .ripple {
  background-color: rgba(255, 255, 255, 0.2);
}


.ripple-blue > .ripple,
.go-pageheader a > .ripple,
.project-list > .project > .body > .nav > a > .ripple,
.projectslide-content .body > .nav > a > .ripple,
.section-contact > .nav > li.mail a > .ripple,
.top-recruit > .nav > li a > .ripple,
.works-keywords > .button > .ripple,
.workslide-content .body > .nav > a > .ripple {
  background-color: rgba(5, 48, 117, 0.15);
}

.section-anchor h1.hdg-lv2b:first-child {
  margin-top: 110px;
}

.section-contact {
  padding: 45px 0 40px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  color: #fff;
  position: relative;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.section-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 100% 30% repeat;
  background-size: cover;
  z-index: -1;
}

.section-contact a {
  text-decoration: none;
}

.section-contact > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
}

.section-contact > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.section-contact > .pgh {
  margin: 2em 0 0;
  text-align: center;
  font-size: 1.6rem;
}

.section-contact > .faq-link {
  text-align: center;
}

.section-contact > .faq-link a {
  position: relative;
  font-size: 1.6rem;
  color: #fff;
}

.section-contact > .faq-link a:hover {
  text-decoration: underline;
}

.section-contact > .faq-link a::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: -18px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.section-contact > .nav {
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
  margin-right: -12px;
  margin-left: -12px;
}

.section-contact > .nav > li {
  display: -ms-flexbox;
  display: flex;
  margin-right: 12px;
  margin-left: 12px;
  width: calc((100% - 12px * 2 * 2) / 2);
}

.section-contact > .nav > li p {
  margin: 0;
}

.section-contact > .nav > li a {
  display: block;
  width: 100%;
}

.section-contact > .nav > li.mail a {
  border: 1px solid #fff;
  text-align: center;
  padding: 20px;
  color: #fff;
  font-size: 1.8rem;
  position: relative;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-contact > .nav > li.mail a::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3.4rem;
}

.section-contact > .nav > li.mail a:hover, .section-contact > .nav > li.mail a:active, .section-contact > .nav > li.mail a:focus {
  color: #053075;
  background-color: #fff;
}

.section-contact > .nav > li.tel a {
  background: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px 15px 10px 20px;
  border: 1px solid #fff;
}

.section-contact > .nav > li.tel a .hdg {
  font-size: 1.6rem;
  font-weight: bold;
  color: #053075;
}

.section-contact > .nav > li.tel a .time {
  font-size: 1.2rem;
}

.section-contact > .nav > li.tel a .num {
  font-size: 3rem;
}

.section-prim {
  margin: 30px 91px 0;
  padding: 0 0 80px;
}

.section-prim.-works {
  margin-top: 0;
}

.section-prim.-persons p,
.section-prim.-persons ul {
  font-size: 1.6rem;
}

.section-top {
  margin: 0;
  padding: 0;
}

.selected-keywords {
  display: none !important;
  margin-top: 4em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  background: #053075;
  padding: 10px;
}

.selected-keywords button {
  cursor: pointer;
}

.selected-keywords > .hdg {
  margin: 0;
  color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  padding: 0 20px 0 10px;
  white-space: nowrap;
}

.selected-keywords > .keywords {
  -ms-flex-positive: 1;
      flex-grow: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -7px;
}

.selected-keywords > .keywords > li {
  margin: 7px 10px 0 0;
  border: 1px solid #fff;
  background: #0e3192;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5em 0.8em 0.5em 2em;
  white-space: nowrap;
  position: relative;
}

.selected-keywords > .keywords > li > button {
  margin: 0 0.5em 0 0;
  padding: 0;
  border: 0;
  background: #0e3192;
  color: #fff;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0.7em;
  display: block;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
}

.selected-keywords > .keywords > li > button::before {
  content: "\f2c0";
  font-size: 1.6rem;
}

.selected-keywords > .deselectall {
  margin: 0;
  white-space: nowrap;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.selected-keywords > .deselectall > button {
  border: 0;
  background: #fff;
  color: #053075;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.5em 0.8em 0.5em 2.1em;
  position: relative;
  border: 1px solid #fff;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.selected-keywords > .deselectall > button::before {
  margin-right: 0.5em;
  position: absolute;
  top: 50%;
  left: 0.6em;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  display: inline-block;
  content: "\f2c0";
  font-size: 1.6rem;
  line-height: 1;
}

.selected-keywords > .deselectall > button:hover, .selected-keywords > .deselectall > button:active, .selected-keywords > .deselectall > button:focus {
  background: #0e3192;
  color: #fff;
}

.service-index {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.service-index > .category {
  margin: 25px 0 0;
  width: calc((100% - 12px * 2) / 2);
  display: -ms-flexbox;
  display: flex;
}

.service-index > .category > .icon {
  color: #fff;
  background-color: #053075;
  width: 250px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-pack: center;
      justify-content: center;
  box-sizing: border-box;
  padding: 2.5em 1.5em;
}

.service-index > .category > .icon > .hdg {
  margin: 0;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4;
}

.service-index > .category > .icon > .hdg::before {
  content: '';
  display: block;
  margin: 0 auto 25px;
}

.service-index > .category > .link {
  border-width: 1px 0;
  border-style: solid;
  border-color: #ccc;
  padding: 1.5em 1.8em;
  -ms-flex-positive: 1;
      flex-grow: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 1.5rem;
  color: #979797;
  line-height: 1.5;
  position: relative;
}

.service-index > .category > .link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 0 30% repeat;
  background-size: 200%;
  opacity: 0.3;
  z-index: -1;
}

.service-index > .category > .link a {
  color: #053075;
  text-decoration: none;
}

.service-index > .category > .link a:hover, .service-index > .category > .link a:active, .service-index > .category > .link a:focus {
  text-decoration: underline;
}

.service-index > .category > .link li {
  position: relative;
  padding-left: 0.8em;
  margin: 0 0 0.3em;
}

.service-index > .category > .link li::before {
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  content: "\f3d1";
  color: #053075;
}

.service-index > .category:nth-child(2n+1) {
  margin-right: 12px;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.service-index > .category:nth-child(2n+1) > .icon {
  -ms-flex-order: 2;
      order: 2;
}

.service-index > .category:nth-child(2n+1) > .link {
  -ms-flex-order: 1;
      order: 1;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.service-index > .category:nth-child(2n+1) > .link > ul {
  width: 290px;
}

.service-index > .category:nth-child(2n+2) {
  margin-left: 12px;
}

.service-index > .category.-website > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: -85px 0px;
  width: 80px;
  height: 92px;
}

.service-index > .category.-marketing > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: -71px -102px;
  width: 80px;
  height: 80px;
}

.service-index > .category.-content > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: -170px 0px;
  width: 80px;
  height: 87px;
}

.service-index > .category.-apps > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: 0px 0px;
  width: 80px;
  height: 97px;
}

.service-index > .category.-server > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: -156px -102px;
  width: 80px;
  height: 80px;
}

.service-index > .category.-pchan > .icon > .hdg::before {
  background-image: url(../img/sprite.png);
  background-position: 0px -102px;
  width: 66px;
  height: 99px;
}

.service-message {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  display: -ms-flexbox;
  display: flex;
  border-width: 1px 0;
  border-style: solid;
  border-color: #ccc;
}

.service-message > .image {
  width: 44%;
  overflow: hidden;
  background: url("/service/img/service-message_img.jpg") 50% 50% no-repeat;
  background-size: cover;
}

.service-message > .body {
  width: 56%;
  position: relative;
  border-left: 1px solid #ccc;
  padding: 2.6em 6em 2.6em 2.6em;
}

.service-message > .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 40% 30% repeat;
  background-size: 200%;
  opacity: 0.3;
  z-index: -1;
}

.service-message > .body > .hdg {
  margin: 1.3em 0 0;
  font-size: 2rem;
  color: #053075;
  line-height: 1.5;
}

.service-message > .body > .hdg:first-child {
  margin-top: 0;
}

.small-01 {
  font-size: 1.2rem;
  line-height: 1.5;
}

.staff-mv {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  min-height: 435px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.staff-mv > .img img {
  width: 100%;
}

.staff-mv > .text {
  margin: 70px 47px 75px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
  width: 450px;
  box-sizing: border-box;
}

.staff-mv > .text > .catchcopy {
  margin: 0;
  color: #fff;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.4;
}

.staff-mv > .text > .info > .job {
  margin: 0 0 5px;
  padding: 0 0 8px;
  color: #fff;
  font-weight: bold;
  font-size: 2.4rem;
  border-bottom: 1px solid #fff;
}

.staff-mv > .text > .info > .year {
  margin: 0;
  color: #67ADFF;
  font-size: 1.6rem;
  font-weight: bold;
}

.table-nohead {
  position: relative;
}

.table-nohead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 40% 40% repeat;
  background-size: 100%;
  opacity: 0.3;
  z-index: -1;
}

.table-nohead > table {
  border-collapse: collapse;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: #ccc;
  width: 100%;
}

.table-nohead > table th, .table-nohead > table td {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  padding: 7px 1.4em;
  text-align: left;
}

.table-nohead > table tbody th {
  color: #053075;
  font-weight: bold;
  padding-right: 5em;
  white-space: nowrap;
}

.table-nohead > table tbody td {
  background-color: #fff;
}

.table-nohead.-works-detail {
  margin: 0 0 50px;
}

.table-nohead.-works-detail th {
  width: 6em;
  white-space: nowrap;
}

.table-nohead.-multihead tbody th {
  padding-right: 2em;
  white-space: normal;
}

.table-simple {
  line-height: 1.5;
}

.table-simple table {
  border-collapse: collapse;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: #ccc;
}

.table-simple th,
.table-simple td {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  padding: 8px 12px;
}

.table-simple thead th {
  text-align: center;
  background-color: #053075;
  color: #fff;
  white-space: nowrap;
}

.list-ordered > li > .table-simple, .wysiwyg-block.-works ol:not([class]) > li > .table-simple, .wysiwyg-block.-news ol:not([class]) > li > .table-simple {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

.top-hero {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  position: relative;
}

.top-hero > .image {
  content: '';
  display: block;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  padding-top: 57%;
  max-height: 610px;
  background-origin: 50% 20%;
  background-repeat: no-repeat;
  background-size: cover;
}

.top-hero > .copy {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: -2em;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.top-hero > .copy > .en {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 6rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.top-hero > .copy > .ja {
  margin: 0.7em 0 0;
  font-weight: bold;
  font-size: 1.6rem;
}

.top-news {
  padding: 0 0 30px;
}

.top-news > .hdgouter {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  border-color: #ccc;
  padding: 60px 0;
}

.top-news > .hdgouter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 0 30% repeat;
  background-size: 75%;
  opacity: 0.3;
  z-index: -1;
}

.top-news > .hdgouter > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #053075;
  line-height: 1.4;
  text-align: center;
  font-weight: 500;
}

.top-news > .hdgouter > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Oswald', sans-serif;
}

.top-news > .body {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
}

.top-project {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  border-top: 1px solid #ccc;
  padding-top: 75px;
  padding-bottom: 65px;
}

.top-project > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #053075;
  line-height: 1.4;
  text-align: center;
  font-weight: 500;
}

.top-project > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Oswald', sans-serif;
}

.top-project > .pgh {
  margin: 2em 0 0;
  text-align: center;
  font-size: 1.6rem;
}

.top-recruit {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  padding-top: 45px;
  padding-bottom: 65px;
  background: url("/recruit/design/img/top/top-recruit_img.jpg") 50% 0 no-repeat;
  background-size: cover;
  color: #fff;
}

.top-recruit a {
  text-decoration: none;
}

.top-recruit > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
}

.top-recruit > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.top-recruit > .pgh {
  margin: 2em 0 0;
  text-align: center;
  font-size: 1.6rem;
}

.top-recruit > .nav {
  margin-top: 50px;
  text-align: center;
}

.top-recruit > .nav > li {
  display: inline-block;
}

.top-recruit > .nav > li a {
  color: #fff;
  display: block;
  padding: 20px 45px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 1.8rem;
  min-width: 360px;
  position: relative;
  font-weight: bold;
}

.top-recruit > .nav > li a::after {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 3.4rem;
}

.top-recruit > .nav > li a:hover, .top-recruit > .nav > li a:active, .top-recruit > .nav > li a:focus {
  color: #053075;
  background-color: #fff;
}

.top-service {
  padding: 55px 0 60px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  color: #fff;
  position: relative;
}

.top-service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 20% 30% repeat;
  background-size: cover;
  z-index: -1;
}

.top-service > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
}

.top-service > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.top-service > .pgh {
  margin: 2em 0 0;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.9;
}

.top-servicelist {
  display: -ms-flexbox;
  display: flex;
  margin: 50px 0 0;
}

.top-servicelist > li {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #375689;
  box-sizing: border-box;
  padding: 0 15px;
  width: calc((100% - 2px) / 3);
  display: -ms-flexbox;
  display: flex;
}

.top-servicelist > li:last-child {
  border-width: 0;
}

.top-servicelist > li .title {
  margin: 0;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
  font-size: 2.4rem;
}

.top-servicelist > li .title::after {
  display: block;
  margin: 0 auto;
  font-size: 12rem;
  transition: -webkit-transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.top-servicelist > li .title > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.4rem;
  color: #67ADFF;
  font-family: 'Oswald', sans-serif;
}

.top-servicelist > li.feature .title::after {
  margin-top: 28px;
}

.top-servicelist > li.field .title::after {
  margin-top: 35px;
}

.top-servicelist > li.system .title::after {
  margin-top: 22px;
}

.top-servicelist > li > a {
  display: block;
  text-decoration: none;
  padding: 18px 20px 35px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}

.top-servicelist > li > a:hover, .top-servicelist > li > a:active, .top-servicelist > li > a:focus {
  background-color: rgba(1, 12, 29, 0.3);
}

.top-servicelist > li > a:hover .title::after, .top-servicelist > li > a:active .title::after, .top-servicelist > li > a:focus .title::after {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  transition-delay: 0.1s;
}

.top-worklist {
  margin-top: 70px;
  margin-right: -12px;
  margin-left: -12px;
  display: -ms-flexbox;
  display: flex;
}

.top-worklist > li {
  margin-right: 12px;
  margin-left: 12px;
  width: calc((100% - 12px * 2 * 3) / 3);
}

.top-worklist > li .image {
  overflow: hidden;
  position: relative;
}

.top-worklist > li .image::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-225deg, rgba(5, 48, 117, 0.6) 50%, rgba(27, 13, 89, 0.6));
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@supports (mix-blend-mode: multiply) {
  .top-worklist > li .image::after {
    mix-blend-mode: multiply;
  }
}

.top-worklist > li .image > span {
  display: block;
  padding-top: 61.8%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: -webkit-filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.top-worklist > li .title {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  z-index: 10;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 1.8rem;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0s;
}

.top-worklist > li .title > strong {
  display: block;
  font-size: 2.4rem;
  white-space: nowrap;
}

.top-worklist > li > a {
  display: block;
  border: 1px solid #ccc;
  position: relative;
  text-decoration: none;
}

.top-worklist > li > a:hover > .image::after, .top-worklist > li > a:active > .image::after, .top-worklist > li > a:focus > .image::after {
  opacity: 1;
}

.top-worklist > li > a:hover > .image > span, .top-worklist > li > a:active > .image > span, .top-worklist > li > a:focus > .image > span {
  -webkit-filter: blur(3px);
          filter: blur(3px);
}

.top-worklist > li > a:hover > .title, .top-worklist > li > a:active > .title, .top-worklist > li > a:focus > .title {
  opacity: 1;
  transition-delay: 0.2s;
}

.top-works {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  padding-top: 75px;
  padding-bottom: 65px;
  color: #fff;
}

.top-works > .hdg {
  margin: 0;
  font-size: 3.4rem;
  color: #053075;
  line-height: 1.4;
  text-align: center;
  font-weight: 500;
}

.top-works > .hdg > span::after {
  content: attr(data-en-text);
  display: block;
  font-size: 1.8rem;
  color: #000;
  font-family: 'Oswald', sans-serif;
}

.works-keywords {
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  margin-top: 10px;
}

.works-keywords::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.works-keywords.-enabled::before {
  display: none;
}

.works-keywords button {
  cursor: pointer;
}

.works-keywords > .hdg {
  margin: 0;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  box-sizing: border-box;
  width: 22%;
  font-size: 1.4rem;
  font-weight: bold;
  color: #053075;
  padding: 12px 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
}

.works-keywords > .hdg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url("../img/common/bg_polygon_white.png") 45% 30% repeat;
  background-size: 400%;
  opacity: 0.3;
  z-index: -1;
}

.works-keywords > .button {
  display: none;
}

.works-keywords > .button::after {
  position: absolute;
  top: 50%;
  right: 18px;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  font-size: 2.4rem;
}

.works-keywords > .button[aria-expanded='false']::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}

.works-keywords > .button[aria-expanded='true']::after {
  -webkit-transform: translateY(-50%) rotate(270deg);
          transform: translateY(-50%) rotate(270deg);
}

.works-keywords > .body {
  box-sizing: border-box;
  -ms-flex-positive: 1;
      flex-grow: 1;
  width: 78%;
  padding: 8px 18px 18px 18px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
}

.works-outline {
  padding: 35px 0 0;
}

.works-pickup {
  margin-top: -1em;
}

.works-pickup > .inner {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
  color: #fff;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
}

.works-pickup > .inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #053075 url("../img/common/bg_polygon_blue.png") 80% 15% repeat;
  background-size: cover;
  z-index: -1;
}

.works-pickup > .inner > .hdg {
  margin: 0 0 30px;
  font-size: 2rem;
  border-left: 10px solid #67ADFF;
  line-height: 1.4;
  padding: 2px 0 3px 10px;
}

.works-result {
  text-align: right !important;
  margin: 0;
  font-size: 1.8rem;
}

.works-result > strong {
  font-weight: bold;
  margin-left: 0.4em;
  margin-right: 0.2em;
  font-size: 1.5em;
  color: #053075;
}

.works-resultouter {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
}

.works-slide {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.works-slide.slick-initialized {
  visibility: visible;
  opacity: 1;
  height: auto;
}

.works-slide > .slick-arrow {
  width: auto;
  height: auto;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.works-slide > .slick-arrow::before {
  display: none;
}

.works-slide > .slick-arrow::after {
  font-size: 5rem;
}

.works-slide > .slick-arrow:hover, .works-slide > .slick-arrow:active, .works-slide > .slick-arrow:focus {
  opacity: 0.7;
}

.works-slide > .slick-arrow.slick-prev {
  left: -60px;
}

.works-slide > .slick-arrow.slick-prev::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.works-slide > .slick-arrow.slick-next {
  right: -60px;
}

.works-slide > .slick-dots li {
  margin: 0 9px;
  width: 11px;
  height: 11px;
}

.works-slide > .slick-dots button {
  width: auto;
  height: auto;
  padding: 0;
}

.works-slide > .slick-dots button::before {
  content: '';
  display: block;
  opacity: 1;
  width: 9px;
  height: 9px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.works-slide > .slick-dots button:hover::before, .works-slide > .slick-dots button:active::before, .works-slide > .slick-dots button:focus::before {
  opacity: 1;
  background-color: #fff;
}

.works-slide > .slick-dots .slick-active button::before {
  opacity: 1;
  background-color: #fff;
}

.workslide-content .o {
  display: -ms-flexbox;
  display: flex;
}

.workslide-content .image {
  width: 40%;
}

.workslide-content .image > p {
  margin: 0;
}

.workslide-content .body {
  margin-left: 40px;
  width: calc(100% - (40% + 40px));
}

.workslide-content .body > .hdg {
  margin: 0;
  font-size: 3.2rem;
}

.workslide-content .body > .client {
  margin: 0;
  font-size: 1.8rem;
  color: #67ADFF;
}

.workslide-content .body > .client > span {
  font-size: 0.8em;
  margin-left: 0.5em;
}

.workslide-content .body > .pgh {
  margin-top: 1.3em;
}

.workslide-content .body > .nav {
  margin: 3em 0 1.5em;
  text-align: center;
}

.workslide-content .body > .nav > a {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 10px 60px 12px;
  position: relative;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.workslide-content .body > .nav > a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 2.4rem;
}

.workslide-content .body > .nav > a:hover, .workslide-content .body > .nav > a:active, .workslide-content .body > .nav > a:focus {
  background-color: #fff;
  color: #053075;
}

body#contact.index .hbspt-form {
  max-width: 500px;
  margin: 0 auto;
}

body#contact.index .section-contact,
body#contact.index .footer-sitemap,
body#contact.index .footer-portal {
  display: none;
}

body#company .page-title + .table-simple table {
  width: 100%;
}

body#privacy .table-nohead.continuity {
  margin-top: 1.7em;
}

body#privacy .table-nohead.continuity table th {
  width: 40%;
}

body#privacy .table-nohead.continuity + .table-nohead.continuity {
  margin-top: 2.5em;
}

._left {
  text-align: left !important;
}

._center {
  text-align: center !important;
}

._right {
  text-align: right !important;
}

._top {
  vertical-align: top !important;
}

._middle {
  vertical-align: middle !important;
}

._bottom {
  vertical-align: bottom !important;
}

._clear:after {
  content: "";
  display: block;
  clear: both;
}

button#hs-hud-cookie-settings {
  position: fixed !important;
  bottom: 0px;
  right: 10px;
  color: white;
  background-color: #425b76;
  padding: 5px 15px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-width: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

button#hs-hud-cookie-settings:hover {
  opacity: .7;
  cursor: pointer;
}

._fa {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._fz10 {
  font-size: 1rem;
}

._fz11 {
  font-size: 1.1rem;
}

._fz12 {
  font-size: 1.2rem;
}

._fz13 {
  font-size: 1.3rem;
}

._fz14 {
  font-size: 1.4rem;
}

._fz15 {
  font-size: 1.5rem;
}

._fz16 {
  font-size: 1.6rem;
}

._fz18 {
  font-size: 1.8rem;
}

._fz20 {
  font-size: 2rem;
}

._fz22 {
  font-size: 2.2rem;
}

._fz24 {
  font-size: 2.4rem;
}

._fz26 {
  font-size: 2.6rem;
}

._fz28 {
  font-size: 2.8rem;
}

._fz30 {
  font-size: 3rem;
}

._hide, .table-nohead > table caption {
  font-size: 0;
  height: 0;
  width: 0;
  visibility: 0;
  overflow: 0;
}

@font-face {
  font-family: "Ion-Icons";
  src: url("../fonts/ionicons.eot?v=3.0.0-alpha.3");
  src: url("../fonts/ionicons.eot?v=3.0.0-alpha.3#iefix") format("embedded-opentype"), url("../fonts/ionicons.woff2?v=3.0.0-alpha.3") format("woff2"), url("../fonts/ionicons.woff?v=3.0.0-alpha.3") format("woff"), url("../fonts/ionicons.ttf?v=3.0.0-alpha.3") format("truetype"), url("../fonts/ionicons.svg?v=3.0.0-alpha.3#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

.button-clear > button::before, .cards-image > li a.item > .body > .title::before, .drawer-link > li > a::after, .footer-portal .link > li a::before, .footer-sitemap > .nav > li > ul > li::before, .go-pageheader a::before, .inline-link::before, .link-blank::after, .list-link > li a[target="_blank"]::after, .pgh-normal a[target="_blank"]::after, p a[target="_blank"]::after, .link-pdf:not([class~="_imglink"])::after, .list-link > li a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after, .list-link > li a[target="_blank"][href$=".doc"]:not([class~="_imglink"])::after, .pgh-normal a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after, p a[target="_blank"][href$=".pdf"]:not([class~="_imglink"])::after, .list-bullet > li::before, .wysiwyg-block.-works ul:not([class]) > li::before, .wysiwyg-block.-news ul:not([class]) > li::before, .list-desc > dt::before, .list-link > li::before, .nav-breadcrumb > .path > .item::after, .nav-service .grid > .link > li::before, .selected-keywords > .keywords > li > button::before, .selected-keywords > .deselectall > button::before, .service-index > .category > .link li::before, ._ion {
  font-family: 'Ion-Icons';
  font-weight: normal;
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._mt0, ._mv0 {
  margin-top: 0 !important;
}

._mb0, ._mv0 {
  margin-bottom: 0 !important;
}

._mr0, ._mh0 {
  margin-right: 0 !important;
}

._ml0, ._mh0 {
  margin-left: 0 !important;
}

._mt5, ._mv5 {
  margin-top: 5px !important;
}

._mb5, ._mv5 {
  margin-bottom: 5px !important;
}

._mr5, ._mh5 {
  margin-right: 5px !important;
}

._ml5, ._mh5 {
  margin-left: 5px !important;
}

._mt10, ._mv10 {
  margin-top: 10px !important;
}

._mb10, ._mv10 {
  margin-bottom: 10px !important;
}

._mr10, ._mh10 {
  margin-right: 10px !important;
}

._ml10, ._mh10 {
  margin-left: 10px !important;
}

._mt15, ._mv15 {
  margin-top: 15px !important;
}

._mb15, ._mv15 {
  margin-bottom: 15px !important;
}

._mr15, ._mh15 {
  margin-right: 15px !important;
}

._ml15, ._mh15 {
  margin-left: 15px !important;
}

._mt20, ._mv20 {
  margin-top: 20px !important;
}

._mb20, ._mv20 {
  margin-bottom: 20px !important;
}

._mr20, ._mh20 {
  margin-right: 20px !important;
}

._ml20, ._mh20 {
  margin-left: 20px !important;
}

._mt25, ._mv25 {
  margin-top: 25px !important;
}

._mb25, ._mv25 {
  margin-bottom: 25px !important;
}

._mr25, ._mh25 {
  margin-right: 25px !important;
}

._ml25, ._mh25 {
  margin-left: 25px !important;
}

._mt30, ._mv30 {
  margin-top: 30px !important;
}

._mb30, ._mv30 {
  margin-bottom: 30px !important;
}

._mr30, ._mh30 {
  margin-right: 30px !important;
}

._ml30, ._mh30 {
  margin-left: 30px !important;
}

._mt35, ._mv35 {
  margin-top: 35px !important;
}

._mb35, ._mv35 {
  margin-bottom: 35px !important;
}

._mr35, ._mh35 {
  margin-right: 35px !important;
}

._ml35, ._mh35 {
  margin-left: 35px !important;
}

._mt40, ._mv40 {
  margin-top: 40px !important;
}

._mb40, ._mv40 {
  margin-bottom: 40px !important;
}

._mr40, ._mh40 {
  margin-right: 40px !important;
}

._ml40, ._mh40 {
  margin-left: 40px !important;
}

._mt45, ._mv45 {
  margin-top: 45px !important;
}

._mb45, ._mv45 {
  margin-bottom: 45px !important;
}

._mr45, ._mh45 {
  margin-right: 45px !important;
}

._ml45, ._mh45 {
  margin-left: 45px !important;
}

._mt50, ._mv50 {
  margin-top: 50px !important;
}

._mb50, ._mv50 {
  margin-bottom: 50px !important;
}

._mr50, ._mh50 {
  margin-right: 50px !important;
}

._ml50, ._mh50 {
  margin-left: 50px !important;
}

._mt55, ._mv55 {
  margin-top: 55px !important;
}

._mb55, ._mv55 {
  margin-bottom: 55px !important;
}

._mr55, ._mh55 {
  margin-right: 55px !important;
}

._ml55, ._mh55 {
  margin-left: 55px !important;
}

._mt60, ._mv60 {
  margin-top: 60px !important;
}

._mb60, ._mv60 {
  margin-bottom: 60px !important;
}

._mr60, ._mh60 {
  margin-right: 60px !important;
}

._ml60, ._mh60 {
  margin-left: 60px !important;
}

._mt65, ._mv65 {
  margin-top: 65px !important;
}

._mb65, ._mv65 {
  margin-bottom: 65px !important;
}

._mr65, ._mh65 {
  margin-right: 65px !important;
}

._ml65, ._mh65 {
  margin-left: 65px !important;
}

._mt70, ._mv70 {
  margin-top: 70px !important;
}

._mb70, ._mv70 {
  margin-bottom: 70px !important;
}

._mr70, ._mh70 {
  margin-right: 70px !important;
}

._ml70, ._mh70 {
  margin-left: 70px !important;
}

._mt75, ._mv75 {
  margin-top: 75px !important;
}

._mb75, ._mv75 {
  margin-bottom: 75px !important;
}

._mr75, ._mh75 {
  margin-right: 75px !important;
}

._ml75, ._mh75 {
  margin-left: 75px !important;
}

._mt80, ._mv80 {
  margin-top: 80px !important;
}

._mb80, ._mv80 {
  margin-bottom: 80px !important;
}

._mr80, ._mh80 {
  margin-right: 80px !important;
}

._ml80, ._mh80 {
  margin-left: 80px !important;
}

._mt85, ._mv85 {
  margin-top: 85px !important;
}

._mb85, ._mv85 {
  margin-bottom: 85px !important;
}

._mr85, ._mh85 {
  margin-right: 85px !important;
}

._ml85, ._mh85 {
  margin-left: 85px !important;
}

._mt90, ._mv90 {
  margin-top: 90px !important;
}

._mb90, ._mv90 {
  margin-bottom: 90px !important;
}

._mr90, ._mh90 {
  margin-right: 90px !important;
}

._ml90, ._mh90 {
  margin-left: 90px !important;
}

._mt95, ._mv95 {
  margin-top: 95px !important;
}

._mb95, ._mv95 {
  margin-bottom: 95px !important;
}

._mr95, ._mh95 {
  margin-right: 95px !important;
}

._ml95, ._mh95 {
  margin-left: 95px !important;
}

._mt100, ._mv100 {
  margin-top: 100px !important;
}

._mb100, ._mv100 {
  margin-bottom: 100px !important;
}

._mr100, ._mh100 {
  margin-right: 100px !important;
}

._ml100, ._mh100 {
  margin-left: 100px !important;
}

.list-bullet, .wysiwyg-block.-works ul:not([class]), .wysiwyg-block.-news ul:not([class]), .list-desc, .list-link, .list-ordered, .wysiwyg-block.-works ol:not([class]), .wysiwyg-block.-news ol:not([class]), .media-one, .media-parallel, .panel-header, .panel-note, .pgh-normal, p, .table-nohead, ._mt {
  margin: 1.1em 0 0;
}

._nowrap {
  white-space: nowrap !important;
}

._pt0, ._pv0 {
  paddgin-top: 0 !important;
}

._pb0, ._pv0 {
  padding-bottom: 0 !important;
}

._pr0, ._ph0 {
  padding-right: 0 !important;
}

._pl0, ._ph0 {
  padding-left: 0 !important;
}

._pt5, ._pv5 {
  padding-top: 5px !important;
}

._pb5, ._pv5 {
  padding-bottom: 5px !important;
}

._pr5, ._ph5 {
  padding-right: 5px !important;
}

._pl5, ._ph5 {
  padding-left: 5px !important;
}

._pt10, ._pv10 {
  padding-top: 10px !important;
}

._pb10, ._pv10 {
  padding-bottom: 10px !important;
}

._pr10, ._ph10 {
  padding-right: 10px !important;
}

._pl10, ._ph10 {
  padding-left: 10px !important;
}

._pt15, ._pv15 {
  padding-top: 15px !important;
}

._pb15, ._pv15 {
  padding-bottom: 15px !important;
}

._pr15, ._ph15 {
  padding-right: 15px !important;
}

._pl15, ._ph15 {
  padding-left: 15px !important;
}

._pt20, ._pv20 {
  padding-top: 20px !important;
}

._pb20, ._pv20 {
  padding-bottom: 20px !important;
}

._pr20, ._ph20 {
  padding-right: 20px !important;
}

._pl20, ._ph20 {
  padding-left: 20px !important;
}

._pt25, ._pv25 {
  padding-top: 25px !important;
}

._pb25, ._pv25 {
  padding-bottom: 25px !important;
}

._pr25, ._ph25 {
  padding-right: 25px !important;
}

._pl25, ._ph25 {
  padding-left: 25px !important;
}

._pt30, ._pv30 {
  padding-top: 30px !important;
}

._pb30, ._pv30 {
  padding-bottom: 30px !important;
}

._pr30, ._ph30 {
  padding-right: 30px !important;
}

._pl30, ._ph30 {
  padding-left: 30px !important;
}

._pt35, ._pv35 {
  padding-top: 35px !important;
}

._pb35, ._pv35 {
  padding-bottom: 35px !important;
}

._pr35, ._ph35 {
  padding-right: 35px !important;
}

._pl35, ._ph35 {
  padding-left: 35px !important;
}

._pt40, ._pv40 {
  padding-top: 40px !important;
}

._pb40, ._pv40 {
  padding-bottom: 40px !important;
}

._pr40, ._ph40 {
  padding-right: 40px !important;
}

._pl40, ._ph40 {
  padding-left: 40px !important;
}

._pt45, ._pv45 {
  padding-top: 45px !important;
}

._pb45, ._pv45 {
  padding-bottom: 45px !important;
}

._pr45, ._ph45 {
  padding-right: 45px !important;
}

._pl45, ._ph45 {
  padding-left: 45px !important;
}

._pt50, ._pv50 {
  padding-top: 50px !important;
}

._pb50, ._pv50 {
  padding-bottom: 50px !important;
}

._pr50, ._ph50 {
  padding-right: 50px !important;
}

._pl50, ._ph50 {
  padding-left: 50px !important;
}

._nosave {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  touch-callout: none;
}

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px){
  html{
    font-family: -apple-system, "BlinkMacSystemFont", "Lucida Grande", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  }
  body{
    line-height: 1.7;
  }
  #header{
    display: block;
  }
  #header > .ci{
    margin: 15px 0;
  }
  #header > .ci a{
    display: inline-block;
  }
  #header > .ci img{
    width: 95px;
  }
  #header > .global{
    display: none;
  }
  #header > .spsns{
    display: block;
  }
  #hamburger{
    display: block;
  }
  .anchor-link{
    margin-right: -15px;
    margin-left: -15px;
  }
  .anchor-link > li{
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
    width: calc(100% / 3);
    border-bottom-width: 7px;
  }
  .anchor-link > li > a{
    padding: 0.6em 0.2em 0.7em;
    font-size: 1.3rem;
  }
  .anchor-link > li > a::before{
    background-position: 0 10%;
    background-size: 400%;
  }
  .anchor-link > li > a > span::after{
    font-size: 1.1rem;
  }
  #service.index #s02 .anchor-link,
  #service.index #s03 .anchor-link{
    margin-top: 0;
  }
  .button-clear{
    margin: 0.25em 0 0;
  }
  .card-staff{
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 0 55px;
  }
  .card-staff > .text{
    margin: 10px 0 0;
    width: auto;
  }
  .card-staff > .text > .body{
    top: 0;
  }
  .card-staff > .text > .body > .hdg{
    font-size: 1.8rem;
    padding: 0 0 5px;
  }
  .card-staff > .text > .body > .year{
    margin: 3px 0 0;
    font-size: 1.4rem;
  }
  .card-staff > .text > .body > .catchcopy{
    margin: 2px 0 0;
  }
  .card-staff > .text > .link{
    margin: 8px 0 0;
  }
  .card-staff > .text > .link > .button{
    margin: 0;
  }
  .card-staff > .text > .link > .button > a{
    display: block;
  }
  .card-staff > .image p{
    text-align: center;
  }
  .cards-desc{
    display: block;
  }
  .cards-desc > li{
    margin-bottom: 20px;
  }
  .cards-desc > li > .item > .body > .hdg{
    font-size: 1.8rem;
    padding: 0.4em 0;
  }
  .cards-desc > li > .item > .body > p{
    margin-top: 0.8em;
  }
  .cards-desc.-col2 > li{
    width: auto;
  }
  .cards-desc.-col3 > li{
    width: auto;
  }
  .cards-desc.-col4 > li{
    width: auto;
  }
  .cards-image{
    margin-right: 0;
    margin-left: 0;
    display: block;
  }
  .cards-image > li{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 15px;
  }
  .cards-image > li > .item > .body::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .cards-image > li > .item > .body .title{
    font-size: 1.4rem;
  }
  .cards-image.-col2 > li{
    width: auto;
  }
  .cards-image.-col3 > li{
    width: auto;
  }
  .cards-image.-col4 > li{
    width: auto;
  }
  .view-wide .cards-image{
    margin-right: 0;
    margin-left: 0;
  }
  .category-mv{
    height: 120px;
  }
  .category-mv > .hdg{
    font-size: 2.6rem;
  }
  .category-mv > .hdg > span::after{
    font-size: 1.4rem;
  }
  #notfound .category-mv .hdg{
    font-size: 1.6rem;
    white-space: nowrap;
  }
  #notfound .category-mv .hdg > span::after{
    font-size: 1.1rem;
  }
  .company-message{
    background: url("/company/img/company-message_bg_sp.png") 0 0 no-repeat;
    min-height: auto;
    background-size: 100% auto;
    padding: 0 15px;
    margin: 2em -15px 5em;
  }
  .company-message .content1 .image{
    padding: 0;
  }
  .company-message .content1 .image img{
    max-width: 76vw;
  }
  .company-message .content1 .text{
    padding: 1em 0 0;
  }
  .company-message .content1 .text p{
    font-size: 6vw;
  }
  .company-message .content2{
    padding: 8vw 0 0 0;
    display: block;
  }
  .company-message .content2 .image{
    text-align: right;
  }
  .company-message .content2 .image img{
    max-width: 40vw;
  }
  .company-message .content2 .text{
    padding: 1.4em 0 0;
  }
  .company-message .content2 .text p{
    font-size: 4.2vw;
    line-height: 1.7;
  }
  .company-message .content2 .text p br{
    display: none;
  }
  .company-message .content3{
    padding: 12vw 0 0;
    display: block;
  }
  .company-message .content3 .image{
    padding: 0;
  }
  .company-message .content3 .image img{
    max-width: 50vw;
  }
  .company-message .content3 .text{
    padding: 2em 0 0;
  }
  .company-message .content3 .text p{
    font-size: 4.2vw;
    line-height: 1.7;
  }
  .company-message .content4{
    padding: 8vw 0 0;
  }
  .company-message .content4 .image{
    padding: 0;
  }
  .company-message .content4 .image img{
    max-width: 40vw;
  }
  .company-message .content4 .text{
    padding: 3em 0 0;
    text-align: left;
  }
  .company-message .content4 .text p{
    font-size: 5vw;
    line-height: 1.7;
  }
  .company-message .content4 .text p br{
    display: none;
  }
  .contact-form .elemcontent::before{
    background-position: 0 10%;
    background-size: 180%;
  }
  .contact-form .elemrow{
    display: block;
  }
  .contact-form .elemrow .elemhead{
    width: auto;
    padding: 10px 15px;
  }
  .contact-form .elemrow .elembody{
    border-left: 0;
    border-top: 1px solid #ccc;
    padding: 22px 15px;
    overflow: auto;
  }
  .contact-form .elemrow .elembody input[name="mauticform[hui_she_ming]"],
  .contact-form .elemrow .elembody input[name="mauticform[bu_shu_ming]"],
  .contact-form .elemrow .elembody input[name="mauticform[ming_zi]"],
  .contact-form .elemrow .elembody input[name="mauticform[ming_qian]"],
  .contact-form .elemrow .elembody input[name="mauticform[dian_hua_fan_hao]"]{
    width: 100%;
  }
  .contact-form .elemsubmit button[type="submit"]{
    display: block;
    min-width: 0;
    width: 100%;
  }
  .contact-form .elemsubmit button[type="submit"]::after{
    font-size: 2.6rem;
  }
  .contact-form .note{
    text-align: left;
  }
  .faq-content{
    margin-top: 50px;
  }
  .faq-content .faq-category + .faq-category{
    margin-top: 55px;
  }
  .faq-content .faq-category + .faq-category .sub-tit{
    padding-top: 0;
  }
  .faq-content .faq-category .sub-tit{
    padding-top: 0;
    font-size: 2.6rem;
  }
  .faq-content .faq-category__box{
    margin-top: 40px;
  }
  .faq-content .faq-category__accordion .cat{
    padding-top: 28px;
    padding-left: 30px;
    padding-right: 50px;
  }
  .faq-content .faq-category__accordion .cat span{
    font-size: 1.6rem;
  }
  .faq-content .faq-category__accordion .cat span::before{
    font-size: 1.6rem;
    left: -30px;
  }
  .faq-content .faq-category__accordion .text-box{
    padding-left: 30px;
    font-size: 1.4rem;
  }
  .faq-content .faq-category__accordion .text-box .text::before{
    margin-bottom: 30px;
    margin-left: -30px;
    font-size: 1.8rem;
  }
  .faq-content .faq-category__accordion .text-box .text p + p{
    margin-top: 20px;
  }
  .faq-content .faq-category__accordion .text-box .related-links{
    margin: 0 0 40px -30px;
  }
  .faq-section{
    display: block;
    margin-top: 35px;
  }
  .faq-side{
    max-width: none;
    position: static;
  }
  .faq-side__list.fixed{
    position: static;
  }
  .faq-side__list.stopped{
    position: static;
    width: auto;
  }
  .faq-side__list-item .link::after{
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #053075;
    border-right: 1px solid #053075;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .faq-side__list-item .link.active{
    color: #000;
  }
  .fig-servicelist{
    margin-right: -15px;
    margin-left: -15px;
  }
  .fig-servicelist > li{
    width: calc((100% - 1px) / 2);
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 15px 5px 15px 43px;
  }
  .fig-servicelist > li::before{
    left: 12px !important;
    top: 50% !important;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5) translateY(-50%);
    transform: scale(0.5) translateY(-50%);
  }
  .fig-servicelist > li.website, .fig-servicelist > li.content, .fig-servicelist > li.server{
    border-right: 1px solid #ccc;
  }
  .fig-servicelist > li.website, .fig-servicelist > li.marketing, .fig-servicelist > li.content, .fig-servicelist > li.apps{
    border-bottom: 1px solid #ccc;
  }
  .footer-banner{
    padding: 13px 0;
  }
  .footer-banner > .item{
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
  }
  .footer-banner > .item > li{
    margin: 6px 0;
  }
  .footer-banner > .item .banner{
    top: 0;
  }
  .footer-isms{
    display: block;
  }
  .footer-isms > a{
    display: block;
    padding: 15px;
  }
  .footer-isms > a::after{
    display: none;
  }
  .footer-isms > a > .banner{
    text-align: center;
  }
  .footer-isms > a > .text{
    margin: 15px 0 0;
  }
  .footer-isms > a > .text p{
    position: relative;
    padding-right: 25px;
  }
  .footer-isms > a > .text p br{
    display: none;
  }
  .footer-portal{
    padding-top: 17px;
    padding-bottom: 20px;
  }
  .footer-portal .hdg{
    font-size: 1.8rem;
  }
  .footer-portal .link{
    font-size: 1.2rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: left;
    margin-top: 10px;
    margin-right: -0.5em;
    margin-left: -0.5em;
  }
  .footer-portal .link > li{
    margin: 0 0.5em 0.8em;
    width: calc((100% - 0.5em * 4) / 2);
  }
  .footer-sitemap{
    display: block;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e2e2e2;
  }
  .footer-sitemap::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .footer-sitemap > .logo{
    text-align: center;
  }
  .footer-sitemap > .nav{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
    margin-top: 20px;
    margin-right: -15px;
    margin-left: -15px;
    border-top: 2px solid #e2e2e2;
    background-color: #fff;
  }
  .footer-sitemap > .nav > li{
    width: calc((100% - 2px) / 2);
    border-bottom: 2px solid #e2e2e2;
    padding: 0;
  }
  .footer-sitemap > .nav > li:nth-of-type(2n+1){
    border-right: 2px solid #e2e2e2;
  }
  .footer-sitemap > .nav > li > a{
    display: block;
    font-size: 1.4rem;
    text-align: center;
    padding: 15px 19px;
  }
  .footer-sitemap > .nav > li > a:hover, .footer-sitemap > .nav > li > a:active, .footer-sitemap > .nav > li > a:focus{
    text-decoration: none;
    background-color: #e2e2e2;
  }
  .footer-sitemap > .nav > li > ul{
    display: none;
  }
  .footer-utility{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer-utility .link{
    text-align: left;
  }
  .footer-utility .link > li{
    margin: 0 1.8em 0.5em 0;
    white-space: nowrap;
  }
  .footer-utility .address{
    text-align: left;
  }
  .footer-utility .copyright{
    margin: 10px 0 0;
    font-size: 1rem;
  }
  .go-pageheader{
    display: none;
  }
  .hdg-center{
    font-size: 2rem;
  }
  .hdg-lv2, .wysiwyg-block.-works h2:not([class]), .wysiwyg-block.-news h1:not([class]){
    font-size: 2rem;
  }
  .hdg-lv2b{
    font-size: 2.6rem;
  }
  .hdg-lv2b > span::after{
    font-size: 1.4rem;
  }
  .hdg-lv3, .wysiwyg-block.-works h3:not([class]), .wysiwyg-block.-news h2:not([class]){
    margin: 1.6em 0 0;
    font-size: 1.6rem;
  }
  .index-staff{
    display: block;
    margin: 10px 10px 0;
  }
  .index-staff .block{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    display: block;
  }
  .index-staff .block > .item > .body::before{
    background-position: 0 10%;
  }
  .index-staff .block > .item > .body .catchcopy{
    font-size: 1.6rem;
    display: block;
  }
  .index-staff .block > .item > .body .info > span{
    display: block;
    padding-right: 0;
  }
  .index-staff.-col2 .block{
    width: auto;
  }
  .index-staff.-col3 .block{
    width: auto;
  }
  .index-staff.-col4 .block{
    width: auto;
  }
  .index-staff{
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .inline-link{
    display: block;
    margin-left: 0;
  }
  .layout-cols{
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  .layout-cols > .col{
    margin-top: 18px;
    margin-right: 0;
    margin-left: 0;
    width: auto;
  }
  .layout-cols.-col2 > .col{
    width: auto;
  }
  .layout-cols.-col3 > .col{
    width: auto;
  }
  .layout-cols.-col4 > .col{
    width: auto;
  }
  .hdg-lv4 + .layout-cols.-panels{
    margin-top: -2px;
  }
  .layout-cols.-breakoutprim{
    margin-right: 0;
    margin-left: 0;
  }
  .layout-cols.-inpanel-image > .col ~ .col{
    margin-top: 18px;
  }
  .lead-text{
    line-height: 1.6;
    text-align: left !important;
    font-size: 1.5rem;
  }
  .lead-text br{
    display: none;
  }
  .list-contact{
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  .list-contact > li{
    margin-right: 0;
    margin-left: 0;
    width: auto;
    margin-top: 15px;
  }
  .list-contact > li.mail a{
    display: block;
  }
  .list-contact > li.mail .left .hdg{
    text-align: center;
  }
  .list-contact > li.mail .right{
    font-size: 2.4rem;
    margin-left: 0;
  }
  .list-contact > li.mail .right .val{
    text-align: center;
  }
  .list-contact > li.tel a{
    display: block;
  }
  .list-contact > li.tel .left .hdg,
  .list-contact > li.tel .left .time{
    text-align: center;
  }
  .list-contact > li.tel .right{
    font-size: 2.4rem;
    margin-left: 0;
  }
  .list-contact > li.tel .right .num{
    text-align: center;
  }
  .list-contact.-col1 > li > a{
    width: auto;
  }
  .list-flow > li > .body .hdg{
    font-size: 1.6rem;
  }
  .list-flow > li > .body > .rowdiv{
    display: block;
  }
  .list-flow > li > .body > .rowdiv > div + div{
    margin-top: 15px;
  }
  .list-keywords > li > button:hover, .list-keywords > li > button:active, .list-keywords > li > button:focus{
    background: #0e3192;
  }
  .list-news{
    margin: 1.5em 0 0;
  }
  .list-news > li header{
    display: block;
    background-color: #f6f6f6;
  }
  .list-news > li .date{
    width: 100%;
    padding: 0.1em 1em 0.1em 1em;
  }
  .list-news > li .tag{
    padding: 0;
  }
  .list-news > li .tag > .t{
    padding: 0.1em 1em;
  }
  .list-news > li .title{
    display: block;
    margin: 0.5em 1em 0;
    line-height: 1.6;
  }
  .list-works{
    margin: 2em 0 0;
    display: block;
  }
  .list-works > li{
    margin-right: 0;
    margin-left: 0;
    width: auto;
    display: block;
  }
  .list-works > li::before{
    background-position: 0 10%;
  }
  .list-works > li .image > span{
    padding-top: 60%;
  }
  .media-one .caption ._strong{
    margin-top: 10px;
    font-size: 1.8rem;
  }
  .media-parallel{
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
  }
  .media-parallel > .body{
    -ms-flex-order: 0 !important;
    order: 0 !important;
    margin-top: 1.7em;
  }
  .media-parallel > .media{
    -ms-flex-order: 0 !important;
    order: 0 !important;
    margin-top: 1.7em;
    width: 100% !important;
  }
  .media-parallel.-medialeft > .body{
    margin-left: 0;
  }
  .media-parallel.-mediaright > .body{
    margin-right: 0;
  }
  .panel-note > .panelbody > .media-parallel > :first-child{
    margin-top: 0 !important;
  }
  .list-flow > li > .body > .media-parallel > :first-child{
    margin-top: 0 !important;
  }
  .nav-breadcrumb{
    margin: 0;
    padding: 0.7em 0;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    background-color: #f6f6f6;
    font-size: 1.2rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-breadcrumb > .path{
    white-space: nowrap;
  }
  .nav-breadcrumb > .path > .item::after{
    font-size: 1.4rem;
  }
  .nav-button > li{
    display: block;
  }
  .nav-button a{
    min-width: 0;
    padding: 15px 30px;
    font-size: 1.4rem;
  }
  .nav-button a::after{
    font-size: 2.6rem;
  }
  .nav-button.-col2, .nav-button.-col3, .nav-button.-col4{
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  .nav-button.-col2 > li, .nav-button.-col3 > li, .nav-button.-col4 > li{
    margin: 20px 0 0;
  }
  .nav-button.-col2 > li.-big > a, .nav-button.-col3 > li.-big > a, .nav-button.-col4 > li.-big > a{
    font-size: 2.2rem;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .nav-button.-col2{
    margin-bottom: 0;
  }
  .nav-button.-col2 li{
    margin-bottom: 0;
  }
  .nav-button.-col2 > li{
    width: auto;
  }
  .nav-button.-col3 > li{
    width: auto;
  }
  .nav-button.-col4 > li{
    width: auto;
  }
  .panel-header .nav-button.-inpanelheader > li{
    margin-top: 10px;
  }
  .panel-header .nav-button.-inpanelheader.-col2 > li{
    width: auto;
  }
  .company-message .nav-button{
    margin-top: 16px;
    margin-right: 5vw;
    margin-left: 5vw;
  }
  .nav-local{
    margin: 0.7em -5px 0;
  }
  .nav-local > li{
    margin-right: 5px;
    margin-left: 5px;
  }
  .nav-local > li > a{
    font-size: 1.3rem;
    padding: 0.8em 1.5em 0.8em 0.8em;
  }
  .nav-local > li > a::after{
    right: 5px;
    font-size: 2rem;
  }
  .nav-local.-col2 > li{
    width: calc((100% - 5px * 2 * 2) / 2);
  }
  .nav-local.-col3 > li{
    width: calc((100% - 5px * 2 * 3) / 3);
  }
  .nav-local.-col4 > li{
    width: calc((100% - 5px * 2 * 4) / 4);
  }
  .nav-recruit{
    display: block;
    margin: 5em -15px 0;
  }
  .nav-recruit > li{
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #fff;
  }
  .nav-recruit > li > a > .image > span{
    padding-top: 260px;
  }
  .nav-recruit > li > a > .body > .title{
    font-size: 2.6rem;
    padding: 2em 0;
  }
  .nav-recruit > li > a > .body > .title > span::after{
    font-size: 1.4rem;
    margin: 2px 0 0;
  }
  .nav-recruit > li.-disabled::before{
    font-size: 3.2rem;
  }
  .nav-service{
    margin: 0 -15px -80px;
  }
  .nav-service .gridcontainer{
    display: block;
  }
  .nav-service .grid{
    width: auto;
    border-right: 0;
    padding: 0;
  }
  .nav-service .grid > .hdg{
    margin: 0;
    font-size: 1.8rem;
    padding: 20px 40px 20px 63px;
    cursor: pointer;
  }
  .nav-service .grid > .hdg::before{
    left: 15px !important;
    top: 50% !important;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.8) translateY(-50%);
    transform: scale(0.8) translateY(-50%);
  }
  .nav-service .grid > .link{
    display: none;
    padding: 10px 18px 20px;
  }
  .page-mv.-works{
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-bottom: 45px;
  }
  .page-mv.-works::before{
    background-position: 0 10%;
  }
  .page-mv.-works > .hdg{
    font-size: 2.4rem;
    text-align: left;
    margin: 0 0 40px;
  }
  .page-mv.-works .image.-wide{
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 40px;
  }
  .page-mv.-works .image.-wide img{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .page-mv.-works .image.-narrow{
    position: static;
    color: #fff;
    text-align: center;
  }
  .page-mv.-works .image.-narrow img{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .page-mv.-works .image.-narrow .caption{
    text-align: center;
  }
  .page-title{
    font-size: 2.8rem;
  }
  .panel-header > .hdg{
    margin: 0 0 0.6em;
    font-size: 1.4rem;
  }
  .panel-note::before{
    background-position: 0 10%;
    background-size: 250%;
  }
  .panel-note > .hdg{
    margin: 0 0 0.6em;
    font-size: 1.4rem;
  }
  .panel-schedule{
    padding: 20px;
  }
  .panel-schedule::before{
    background-position: 0 10%;
  }
  .panel-schedule > .hdg{
    font-size: 1.8rem;
  }
  .panel-schedule > .schedule > li{
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .panel-schedule > .schedule > li > .time{
    width: auto;
    font-size: 1.4rem;
  }
  .panel-schedule > .schedule > li > .cont{
    margin: 7px 0 0;
  }
  .hdg-lv3 + .pgh-normal, .wysiwyg-block.-works h3:not([class]) + .pgh-normal, .wysiwyg-block.-news h2:not([class]) + .pgh-normal, .hdg-lv3 + p, .wysiwyg-block.-works h3:not([class]) + p, .wysiwyg-block.-news h2:not([class]) + p{
    margin-top: 1em;
  }
  .project-header{
    margin-right: 0;
    margin-left: 0;
  }
  .project-header > .inner{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .project-header > .inner::before{
    background-position: 40% 10%;
    background-size: 200%;
  }
  .project-header > .inner > .hdg{
    font-size: 2rem;
  }
  .project-header > .inner > .client{
    font-size: 1.4rem;
  }
  .project-header > .inner > .client > span:not([class]){
    font-size: inherit;
    margin-left: 0.3em;
  }
  .project-list{
    margin: 0;
  }
  .project-list > .project{
    display: block;
  }
  .project-list > .project > .image{
    width: 100%;
  }
  .project-list > .project > .image > span{
    width: auto;
    height: auto;
    padding-top: 60%;
  }
  .project-list > .project > .body{
    padding: 15px;
  }
  .project-list > .project > .body > .hdg{
    font-size: 1.8rem;
  }
  .project-list > .project > .body > .client{
    font-size: 1.4rem;
  }
  .project-list > .project > .body > .nav > a{
    display: block;
  }
  .project-list > .project > .body > .nav > a::after{
    font-size: 2.6rem;
  }
  .project-mv > .inner{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
  .project-pickup{
    margin-right: 0;
    margin-left: 0;
  }
  .project-pickup > .inner{
    margin: 0;
    padding-right: 40px !important;
    padding-left: 40px !important;
    padding-top: 25px;
    padding-bottom: 20px;
  }
  .project-slide > .slick-arrow::after{
    font-size: 3rem;
  }
  .project-slide > .slick-arrow.slick-prev{
    left: -35px;
  }
  .project-slide > .slick-arrow.slick-next{
    right: -35px;
  }
  .projectslide-content .o{
    display: block;
    padding: 0 12px;
  }
  .projectslide-content .image{
    width: auto;
    margin: 0 0 15px;
  }
  .projectslide-content .body{
    width: auto;
    margin-left: 0;
  }
  .projectslide-content .body > .hdg{
    font-size: 2.2rem;
    line-height: 1.4;
  }
  .projectslide-content .body > .client{
    font-size: 1.4rem;
    margin: 5px 0 0;
  }
  .projectslide-content .body > .client > span{
    font-size: inherit;
    margin-left: 0.3em;
  }
  .projectslide-content .body > .nav > a{
    display: block;
  }
  .projectslide-content .body > .nav > a::after{
    font-size: 2.6rem;
  }
  .section-contact{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .section-contact::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .section-contact > .hdg{
    font-size: 2.6rem;
  }
  .section-contact > .hdg > span::after{
    font-size: 1.4rem;
  }
  .section-contact > .pgh{
    margin: 1.6em 0 0;
    font-size: 1.4rem;
    text-align: left;
  }
  .section-contact > .faq-link a{
    font-size: 1.4rem;
  }
  .section-contact > .nav{
    margin: 30px 0 0;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .section-contact > .nav > li{
    margin: 0;
    width: auto;
  }
  .section-contact > .nav > li.mail{
    margin-top: 20px;
    -ms-flex-order: 2;
    order: 2;
  }
  .section-contact > .nav > li.mail a{
    padding: 12px 20px;
    font-size: 1.4rem;
  }
  .section-contact > .nav > li.mail a::after{
    font-size: 2rem;
  }
  .section-contact > .nav > li.tel{
    -ms-flex-order: 1;
    order: 1;
  }
  .section-contact > .nav > li.tel a{
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .section-contact > .nav > li.tel a:hover, .section-contact > .nav > li.tel a:active, .section-contact > .nav > li.tel a:focus{
    background-color: transparent;
    color: #fff;
  }
  .section-contact > .nav > li.tel a:hover .hdg, .section-contact > .nav > li.tel a:active .hdg, .section-contact > .nav > li.tel a:focus .hdg{
    color: #fff;
  }
  .section-contact > .nav > li.tel a .hdg{
    text-align: center;
  }
  .section-contact > .nav > li.tel a .time{
    text-align: center;
  }
  .section-contact > .nav > li.tel a .num{
    text-align: center;
    font-size: 3.2rem;
  }
  .section-prim{
    margin: 30px 0 0;
  }
  .section-prim.-works{
    margin-top: 0;
  }
  #works.index .section-prim{
    margin-top: 14px;
  }
  .section-prim.-persons p,
  .section-prim.-persons ul{
    font-size: 1.4rem;
  }
  .selected-keywords{
    margin: 3em -15px 0;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px 15px 35px;
    display: block;
    position: relative;
  }
  .selected-keywords > .hdg{
    -ms-flex-order: 1;
    order: 1;
    padding: 0;
  }
  .selected-keywords > .keywords{
    -ms-flex-order: 3;
    order: 3;
    margin-top: 1em;
  }
  .selected-keywords > .deselectall{
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .service-index{
    margin: 0 -15px;
    display: block;
  }
  .service-index > .category{
    display: block;
    width: auto;
    margin: 0;
  }
  .service-index > .category > .icon{
    display: block;
    margin: 0;
    width: auto;
    padding: 0;
  }
  .service-index > .category > .icon > .hdg{
    position: relative;
    font-size: 1.8rem;
    text-align: left;
    padding: 20px 20px 20px 63px;
  }
  .service-index > .category > .icon > .hdg::before{
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.41) translateY(-50%);
    transform: scale(0.41) translateY(-50%);
  }
  .service-index > .category > .link{
    display: block;
    border: 0;
    padding: 20px 15px 40px;
  }
  .service-index > .category > .link::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .service-index > .category:nth-child(2n+1){
    margin-right: 0;
  }
  .service-index > .category:nth-child(2n+1) > .link > ul{
    width: auto;
  }
  .service-index > .category:nth-child(2n+2){
    margin-left: 0;
  }
  .service-message{
    margin: 0 -15px;
    border: 0;
    display: block;
  }
  .service-message > .image{
    width: auto;
    background: none;
  }
  .service-message > .image > span{
    display: block;
    padding-top: 62.5%;
    background: url("/service/img/service-message_img.jpg") 50% 50% no-repeat;
    background-size: cover;
  }
  .service-message > .body{
    width: auto;
    padding: 20px 20px  60px;
  }
  .service-message > .body::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .service-message > .body > .hdg{
    margin-top: 1.6em;
    font-size: 1.8rem;
  }
  .service-message > .body > .hdg:first-child{
    margin-top: 0;
  }
  .service-message > .body > p{
    margin-top: 0.5em;
  }
  .staff-mv{
    background: none !important;
    min-height: 0;
    display: block;
    margin: 0 -15px;
    padding: 0;
  }
  .staff-mv > .text{
    display: block;
    margin: 0;
    padding: 25px 20px;
    width: auto;
    position: relative;
  }
  .staff-mv > .text::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #053075 url("../img/common/bg_polygon_blue.png") 15% 30% repeat;
    background-size: 200%;
    z-index: -1;
  }
  .staff-mv > .text > .catchcopy{
    font-size: 2rem;
  }
  .staff-mv > .text > .info{
    margin: 30px 0 0;
  }
  .staff-mv > .text > .info > .job{
    font-size: 2rem;
  }
  .staff-mv > .text > .info > .year{
    font-size: 1.4rem;
  }
  .table-nohead{
    margin-right: -15px;
    margin-left: -15px;
  }
  .table-nohead::before{
    background-position: 0 10%;
    background-size: 250%;
  }
  .table-nohead > table{
    border-left: 0;
  }
  .table-nohead > table th, .table-nohead > table td{
    display: block;
    border-right: 0;
  }
  .table-nohead > table tbody th{
    width: auto !important;
    padding: 7px 1.4em;
  }
  .table-nohead > table tbody td{
    padding: 15px 1.4em;
  }
  .table-nohead.-works-detail{
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 30px;
  }
  .table-nohead.-works-detail th{
    width: auto !important;
    white-space: normal;
  }
  .table-simple{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-simple table{
    min-width: 600px;
  }
  .top-hero > .image{
    padding-top: 110%;
  }
  .top-hero > .copy{
    margin-top: 0;
    margin-right: 1.5em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  }
  .top-hero > .copy > .en{
    font-size: 2.8rem;
    line-height: 1.4;
  }
  .top-hero > .copy > .ja{
    font-size: 1.3rem;
  }
  .top-hero > .copy > .ja br{
    display: none;
  }
  .top-news > .hdgouter{
    padding: 40px 0;
  }
  .top-news > .hdgouter::before{
    background-position: 0 10%;
    background-size: 220%;
  }
  .top-news > .hdgouter > .hdg{
    font-size: 2.6rem;
  }
  .top-news > .hdgouter > .hdg > span::after{
    font-size: 1.4rem;
  }
  .top-news > .body{
    margin: 0 -15px;
    padding: 0;
  }
  .top-project{
    margin: 0;
    padding: 40px 0 30px;
  }
  .top-project > .hdg{
    font-size: 2.6rem;
  }
  .top-project > .hdg > span::after{
    font-size: 1.4rem;
  }
  .top-project > .pgh{
    margin: 40px 0 0;
    font-size: 1.4rem;
    text-align: left;
    position: relative;
    z-index: 5;
  }
  .top-recruit{
    margin: 0 -15px;
    padding: 45px 15px 30px;
    position: relative;
    background: #222;
  }
  .top-recruit::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46%;
    background: url("/recruit/design/img/top/top-recruit_img.jpg") 50% 0 no-repeat;
    background-size: cover;
    box-shadow: 0 -30px 30px rgba(34, 34, 34, 0.8) inset;
  }
  .top-recruit > .hdg{
    position: relative;
    font-size: 2.6rem;
    z-index: 5;
  }
  .top-recruit > .hdg > span::after{
    font-size: 1.4rem;
  }
  .top-recruit > .pgh{
    margin: 4em 0 -1.5em;
    font-size: 1.4rem;
    text-align: left;
    position: relative;
    z-index: 5;
  }
  .top-recruit > .nav > li{
    display: block;
  }
  .top-recruit > .nav > li a{
    min-width: 0;
    padding: 15px 30px;
    font-size: 1.4rem;
  }
  .top-recruit > .nav > li a::after{
    font-size: 2rem;
  }
  .top-service{
    padding-top: 35px;
    padding-bottom: 10px;
  }
  .top-service::before{
    background-position: 40% 10%;
    background-size: 200%;
  }
  .top-service > .hdg{
    font-size: 2.6rem;
  }
  .top-service > .hdg > span::after{
    font-size: 1.4rem;
  }
  .top-service > .pgh{
    margin: 1.6em 0 0;
    font-size: 1.4rem;
    text-align: left;
  }
  .top-servicelist{
    margin: 10px 0 0;
    display: block;
  }
  .top-servicelist > li{
    border-width: 0 0 1px;
    width: auto;
    padding: 10px 0;
    display: block;
  }
  .top-servicelist > li:last-child{
    border-width: 0;
  }
  .top-servicelist > li .title{
    font-size: 2rem;
    position: relative;
  }
  .top-servicelist > li .title::after{
    position: absolute;
    top: 50%;
    left: 10px;
    font-size: 5rem;
    margin: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .top-servicelist > li .title > span{
    position: relative;
    left: 1.5em;
  }
  .top-servicelist > li .title > span::after{
    font-size: 1.4rem;
  }
  .top-servicelist > li.feature .title::after{
    margin-top: 0;
  }
  .top-servicelist > li.field .title::after{
    margin-top: 0;
  }
  .top-servicelist > li.system .title::after{
    margin-top: 0;
  }
  .top-servicelist > li > a{
    width: auto;
    padding: 15px 10px 20px;
  }
  .top-servicelist > li > a:hover .title::after, .top-servicelist > li > a:active .title::after, .top-servicelist > li > a:focus .title::after{
    -webkit-transform: scale(1.08) translateY(-50%);
    transform: scale(1.08) translateY(-50%);
    transition-delay: 0.1s;
  }
  .top-worklist{
    margin: 40px -15px -30px;
    display: block;
  }
  .top-worklist > li{
    margin: 25px 0 0;
    width: auto;
  }
  .top-worklist > li .image::after{
    background: rgba(255, 255, 255, 0.3);
  }
  .top-worklist > li .title{
    position: relative;
    top: 0;
    left: 0;
    color: #053075;
    opacity: 1;
    text-shadow: none;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 18px 15px;
    border-bottom: 1px solid #ccc;
  }
  .top-worklist > li .title::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url("../img/common/bg_polygon_white.png") 0 30% repeat;
    background-size: 220%;
    opacity: 0.3;
    z-index: -1;
  }
  .top-worklist > li .title > strong{
    display: inline-block;
    font-size: 1.6rem;
    margin-right: 0.3em;
  }
  .top-worklist > li .title > strong br{
    display: none;
  }
  .top-worklist > li > a{
    border-width: 1px 0;
  }
  .top-worklist > li > a:hover > .image > span, .top-worklist > li > a:active > .image > span, .top-worklist > li > a:focus > .image > span{
    -webkit-filter: none;
    filter: none;
  }
  .top-works{
    margin: 0;
    padding: 40px 0 30px;
  }
  .top-works > .hdg{
    font-size: 2.6rem;
  }
  .top-works > .hdg > span::after{
    font-size: 1.4rem;
  }
  .view-wide{
    margin-right: 0;
    margin-left: 0;
  }
  .works-keywords{
    margin: 10px -15px 0;
    border: 0;
    display: block;
  }
  .works-keywords > .hdg{
    display: none;
  }
  .works-keywords > .hdg::before{
    background-position: 0 10%;
    background-size: 200%;
  }
  .works-keywords > .button{
    display: block;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ccc;
    width: 100%;
    background: transparent;
    text-align: left;
    padding: 0.7em 1em;
    color: #053075;
    font-weight: bold;
    position: relative;
  }
  .works-keywords > .button::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url("../img/common/bg_polygon_white.png") 60% 20% repeat;
    background-size: 300%;
    opacity: 0.3;
    z-index: -1;
  }
  .works-keywords > .body{
    border-width: 0 0 1px;
    width: auto;
    padding-bottom: 25px;
  }
  .works-keywords > .body[aria-hidden='true']{
    display: none;
  }
  .works-keywords > .body[aria-hidden='false']{
    display: block;
  }
  .works-outline{
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  .works-pickup{
    margin-right: 0;
    margin-left: 0;
  }
  .works-pickup > .inner{
    margin: 0;
    padding-right: 40px !important;
    padding-left: 40px !important;
    padding-top: 25px;
    padding-bottom: 20px;
  }
  .works-pickup > .inner::before{
    background-position: 40% 10%;
    background-size: 200%;
  }
  .works-pickup > .inner > .hdg{
    margin-bottom: 25px;
    margin-left: -25px;
  }
  .works-result{
    margin-top: 0.3em;
    font-size: 1.3rem;
  }
  .works-result > strong{
    margin: 0;
  }
  .works-resultouter{
    margin: 0;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .works-slide > .slick-arrow::after{
    font-size: 3rem;
  }
  .works-slide > .slick-arrow.slick-prev{
    left: -35px;
  }
  .works-slide > .slick-arrow.slick-next{
    right: -35px;
  }
  .workslide-content .o{
    display: block;
    padding: 0 12px;
  }
  .workslide-content .image{
    width: auto;
    margin: 0 0 15px;
  }
  .workslide-content .body{
    width: auto;
    margin-left: 0;
  }
  .workslide-content .body > .hdg{
    font-size: 2.2rem;
    line-height: 1.4;
  }
  .workslide-content .body > .client{
    font-size: 1.4rem;
    margin: 5px 0 0;
  }
  .workslide-content .body > .client > span{
    font-size: inherit;
    margin-left: 0.3em;
  }
  .workslide-content .body > .nav > a{
    display: block;
  }
  .workslide-content .body > .nav > a::after{
    font-size: 2.6rem;
  }
  body#contact.index .hbspt-form iframe{
    width: calc(100% + 25px) !important;
  }
  ._pconly{
    display: none !important;
  }
}

@media screen and (max-width: 1130px){
  #content{
    padding: 0 15px;
    box-sizing: content-box;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .fig-servicelist > li.website::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .fig-servicelist > li.marketing::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .fig-servicelist > li.content::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .fig-servicelist > li.apps::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .fig-servicelist > li.server::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .fig-servicelist > li.pchan::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-website::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-marketing::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-content::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-apps::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-server::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .nav-service .grid > .hdg.-pchan::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-website > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-marketing > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-content > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-apps > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-server > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
  .service-index > .category.-pchan > .icon > .hdg::before{
    background-image: url(../img/sprite@2x.png);
    background-size: 295px 251px;
  }
}

@media screen and (min-width: 769px){
  .fig-servicelist > li.website, .fig-servicelist > li.marketing, .fig-servicelist > li.apps, .fig-servicelist > li.server{
    border-right: 1px solid #ccc;
  }
  .fig-servicelist > li.website, .fig-servicelist > li.marketing, .fig-servicelist > li.content{
    border-bottom: 1px solid #ccc;
  }
  .footer-isms > a > .text p::after{
    display: none;
  }
  .footer-sitemap > .nav > li{
    max-width: 180px;
  }
  .list-contact > li.tel a{
    pointer-events: none;
  }
  .list-contact > li.tel .left .time{
    white-space: nowrap;
  }
  .list-contact > li.tel .left .time br{
    display: none;
  }
  .nav-service .grid > .hdg::after{
    display: none;
  }
  .nav-service .grid > .link{
    display: block !important;
  }
  .section-contact > .nav > li.tel a{
    pointer-events: none;
    padding: 10px 20px 10px 20px;
  }
  .section-contact > .nav > li.tel a .time br{
    display: none;
  }
  .set-delay1{
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .set-delay2{
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .set-delay3{
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .set-delay4{
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  .set-delay5{
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }
  .staff-mv > .img{
    display: none;
  }
  ._sponly{
    display: none !important;
  }
}

@media screen and (max-width: 1920px){
  .project-pickup > .inner{
    padding-right: calc(51vw - 50%);
    padding-left: calc(51vw - 50%);
  }
  .works-pickup > .inner{
    padding-right: calc(51vw - 50%);
    padding-left: calc(51vw - 50%);
  }
}

@media screen and (max-width: 1185px){
  .project-pickup > .inner{
    padding-right: calc(54vw - 50%);
    padding-left: calc(54vw - 50%);
  }
  .works-pickup > .inner{
    padding-right: calc(54vw - 50%);
    padding-left: calc(54vw - 50%);
  }
}

@media screen and (max-width: 1080px){
  .project-pickup > .inner{
    margin: 0 -15px;
    padding-right: 70px;
    padding-left: 70px;
  }
  .works-pickup > .inner{
    margin: 0 -15px;
    padding-right: 70px;
    padding-left: 70px;
  }
}

/*# sourceMappingURL=base.css.map */