@charset "UTF-8";
.din-200 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 200;
}

.din-400 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
}

@-webkit-keyframes hoverin {
  0% {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes hoverin {
  0% {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes hoverout {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 101%;
    opacity: 1;
  }
}
@keyframes hoverout {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 101%;
    opacity: 1;
  }
}
@-webkit-keyframes hoverinreverse {
  0% {
    -webkit-transform: translateX(101%);
            transform: translateX(101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes hoverinreverse {
  0% {
    -webkit-transform: translateX(101%);
            transform: translateX(101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes hoveroutreverse {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: -101%;
    opacity: 1;
  }
}
@keyframes hoveroutreverse {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    left: -101%;
    opacity: 1;
  }
}
@-webkit-keyframes hoverupout {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    top: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    top: -100%;
  }
}
@keyframes hoverupout {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    top: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    top: -100%;
  }
}
@-webkit-keyframes hoverupin {
  0% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes hoverupin {
  0% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/**
 * Swiper 6.0.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: July 3, 2020
 */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-container-3d {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

:root {
  --swiper-navigation-size:44px;
}

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev:after, .swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white {
  --swiper-navigation-color:#fff;
}

.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black {
  --swiper-navigation-color:#000;
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-white {
  --swiper-pagination-color:#fff;
}

.swiper-pagination-black {
  --swiper-pagination-color:#000;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube {
  overflow: visible;
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}

.swiper-container-flip {
  overflow: visible;
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* plgin*/
.techblog .prettyprint ol.linenums > li, .mce-content-body .prettyprint ol.linenums > li, .entrybody .prettyprint ol.linenums > li, .wysiwyg.entry .prettyprint ol.linenums > li {
  list-style-type: decimal;
  list-style-type: decimal-leading-zero;
}
.techblog .str, .mce-content-body .str, .entrybody .str, .wysiwyg.entry .str {
  color: #EC7600;
}
.techblog .kwd, .mce-content-body .kwd, .entrybody .kwd, .wysiwyg.entry .kwd {
  color: #93C763;
}
.techblog .com, .mce-content-body .com, .entrybody .com, .wysiwyg.entry .com {
  color: #66747B;
}
.techblog .typ, .mce-content-body .typ, .entrybody .typ, .wysiwyg.entry .typ {
  color: #678CB1;
}
.techblog .lit, .mce-content-body .lit, .entrybody .lit, .wysiwyg.entry .lit {
  color: #FACD22;
}
.techblog .pun, .mce-content-body .pun, .entrybody .pun, .wysiwyg.entry .pun {
  color: #F1F2F3;
}
.techblog .pln, .mce-content-body .pln, .entrybody .pln, .wysiwyg.entry .pln {
  color: #F1F2F3;
}
.techblog .tag, .mce-content-body .tag, .entrybody .tag, .wysiwyg.entry .tag {
  color: #8AC763;
}
.techblog .atn, .mce-content-body .atn, .entrybody .atn, .wysiwyg.entry .atn {
  color: #E0E2E4;
}
.techblog .atv, .mce-content-body .atv, .entrybody .atv, .wysiwyg.entry .atv {
  color: #EC7600;
}
.techblog .dec, .mce-content-body .dec, .entrybody .dec, .wysiwyg.entry .dec {
  color: purple;
}
.techblog pre.prettyprint, .mce-content-body pre.prettyprint, .entrybody pre.prettyprint, .wysiwyg.entry pre.prettyprint {
  border: 0px solid #888;
}
.techblog ol.linenums, .mce-content-body ol.linenums, .entrybody ol.linenums, .wysiwyg.entry ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
}
.techblog .prettyprint, .mce-content-body .prettyprint, .entrybody .prettyprint, .wysiwyg.entry .prettyprint {
  background: #000;
}
.techblog li.L0, .techblog li.L1, .techblog li.L2, .techblog li.L3, .techblog li.L4, .techblog li.L5, .techblog li.L6, .techblog li.L7, .techblog li.L8, .techblog li.L9, .mce-content-body li.L0, .mce-content-body li.L1, .mce-content-body li.L2, .mce-content-body li.L3, .mce-content-body li.L4, .mce-content-body li.L5, .mce-content-body li.L6, .mce-content-body li.L7, .mce-content-body li.L8, .mce-content-body li.L9, .entrybody li.L0, .entrybody li.L1, .entrybody li.L2, .entrybody li.L3, .entrybody li.L4, .entrybody li.L5, .entrybody li.L6, .entrybody li.L7, .entrybody li.L8, .entrybody li.L9, .wysiwyg.entry li.L0, .wysiwyg.entry li.L1, .wysiwyg.entry li.L2, .wysiwyg.entry li.L3, .wysiwyg.entry li.L4, .wysiwyg.entry li.L5, .wysiwyg.entry li.L6, .wysiwyg.entry li.L7, .wysiwyg.entry li.L8, .wysiwyg.entry li.L9 {
  color: #555;
  list-style-type: decimal;
}
.techblog li.L1, .techblog li.L3, .techblog li.L5, .techblog li.L7, .techblog li.L9, .mce-content-body li.L1, .mce-content-body li.L3, .mce-content-body li.L5, .mce-content-body li.L7, .mce-content-body li.L9, .entrybody li.L1, .entrybody li.L3, .entrybody li.L5, .entrybody li.L7, .entrybody li.L9, .wysiwyg.entry li.L1, .wysiwyg.entry li.L3, .wysiwyg.entry li.L5, .wysiwyg.entry li.L7, .wysiwyg.entry li.L9 {
  background: #111;
}
@media print {
  .techblog .str, .mce-content-body .str, .entrybody .str, .wysiwyg.entry .str {
    color: #060;
  }
  .techblog .kwd, .mce-content-body .kwd, .entrybody .kwd, .wysiwyg.entry .kwd {
    color: #006;
    font-weight: bold;
  }
  .techblog .com, .mce-content-body .com, .entrybody .com, .wysiwyg.entry .com {
    color: #600;
    font-style: italic;
  }
  .techblog .typ, .mce-content-body .typ, .entrybody .typ, .wysiwyg.entry .typ {
    color: #404;
    font-weight: bold;
  }
  .techblog .lit, .mce-content-body .lit, .entrybody .lit, .wysiwyg.entry .lit {
    color: #044;
  }
  .techblog .pun, .mce-content-body .pun, .entrybody .pun, .wysiwyg.entry .pun {
    color: #440;
  }
  .techblog .pln, .mce-content-body .pln, .entrybody .pln, .wysiwyg.entry .pln {
    color: #000;
  }
  .techblog .tag, .mce-content-body .tag, .entrybody .tag, .wysiwyg.entry .tag {
    color: #006;
    font-weight: bold;
  }
  .techblog .atn, .mce-content-body .atn, .entrybody .atn, .wysiwyg.entry .atn {
    color: #404;
  }
  .techblog .atv, .mce-content-body .atv, .entrybody .atv, .wysiwyg.entry .atv {
    color: #060;
  }
}

/* -------------     commom      -------------*/
.techblog .inner-archive {
  width: 690px;
}
.techblog .inner-archive .item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 237px;
  position: relative;
}
.techblog .inner-archive .item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 1px;
  background: #adadad;
}
.techblog .inner-archive .item:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  height: 1px;
  background: #adadad;
}
.techblog .inner-archive .item a {
  position: relative;
  z-index: 10;
}
.techblog .inner-archive .item a .thumb {
  display: block;
  height: 100%;
}
.techblog .inner-archive .item + .item {
  margin: 20px 0 0;
}
.techblog .inner-archive .item .thumb {
  width: 237px;
  position: relative;
  overflow: hidden;
}
.techblog .inner-archive .item .thumb:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #adadad;
  z-index: 20;
}
.techblog .inner-archive .item .thumb span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.techblog .inner-archive .item .detail {
  width: calc(100% - 237px);
  padding: 30px;
  position: relative;
  z-index: 9;
}
.techblog .inner-archive .item .detail .detail-link {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.techblog .inner-archive .item .detail:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #adadad;
}
.techblog .inner-archive .item .detail .archive-category {
  display: inline-block;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 30;
}
.techblog .inner-archive .item .detail .archive-category a {
  background-color: #8effc6;
  font-family: "din-2014-narrow", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 7px 13px 5px;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
  display: block;
}
.techblog .inner-archive .item .detail .archive-category a:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.techblog .inner-archive .item .detail p.archive-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin: 7px 0 15px;
  letter-spacing: 0.09em;
}
.techblog .inner-archive .item .detail p.archive-title a:hover {
  text-decoration: underline;
}
.techblog .inner-archive .item .detail time {
  font-size: 15px;
  color: #a8a8a8;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.9px;
}
.techblog .inner-archive .item .detail .archive-tags {
  margin: 15px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  z-index: 30;
}
.techblog .inner-archive .item .detail .archive-tags li {
  margin: 5px;
}
.techblog .inner-archive .item .detail .archive-tags li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.92;
  background-color: #ebebeb;
  letter-spacing: 1px;
  padding: 2px 10px 0px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog .inner-archive .item .detail .archive-tags li a:hover {
  opacity: 0.7;
}
.techblog .inner-archive .item:hover .thumb span {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.techblog .inner-sidenav {
  width: 290px;
  margin: 0 0 0 20px;
}
.techblog .inner-sidenav .archive-links {
  background-color: #f7f7f7;
  padding: 45px 35px 40px;
}
.techblog .inner-sidenav h3 {
  font-size: 25px;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 17px;
  letter-spacing: 0.05em;
}
.techblog .inner-sidenav .item {
  margin-bottom: 45px;
}
.techblog .inner-sidenav .item-about {
  background-color: #f7f7f7;
  padding: 40px 35px 40px;
  margin-bottom: 20px;
}
.techblog .inner-sidenav .item-about p {
  font-size: 15px;
  line-height: 1.6;
}
.techblog .inner-sidenav .item-categories li, .techblog .inner-sidenav .item-archives li {
  padding: 0 0 0 33px;
  position: relative;
}
.techblog .inner-sidenav .item-categories li:after, .techblog .inner-sidenav .item-archives li:after {
  content: "";
  width: 8px;
  height: 1px;
  background: #000;
  position: absolute;
  left: 15px;
  top: 11px;
}
.techblog .inner-sidenav .item-categories li a, .techblog .inner-sidenav .item-archives li a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.techblog .inner-sidenav .item-categories li a:hover, .techblog .inner-sidenav .item-archives li a:hover {
  text-decoration: underline;
}
.techblog .inner-sidenav .item-categories li + li, .techblog .inner-sidenav .item-archives li + li {
  margin-top: 11px;
}
.techblog .inner-sidenav .item-tag {
  margin-bottom: 0;
}
.techblog .inner-sidenav .item-tag ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -2.5px;
}
.techblog .inner-sidenav .item-tag li {
  margin: 5px;
}
.techblog .inner-sidenav .item-tag li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.92;
  background-color: #ebebeb;
  letter-spacing: 1px;
  padding: 2px 10px 0px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog .inner-sidenav .item-tag li a:hover {
  opacity: 0.7;
}
.techblog .inner-sidenav .btn-recruit {
  width: 290px;
  height: 120px;
  background: url("/techblog/images/btn-recruit-bg.jpg") no-repeat right top/cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 25px;
  position: relative;
  margin: 20px 0 0;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
.techblog .inner-sidenav .btn-recruit:hover {
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
}
.techblog .inner-sidenav .btn-recruit:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 50%;
}
.techblog .inner-sidenav .btn-recruit .large {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  padding-right: 10px;
  -webkit-transform: rotate(0.05deg);
          transform: rotate(0.05deg);
}
.techblog .inner-sidenav .btn-recruit .min {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  font-weight: normal;
  -webkit-transform: rotate(0.05deg);
          transform: rotate(0.05deg);
  letter-spacing: 0.1em;
}

/* -------------     common end      -------------*/
/* -------------     top      -------------*/
.techblog main {
  width: auto;
  padding: 0 0 110px;
}
.techblog main section {
  position: relative;
  z-index: 10;
}
.techblog main .sec-slider {
  margin: 0 0 96px;
  padding-top: 20px;
}
.techblog main .sec-slider .swiper-container .swiper-slide {
  width: 1120px !important;
  height: 530px;
  padding: 0 10px;
}
.techblog main .sec-slider .swiper-container .swiper-slide:hover .thumb span {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb, .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail {
  display: block;
  width: 50%;
  height: 100%;
  position: relative;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb {
  overflow: hidden;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail {
  background: url("/techblog/images/slider-bg.jpg") no-repeat right top/cover;
  padding: 70px 70px 50px;
  position: relative;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category {
  display: inline-block;
  position: relative;
  z-index: 20;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category a {
  font-size: 15px;
  background-color: #8effc6;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  padding: 5px 12px;
  display: block;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category a:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title {
  font-size: 35px;
  font-weight: bold;
  line-height: 1.31;
  margin: 0 0 27px;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title a:hover {
  text-decoration: underline;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time {
  font-size: 15px;
  color: #a8a8a8;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.9px;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.67;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags {
  margin: 41px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  z-index: 20;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li {
  margin: 5px;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.92;
  background-color: #ebebeb;
  letter-spacing: 1px;
  padding: 2px 10px 0px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li a:hover {
  opacity: 0.7;
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide:hover .thumb span {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail {
  padding: 90px 0 0;
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo {
  width: 77px;
  height: 216px;
  margin: 0 auto;
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo img {
  width: 100%;
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail h2 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 600;
  font-size: 40px;
  text-align: center;
  margin: 15px 0 0;
}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text {
  font-size: 20px;
  text-align: center;
  line-height: 1.65;
  letter-spacing: 0.1em;
  margin: 46px 0 0;
  display: block;
}
.techblog main .sec-slider .swiper-container .swiper-slide a .thumb {
  overflow: hidden;
}
.techblog main .sec-slider .swiper-container .swiper-slide a .thumb span {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.techblog main .sec-slider .swiper-nav-wrap {
  width: 242px;
  height: 11px;
  margin: 34px auto 0;
  position: relative;
}
.techblog main .sec-slider .swiper-nav-wrap:after {
  content: "";
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-image: url("/images/common/rhombus.png");
  position: absolute;
  left: 117px;
  top: 1px;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next {
  width: 88px;
  height: 9px;
  margin: 0;
  top: 0;
  bottom: auto;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-size: 12px;
  color: #000;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover {
  opacity: 0.7;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:after {
  content: none;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span {
  display: block;
  width: 100%;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i {
  display: block;
  width: 48px;
  height: 1px;
  position: absolute;
  top: 4px;
  overflow: hidden;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev {
  background-image: none;
  text-align: left;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i {
  left: 40px;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:before {
  -webkit-animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:after {
  -webkit-animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next {
  background-image: none;
  text-align: right;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i {
  right: 40px;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:before {
  -webkit-animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:after {
  -webkit-animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.techblog main .sec-archives {
  width: 1100px;
  background: #fff;
  margin: 0 auto;
  padding: 50px;
}
.techblog main .sec-archives h2 {
  font-size: 25px;
  letter-spacing: 0.1em;
  margin: 0 0 29px;
  font-weight: normal;
}
.techblog main .sec-archives .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.techblog main .sec-archives .btn-base {
  margin: 50px auto 0 auto;
  line-height: 1;
  border: 1px solid #efefef;
}

/* ------------- top - end -------------*/
/* -------------     detail      -------------*/
.techblog.detail main {
  width: auto;
  padding: 0 0 110px;
}
.techblog.detail main section {
  position: relative;
  z-index: 10;
}
.techblog.detail main .content-wrap {
  width: 1100px;
  margin: 0 auto 160px;
}
.techblog.detail main .content-wrap .content-box {
  width: 1100px;
  background: #fff;
  margin: 0 auto;
  padding: 78px 50px 125px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.techblog.detail main .content-wrap .entry-wrap {
  width: 680px;
  overflow: hidden;
}
.techblog.detail main .content-wrap .entry-wrap img {
  max-width: 100%;
  height: auto;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header {
  background: #fff;
  width: 100%;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 0 20px;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top time {
  font-size: 20px;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.1em;
  display: block;
  margin: 0 14px 0 0;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b {
  display: block;
  width: auto;
  height: 31px;
  background-color: #8effc6;
  margin: 0 19px 0 0;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
  letter-spacing: 0.1em;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px 20px;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a span {
  font-size: 20px;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  -webkit-transform: rotate(0.05deg);
          transform: rotate(0.05deg);
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a:hover {
  text-decoration: none;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom {
  padding: 0 0 42px;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom h1 {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.09em;
  margin-bottom: 25px;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -2.5px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li {
  margin: 5px;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.92;
  background-color: #ebebeb;
  letter-spacing: 1px;
  padding: 2px 10px 0px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a:hover {
  opacity: 0.7;
}
.techblog.detail main .content-wrap .entry-wrap hr {
  height: 0;
  margin: 0;
}
.techblog.detail main .content-wrap .writer_box {
  background: #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 36px 40px;
  margin: 60px 0 0;
}
.techblog.detail main .content-wrap .writer_box .profile_img {
  width: 136px;
  height: 136px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.techblog.detail main .content-wrap .writer_box .text {
  width: calc(100% - 136px);
  padding: 8px 0 0 32px;
}
.techblog.detail main .content-wrap .writer_box .text .name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 17px;
}
.techblog.detail main .content-wrap .writer_box .text .name a {
  text-decoration: underline;
}
.techblog.detail main .content-wrap .writer_box .text .name a:hover {
  text-decoration: none;
}
.techblog.detail main .content-wrap .writer_box .text .detail {
  font-size: 12px;
  font-weight: 300;
  line-height: 2.25;
}
.techblog.detail main .content-wrap .btn-base {
  text-decoration: none;
  line-height: 1;
  border: 1px solid #efefef;
}
.techblog.detail main .content-wrap .btn-base span {
  padding: 12px 0 0 10px;
  text-align: center;
}
.techblog.detail main .content-wrap .btn-base:hover {
  text-decoration: none !important;
}
.techblog.detail main .content-wrap .btn-base:hover i {
  color: #000;
}
.techblog.detail main .pager-wrap {
  position: absolute;
  left: 410px;
  bottom: -185px;
}
.techblog.detail main .pager {
  width: 220px;
  height: 11px;
  margin: 70px auto 0;
  position: relative;
}
.techblog.detail main .pager:after {
  content: "";
  width: 9px;
  height: 9px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-image: url("/images/common/rhombus.png");
  position: absolute;
  left: 105px;
  top: 0.5px;
}
.techblog.detail main .pager .link_before, .techblog.detail main .pager .link_next {
  width: 88px;
  height: 9px;
  margin: 0;
  top: 0;
  bottom: auto;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-size: 12px;
  font-family: "din-2014-narrow", sans-serif;
  color: #000;
  cursor: pointer;
}
.techblog.detail main .pager .link_before:hover, .techblog.detail main .pager .link_next:hover {
  opacity: 0.7;
}
.techblog.detail main .pager .link_before:after, .techblog.detail main .pager .link_next:after {
  content: none;
}
.techblog.detail main .pager .link_before span, .techblog.detail main .pager .link_next span {
  display: block;
  width: 100%;
}
.techblog.detail main .pager .link_before i, .techblog.detail main .pager .link_next i {
  display: block;
  width: 48px;
  height: 1px;
  position: absolute;
  top: 5px;
  overflow: hidden;
}
.techblog.detail main .pager .link_before i:before, .techblog.detail main .pager .link_next i:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
}
.techblog.detail main .pager .link_before i:after, .techblog.detail main .pager .link_next i:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
}
.techblog.detail main .pager .link_before {
  background-image: none;
  text-align: left;
  position: absolute;
}
.techblog.detail main .pager .link_before i {
  left: 40px;
}
.techblog.detail main .pager .link_before i:after {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}
.techblog.detail main .pager .link_before:hover i:before {
  -webkit-animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.techblog.detail main .pager .link_before:hover i:after {
  -webkit-animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.techblog.detail main .pager .link_next {
  background-image: none;
  text-align: right;
  position: absolute;
  right: 0;
}
.techblog.detail main .pager .link_next span {
  position: absolute;
  right: 0;
  top: 0;
}
.techblog.detail main .pager .link_next i {
  right: 40px;
}
.techblog.detail main .pager .link_next i:before, .techblog.detail main .pager .link_next i:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
}
.techblog.detail main .pager .link_next i:after {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}
.techblog.detail main .pager .link_next:hover i:before {
  -webkit-animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
          animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.techblog.detail main .pager .link_next:hover i:after {
  -webkit-animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.techblog.detail main .btn-blogtop {
  margin: 60px auto 0;
  border: 1px solid #efefef;
}
.techblog.detail main .btn-blogtop span {
  padding-left: 10px;
  padding-right: 0;
  text-align: center;
}
.techblog.detail main .btn-mid-recruit {
  width: 1000px;
  height: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 60px;
  background: url("/techblog/images/btn-recruit-mid-bg.jpg") no-repeat left top/cover;
  padding: 0 60px;
  font-size: 21px;
  font-weight: 500;
  position: relative;
  margin: 83px auto 0;
}
.techblog.detail main .btn-mid-recruit span {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog.detail main .btn-mid-recruit:hover span {
  opacity: 0.7;
}
.techblog.detail main .btn-mid-recruit:after {
  content: "";
  width: 43px;
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 15;
}

/* ------------- detail - end -------------*/
.mce-content-body .entry_kv, .entrybody .entry_kv, .wysiwyg.entry .entry_kv, .tox-navobj .entry_kv {
  min-height: inherit;
}
.mce-content-body a, .mce-content-body p, .entrybody a, .entrybody p, .wysiwyg.entry a, .wysiwyg.entry p, .tox-navobj a, .tox-navobj p {
  word-break: break-all;
}
.mce-content-body p + p, .mce-content-body p + h2, .mce-content-body p + h3, .mce-content-body p + h4, .mce-content-body p + figure, .mce-content-body p + table, .mce-content-body p + div, .mce-content-body p + ul, .mce-content-body p + ol, .mce-content-body div + p, .mce-content-body div + h2, .mce-content-body div + h3, .mce-content-body div + h4, .mce-content-body div + figure, .mce-content-body div + table, .mce-content-body div + div, .mce-content-body div + ul, .mce-content-body div + ol, .entrybody p + p, .entrybody p + h2, .entrybody p + h3, .entrybody p + h4, .entrybody p + figure, .entrybody p + table, .entrybody p + div, .entrybody p + ul, .entrybody p + ol, .entrybody div + p, .entrybody div + h2, .entrybody div + h3, .entrybody div + h4, .entrybody div + figure, .entrybody div + table, .entrybody div + div, .entrybody div + ul, .entrybody div + ol, .wysiwyg.entry p + p, .wysiwyg.entry p + h2, .wysiwyg.entry p + h3, .wysiwyg.entry p + h4, .wysiwyg.entry p + figure, .wysiwyg.entry p + table, .wysiwyg.entry p + div, .wysiwyg.entry p + ul, .wysiwyg.entry p + ol, .wysiwyg.entry div + p, .wysiwyg.entry div + h2, .wysiwyg.entry div + h3, .wysiwyg.entry div + h4, .wysiwyg.entry div + figure, .wysiwyg.entry div + table, .wysiwyg.entry div + div, .wysiwyg.entry div + ul, .wysiwyg.entry div + ol, .tox-navobj p + p, .tox-navobj p + h2, .tox-navobj p + h3, .tox-navobj p + h4, .tox-navobj p + figure, .tox-navobj p + table, .tox-navobj p + div, .tox-navobj p + ul, .tox-navobj p + ol, .tox-navobj div + p, .tox-navobj div + h2, .tox-navobj div + h3, .tox-navobj div + h4, .tox-navobj div + figure, .tox-navobj div + table, .tox-navobj div + div, .tox-navobj div + ul, .tox-navobj div + ol {
  margin-top: 1em;
}
.mce-content-body figure + p, .entrybody figure + p, .wysiwyg.entry figure + p, .tox-navobj figure + p {
  margin-top: 1em;
}
.mce-content-body p, .mce-content-body li, .entrybody p, .entrybody li, .wysiwyg.entry p, .wysiwyg.entry li, .tox-navobj p, .tox-navobj li {
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.1em;
  min-height: 1em;
}
.mce-content-body a, .entrybody a, .wysiwyg.entry a, .tox-navobj a {
  color: #08a771;
}
.mce-content-body a:hover, .entrybody a:hover, .wysiwyg.entry a:hover, .tox-navobj a:hover {
  text-decoration: underline;
}
.mce-content-body h2, .entrybody h2, .wysiwyg.entry h2, .tox-navobj h2 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.45;
  position: relative;
  background: #f0f0f0;
  padding: 3px 0 6px 28px;
}
.mce-content-body h2:before, .entrybody h2:before, .wysiwyg.entry h2:before, .tox-navobj h2:before {
  content: "";
  width: 12px;
  height: 100%;
  background: #8effc6;
  position: absolute;
  left: 0;
  top: 0;
}
.mce-content-body h3, .entrybody h3, .wysiwyg.entry h3, .tox-navobj h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  padding: 2px 0 5px 28px;
}
.mce-content-body h3:before, .entrybody h3:before, .wysiwyg.entry h3:before, .tox-navobj h3:before {
  content: "";
  width: 12px;
  height: 100%;
  background: #8effc6;
  position: absolute;
  left: 0;
  top: 0;
}
.mce-content-body h4, .entrybody h4, .wysiwyg.entry h4, .tox-navobj h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  padding: 5px 30px 6px;
  background-color: #f0f0f0;
}
.mce-content-body h2, .mce-content-body h3, .mce-content-body h4, .entrybody h2, .entrybody h3, .entrybody h4, .wysiwyg.entry h2, .wysiwyg.entry h3, .wysiwyg.entry h4, .tox-navobj h2, .tox-navobj h3, .tox-navobj h4 {
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}
.mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj {
  /*画像ボックス*/
}
.mce-content-body img, .entrybody img, .wysiwyg.entry img, .tox-navobj img {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mce-content-body figure img, .entrybody figure img, .wysiwyg.entry figure img, .tox-navobj figure img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
}
.mce-content-body figure figcaption, .entrybody figure figcaption, .wysiwyg.entry figure figcaption, .tox-navobj figure figcaption {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.93;
  letter-spacing: 1.4px;
  text-align: left;
  color: #a8a8a8;
  margin-top: 15px;
}
.mce-content-body .fig-box-modal, .entrybody .fig-box-modal, .wysiwyg.entry .fig-box-modal, .tox-navobj .fig-box-modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0;
}
.mce-content-body .fig-box-modal a, .entrybody .fig-box-modal a, .wysiwyg.entry .fig-box-modal a, .tox-navobj .fig-box-modal a {
  width: calc((100% - 10px) / 2);
  margin-bottom: 20px;
  margin-top: 20px;
}
.mce-content-body .fig-box-modal a img, .entrybody .fig-box-modal a img, .wysiwyg.entry .fig-box-modal a img, .tox-navobj .fig-box-modal a img {
  display: block;
  width: 100%;
  margin-bottom: 0;
  margin-top: 0;
}
.mce-content-body .fig-box, .entrybody .fig-box, .wysiwyg.entry .fig-box, .tox-navobj .fig-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mce-content-body .fig-box .caption, .entrybody .fig-box .caption, .wysiwyg.entry .fig-box .caption, .tox-navobj .fig-box .caption {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.93;
  letter-spacing: 1.4px;
  text-align: left;
  color: #a8a8a8;
  margin-top: 15px;
}
.mce-content-body .fig-box figure, .entrybody .fig-box figure, .wysiwyg.entry .fig-box figure, .tox-navobj .fig-box figure {
  width: calc((100% - 10px) / 2);
}
.mce-content-body .fig-box figure img, .entrybody .fig-box figure img, .wysiwyg.entry .fig-box figure img, .tox-navobj .fig-box figure img {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
.mce-content-body .fig-box.fig-two figure, .entrybody .fig-box.fig-two figure, .wysiwyg.entry .fig-box.fig-two figure, .tox-navobj .fig-box.fig-two figure {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 20px;
}
.mce-content-body .fig-box.fig-two figure img, .entrybody .fig-box.fig-two figure img, .wysiwyg.entry .fig-box.fig-two figure img, .tox-navobj .fig-box.fig-two figure img {
  width: calc((100% - 10px) / 2);
  display: inline;
  margin-bottom: 0;
  margin-top: 20px;
}
.mce-content-body .fig-box.fig-two figure img + img, .entrybody .fig-box.fig-two figure img + img, .wysiwyg.entry .fig-box.fig-two figure img + img, .tox-navobj .fig-box.fig-two figure img + img {
  margin-left: 10px;
}
.mce-content-body .fig-box.fig-two figure figcaption, .entrybody .fig-box.fig-two figure figcaption, .wysiwyg.entry .fig-box.fig-two figure figcaption, .tox-navobj .fig-box.fig-two figure figcaption {
  width: 100%;
}
.mce-content-body .fig-box.fig-two-modal div, .entrybody .fig-box.fig-two-modal div, .wysiwyg.entry .fig-box.fig-two-modal div, .tox-navobj .fig-box.fig-two-modal div {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 20px;
  margin-top: 20px;
}
.mce-content-body .fig-box.fig-two-modal div a, .entrybody .fig-box.fig-two-modal div a, .wysiwyg.entry .fig-box.fig-two-modal div a, .tox-navobj .fig-box.fig-two-modal div a {
  display: block;
  width: calc((100% - 10px) / 2);
  display: inline;
  margin-bottom: 0;
}
.mce-content-body .fig-box.fig-two-modal div a img, .entrybody .fig-box.fig-two-modal div a img, .wysiwyg.entry .fig-box.fig-two-modal div a img, .tox-navobj .fig-box.fig-two-modal div a img {
  margin-bottom: 0;
  margin-top: 0;
}
.mce-content-body .fig-box.fig-two-modal div a + a, .entrybody .fig-box.fig-two-modal div a + a, .wysiwyg.entry .fig-box.fig-two-modal div a + a, .tox-navobj .fig-box.fig-two-modal div a + a {
  margin-left: 10px;
}
.mce-content-body .fig-box.fig-two-modal p.caption, .entrybody .fig-box.fig-two-modal p.caption, .wysiwyg.entry .fig-box.fig-two-modal p.caption, .tox-navobj .fig-box.fig-two-modal p.caption {
  width: 100%;
}
.mce-content-body .fig-box.fig-three figure, .entrybody .fig-box.fig-three figure, .wysiwyg.entry .fig-box.fig-three figure, .tox-navobj .fig-box.fig-three figure {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 20px;
}
.mce-content-body .fig-box.fig-three figure img, .entrybody .fig-box.fig-three figure img, .wysiwyg.entry .fig-box.fig-three figure img, .tox-navobj .fig-box.fig-three figure img {
  width: calc((100% - 20px) / 3);
  display: inline;
  margin-top: 20px;
  margin-bottom: 0;
}
.mce-content-body .fig-box.fig-three figure img + img, .entrybody .fig-box.fig-three figure img + img, .wysiwyg.entry .fig-box.fig-three figure img + img, .tox-navobj .fig-box.fig-three figure img + img {
  margin-left: 10px;
}
.mce-content-body .fig-box.fig-three figure figcaption, .entrybody .fig-box.fig-three figure figcaption, .wysiwyg.entry .fig-box.fig-three figure figcaption, .tox-navobj .fig-box.fig-three figure figcaption {
  width: 100%;
}
.mce-content-body .fig-box.fig-three-modal div, .entrybody .fig-box.fig-three-modal div, .wysiwyg.entry .fig-box.fig-three-modal div, .tox-navobj .fig-box.fig-three-modal div {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mce-content-body .fig-box.fig-three-modal div a, .entrybody .fig-box.fig-three-modal div a, .wysiwyg.entry .fig-box.fig-three-modal div a, .tox-navobj .fig-box.fig-three-modal div a {
  display: block;
  width: calc((100% - 20px) / 3);
  display: inline;
}
.mce-content-body .fig-box.fig-three-modal div a img, .entrybody .fig-box.fig-three-modal div a img, .wysiwyg.entry .fig-box.fig-three-modal div a img, .tox-navobj .fig-box.fig-three-modal div a img {
  margin-bottom: 0;
  margin-top: 0;
}
.mce-content-body .fig-box.fig-three-modal div a + a, .entrybody .fig-box.fig-three-modal div a + a, .wysiwyg.entry .fig-box.fig-three-modal div a + a, .tox-navobj .fig-box.fig-three-modal div a + a {
  margin-left: 10px;
}
.mce-content-body .fig-box.fig-three-modal .caption, .entrybody .fig-box.fig-three-modal .caption, .wysiwyg.entry .fig-box.fig-three-modal .caption, .tox-navobj .fig-box.fig-three-modal .caption {
  width: 100%;
}
.mce-content-body .fig-one, .entrybody .fig-one, .wysiwyg.entry .fig-one, .tox-navobj .fig-one {
  padding-bottom: 20px;
}
.mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj {
  /*リスト*/
}
.mce-content-body ul, .mce-content-body ol, .entrybody ul, .entrybody ol, .wysiwyg.entry ul, .wysiwyg.entry ol, .tox-navobj ul, .tox-navobj ol {
  margin-bottom: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.mce-content-body ul, .entrybody ul, .wysiwyg.entry ul, .tox-navobj ul {
  list-style: none;
}
.mce-content-body ul li, .entrybody ul li, .wysiwyg.entry ul li, .tox-navobj ul li {
  padding: 0 0 0 25px;
  position: relative;
  list-style: none;
}
.mce-content-body ul li:before, .entrybody ul li:before, .wysiwyg.entry ul li:before, .tox-navobj ul li:before {
  content: "・";
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
  top: 0;
}
.mce-content-body ol, .entrybody ol, .wysiwyg.entry ol, .tox-navobj ol {
  padding: 0 0 0 25px;
}
.mce-content-body ol > li, .entrybody ol > li, .wysiwyg.entry ol > li, .tox-navobj ol > li {
  list-style: decimal;
}
.mce-content-body ol > li > ul, .entrybody ol > li > ul, .wysiwyg.entry ol > li > ul, .tox-navobj ol > li > ul {
  margin-top: 0;
  padding-left: 0;
}
.mce-content-body ol > li > ul > li, .entrybody ol > li > ul > li, .wysiwyg.entry ol > li > ul > li, .tox-navobj ol > li > ul > li {
  list-style: none;
  padding-left: 1em;
}
.mce-content-body ul > li > ol, .entrybody ul > li > ol, .wysiwyg.entry ul > li > ol, .tox-navobj ul > li > ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1em;
}
.mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj {
  /*コードのスライドボタン*/
}
.mce-content-body .title-slidebox, .entrybody .title-slidebox, .wysiwyg.entry .title-slidebox, .tox-navobj .title-slidebox {
  font-size: 13px;
  font-weight: 300;
  border: solid 1px #666666;
  padding: 10px 27px;
  position: relative;
  margin: 0 0 16px;
  cursor: pointer;
}
.mce-content-body .title-slidebox a.btn-code, .entrybody .title-slidebox a.btn-code, .wysiwyg.entry .title-slidebox a.btn-code, .tox-navobj .title-slidebox a.btn-code {
  width: 180px;
  height: 100%;
  position: absolute;
  right: 35px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mce-content-body .title-slidebox a.btn-code i, .entrybody .title-slidebox a.btn-code i, .wysiwyg.entry .title-slidebox a.btn-code i, .tox-navobj .title-slidebox a.btn-code i {
  font-style: normal;
  position: absolute;
  padding-left: 14px;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  padding-top: 9px;
}
.mce-content-body .title-slidebox a.btn-code i:before, .entrybody .title-slidebox a.btn-code i:before, .wysiwyg.entry .title-slidebox a.btn-code i:before, .tox-navobj .title-slidebox a.btn-code i:before {
  content: "";
  width: 7px;
  height: 12px;
  background: url("/techblog/images/icon-arr.png") no-repeat right center/contain;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mce-content-body .title-slidebox a.btn-code .open-text, .entrybody .title-slidebox a.btn-code .open-text, .wysiwyg.entry .title-slidebox a.btn-code .open-text, .tox-navobj .title-slidebox a.btn-code .open-text {
  opacity: 0;
}
.mce-content-body .title-slidebox a.btn-code .open-text:before, .entrybody .title-slidebox a.btn-code .open-text:before, .wysiwyg.entry .title-slidebox a.btn-code .open-text:before, .tox-navobj .title-slidebox a.btn-code .open-text:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: 1px;
}
.mce-content-body .title-slidebox a.btn-code:hover i, .entrybody .title-slidebox a.btn-code:hover i, .wysiwyg.entry .title-slidebox a.btn-code:hover i, .tox-navobj .title-slidebox a.btn-code:hover i {
  text-decoration: underline;
}
.mce-content-body .title-slidebox a.btn-code.active .close-text, .entrybody .title-slidebox a.btn-code.active .close-text, .wysiwyg.entry .title-slidebox a.btn-code.active .close-text, .tox-navobj .title-slidebox a.btn-code.active .close-text {
  opacity: 0;
}
.mce-content-body .title-slidebox a.btn-code.active .open-text, .entrybody .title-slidebox a.btn-code.active .open-text, .wysiwyg.entry .title-slidebox a.btn-code.active .open-text, .tox-navobj .title-slidebox a.btn-code.active .open-text {
  opacity: 1;
}
.mce-content-body .code-slidebox, .entrybody .code-slidebox, .wysiwyg.entry .code-slidebox, .tox-navobj .code-slidebox {
  display: none;
}
.mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj {
  /*コードボックス*/
}
.mce-content-body .code-box, .entrybody .code-box, .wysiwyg.entry .code-box, .tox-navobj .code-box {
  background: #000;
  color: #fff;
  padding: 10px 20px 10px 45px;
  margin: 18px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  overflow-x: scroll;
}
.mce-content-body .code-box ol, .entrybody .code-box ol, .wysiwyg.entry .code-box ol, .tox-navobj .code-box ol {
  margin-bottom: 0;
  padding: 0;
}
.mce-content-body .code-box ol li, .entrybody .code-box ol li, .wysiwyg.entry .code-box ol li, .tox-navobj .code-box ol li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.mce-content-body .code-box, .entrybody .code-box, .wysiwyg.entry .code-box, .tox-navobj .code-box {
  /*		&.code-box-sample{padding:10px 20px 10px 15px;
  			pre{overflow-x:scroll;background-image: url("/techblog/images/code-border.png");background-position: left top;    background-size: 1px 58px;word-wrap:normal}
  			ol{white-space: pre;list-style-position: inside;
  				li{list-style-position: inside;height: 29px;}
  				li.L1, li.L3, li.L5, li.L7, li.L9 { background: none}
  			}

  		}*/
}
.mce-content-body .code-box + .code-box, .entrybody .code-box + .code-box, .wysiwyg.entry .code-box + .code-box, .tox-navobj .code-box + .code-box {
  margin-top: 36px;
}
.mce-content-body .code-box + *, .entrybody .code-box + *, .wysiwyg.entry .code-box + *, .tox-navobj .code-box + * {
  margin-top: 36px;
}
.mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj {
  /*アコーディオン*/
}
.mce-content-body .slide-btn, .entrybody .slide-btn, .wysiwyg.entry .slide-btn, .tox-navobj .slide-btn {
  display: inline-block;
  border: solid 1px #000;
  padding: 12px 38px;
  position: relative;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  cursor: pointer;
  margin-bottom: 35px;
  color: #08a771;
}
.mce-content-body .slide-btn:before, .entrybody .slide-btn:before, .wysiwyg.entry .slide-btn:before, .tox-navobj .slide-btn:before {
  content: "";
  width: 7px;
  height: 12px;
  background: url("/techblog/images/icon-arr.png") no-repeat right center/contain;
  position: absolute;
  left: 18px;
  top: 2px;
  bottom: 0;
  margin: auto;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.mce-content-body .slide-btn.active:before, .entrybody .slide-btn.active:before, .wysiwyg.entry .slide-btn.active:before, .tox-navobj .slide-btn.active:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.mce-content-body .slide-content, .entrybody .slide-content, .wysiwyg.entry .slide-content, .tox-navobj .slide-content {
  padding: 0 30px;
  display: none;
}
.mce-content-body .box-attention, .entrybody .box-attention, .wysiwyg.entry .box-attention, .tox-navobj .box-attention {
  border: solid 1px #949494;
  padding: 20px 43px;
  margin-bottom: 40px;
}
.mce-content-body .box-attention .box-title, .entrybody .box-attention .box-title, .wysiwyg.entry .box-attention .box-title, .tox-navobj .box-attention .box-title {
  color: #000;
  position: relative;
}
.mce-content-body .box-attention .box-title:before, .entrybody .box-attention .box-title:before, .wysiwyg.entry .box-attention .box-title:before, .tox-navobj .box-attention .box-title:before {
  content: "";
  width: 15px;
  height: 15px;
  background: url("/techblog/images/icon-info.png") no-repeat right center/contain;
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mce-content-body .box-attention .box-text, .entrybody .box-attention .box-text, .wysiwyg.entry .box-attention .box-text, .tox-navobj .box-attention .box-text {
  margin-top: 0;
}
.mce-content-body .box-attention p, .entrybody .box-attention p, .wysiwyg.entry .box-attention p, .tox-navobj .box-attention p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.92;
  color: #ec0000;
  margin: 0;
}
.mce-content-body table tr, .mce-content-body table th, .mce-content-body table td, .entrybody table tr, .entrybody table th, .entrybody table td, .wysiwyg.entry table tr, .wysiwyg.entry table th, .wysiwyg.entry table td, .tox-navobj table tr, .tox-navobj table th, .tox-navobj table td {
  border: solid 1px #949494;
  border-collapse: collapse;
}
.mce-content-body table th, .mce-content-body table td, .entrybody table th, .entrybody table td, .wysiwyg.entry table th, .wysiwyg.entry table td, .tox-navobj table th, .tox-navobj table td {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.93;
  padding: 12px 26px;
  vertical-align: middle;
}
.mce-content-body table th, .entrybody table th, .wysiwyg.entry table th, .tox-navobj table th {
  background: #f0f0f0;
  text-align: center;
}
.mce-content-body table.table--with-image,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed], .entrybody table.table--with-image,
.entrybody table[class*=table--with-image][class*=table--image-mixed], .wysiwyg.entry table.table--with-image,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed], .tox-navobj table.table--with-image,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 40px;
}
.mce-content-body table.table--with-image tr,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] tr, .entrybody table.table--with-image tr,
.entrybody table[class*=table--with-image][class*=table--image-mixed] tr, .wysiwyg.entry table.table--with-image tr,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] tr, .tox-navobj table.table--with-image tr,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] tr {
  border: 0;
}
.mce-content-body table.table--with-image th, .mce-content-body table.table--with-image td,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] th,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] td, .entrybody table.table--with-image th, .entrybody table.table--with-image td,
.entrybody table[class*=table--with-image][class*=table--image-mixed] th,
.entrybody table[class*=table--with-image][class*=table--image-mixed] td, .wysiwyg.entry table.table--with-image th, .wysiwyg.entry table.table--with-image td,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] th,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] td, .tox-navobj table.table--with-image th, .tox-navobj table.table--with-image td,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] th,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] td {
  vertical-align: top;
}
.mce-content-body table.table--with-image img,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] img, .entrybody table.table--with-image img,
.entrybody table[class*=table--with-image][class*=table--image-mixed] img, .wysiwyg.entry table.table--with-image img,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] img, .tox-navobj table.table--with-image img,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.mce-content-body table.table--with-image p:last-child, .mce-content-body table.table--with-image ul:last-child, .mce-content-body table.table--with-image ol:last-child,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] p:last-child,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] ul:last-child,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] ol:last-child, .entrybody table.table--with-image p:last-child, .entrybody table.table--with-image ul:last-child, .entrybody table.table--with-image ol:last-child,
.entrybody table[class*=table--with-image][class*=table--image-mixed] p:last-child,
.entrybody table[class*=table--with-image][class*=table--image-mixed] ul:last-child,
.entrybody table[class*=table--with-image][class*=table--image-mixed] ol:last-child, .wysiwyg.entry table.table--with-image p:last-child, .wysiwyg.entry table.table--with-image ul:last-child, .wysiwyg.entry table.table--with-image ol:last-child,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] p:last-child,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] ul:last-child,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] ol:last-child, .tox-navobj table.table--with-image p:last-child, .tox-navobj table.table--with-image ul:last-child, .tox-navobj table.table--with-image ol:last-child,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] p:last-child,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] ul:last-child,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] ol:last-child {
  margin-bottom: 0;
}
.mce-content-body table.table--with-image a,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] a, .entrybody table.table--with-image a,
.entrybody table[class*=table--with-image][class*=table--image-mixed] a, .wysiwyg.entry table.table--with-image a,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] a, .tox-navobj table.table--with-image a,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] a {
  display: block;
}
.mce-content-body table.table--with-image.table--image-horizontal > tbody > tr > td, .entrybody table.table--with-image.table--image-horizontal > tbody > tr > td, .wysiwyg.entry table.table--with-image.table--image-horizontal > tbody > tr > td, .tox-navobj table.table--with-image.table--image-horizontal > tbody > tr > td {
  font-weight: 300;
}
.mce-content-body table.table--with-image.table--image-horizontal tr > th,
.mce-content-body table.table--with-image.table--image-horizontal tr > td, .entrybody table.table--with-image.table--image-horizontal tr > th,
.entrybody table.table--with-image.table--image-horizontal tr > td, .wysiwyg.entry table.table--with-image.table--image-horizontal tr > th,
.wysiwyg.entry table.table--with-image.table--image-horizontal tr > td, .tox-navobj table.table--with-image.table--image-horizontal tr > th,
.tox-navobj table.table--with-image.table--image-horizontal tr > td {
  width: auto;
}
.mce-content-body table.table--with-image.table--image-mixed > thead > tr > th:first-child,
.mce-content-body table.table--with-image.table--image-mixed > tbody > tr > th:first-child,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:first-child,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th:first-child, .entrybody table.table--with-image.table--image-mixed > thead > tr > th:first-child,
.entrybody table.table--with-image.table--image-mixed > tbody > tr > th:first-child,
.entrybody table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:first-child,
.entrybody table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th:first-child, .wysiwyg.entry table.table--with-image.table--image-mixed > thead > tr > th:first-child,
.wysiwyg.entry table.table--with-image.table--image-mixed > tbody > tr > th:first-child,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:first-child,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th:first-child, .tox-navobj table.table--with-image.table--image-mixed > thead > tr > th:first-child,
.tox-navobj table.table--with-image.table--image-mixed > tbody > tr > th:first-child,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:first-child,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th:first-child {
  width: 8.5em;
  min-width: 8.5em;
}
.mce-content-body table.table--with-image.table--image-mixed > tbody > tr > th,
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th, .entrybody table.table--with-image.table--image-mixed > tbody > tr > th,
.entrybody table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th, .wysiwyg.entry table.table--with-image.table--image-mixed > tbody > tr > th,
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th, .tox-navobj table.table--with-image.table--image-mixed > tbody > tr > th,
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th {
  background: #fff;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.mce-content-body table.table--with-image.table--image-mixed > thead > tr > th:not(:first-child),
.mce-content-body table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:not(:first-child), .entrybody table.table--with-image.table--image-mixed > thead > tr > th:not(:first-child),
.entrybody table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:not(:first-child), .wysiwyg.entry table.table--with-image.table--image-mixed > thead > tr > th:not(:first-child),
.wysiwyg.entry table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:not(:first-child), .tox-navobj table.table--with-image.table--image-mixed > thead > tr > th:not(:first-child),
.tox-navobj table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:not(:first-child) {
  background: #f0f0f0;
  font-weight: 500;
}
.mce-content-body .box-quote, .entrybody .box-quote, .wysiwyg.entry .box-quote, .tox-navobj .box-quote {
  background: #f0f0f0;
  padding: 47px 47px;
  position: relative;
  margin-bottom: 40px;
}
.mce-content-body .box-quote p, .entrybody .box-quote p, .wysiwyg.entry .box-quote p, .tox-navobj .box-quote p {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.92;
}
.mce-content-body .box-quote:before, .mce-content-body .box-quote:after, .entrybody .box-quote:before, .entrybody .box-quote:after, .wysiwyg.entry .box-quote:before, .wysiwyg.entry .box-quote:after, .tox-navobj .box-quote:before, .tox-navobj .box-quote:after {
  content: "";
  width: 15px;
  height: 13px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
}
.mce-content-body .box-quote:before, .entrybody .box-quote:before, .wysiwyg.entry .box-quote:before, .tox-navobj .box-quote:before {
  background-image: url("/techblog/images/icon-quote-top.png");
  left: 28px;
  top: 30px;
}
.mce-content-body .box-quote:after, .entrybody .box-quote:after, .wysiwyg.entry .box-quote:after, .tox-navobj .box-quote:after {
  background-image: url("/techblog/images/icon-quote-bottom.png");
  right: 28px;
  bottom: 30px;
}
.mce-content-body .box-tips, .mce-content-body .box-note, .entrybody .box-tips, .entrybody .box-note, .wysiwyg.entry .box-tips, .wysiwyg.entry .box-note, .tox-navobj .box-tips, .tox-navobj .box-note {
  border: solid 1px #949494;
  margin-bottom: 40px;
  padding: 22px 30px;
}
.mce-content-body .box-tips .box-title, .mce-content-body .box-note .box-title, .entrybody .box-tips .box-title, .entrybody .box-note .box-title, .wysiwyg.entry .box-tips .box-title, .wysiwyg.entry .box-note .box-title, .tox-navobj .box-tips .box-title, .tox-navobj .box-note .box-title {
  font-size: 20px;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
}
.mce-content-body .box-tips .box-text, .mce-content-body .box-note .box-text, .entrybody .box-tips .box-text, .entrybody .box-note .box-text, .wysiwyg.entry .box-tips .box-text, .wysiwyg.entry .box-note .box-text, .tox-navobj .box-tips .box-text, .tox-navobj .box-note .box-text {
  margin-top: 0;
}
.mce-content-body .box-tips p, .mce-content-body .box-note p, .entrybody .box-tips p, .entrybody .box-note p, .wysiwyg.entry .box-tips p, .wysiwyg.entry .box-note p, .tox-navobj .box-tips p, .tox-navobj .box-note p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.92;
  margin-bottom: 0;
}

.mce-content-body .toggle_content-start {
  border: none;
  position: relative;
  height: 2em;
  margin: 1em 0;
}

.mce-content-body .toggle_content-end {
  border: none;
  position: relative;
  height: 2em;
  margin: 1em 0;
}

.mce-content-body .toggle_content-start:before {
  content: "-----------------------------------詳細文ここから-----------------------------------";
  position: absolute;
  left: 0;
  top: 0;
  color: red;
}

.mce-content-body .toggle_content-end:before {
  content: "-----------------------------------詳細文ここまで-----------------------------------";
  position: absolute;
  left: 0;
  top: 0;
  color: red;
}

.mce-content-body, .wysiwyg.entry, .tox-navobj {
  max-width: 680px;
  padding: 10px;
}
.mce-content-body img, .wysiwyg.entry img, .tox-navobj img {
  max-width: 100%;
  height: auto;
}
.mce-content-body .btn-base, .wysiwyg.entry .btn-base, .tox-navobj .btn-base {
  width: 270px;
  height: 44px;
  background: #000;
  display: block;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
  line-height: 1;
  border: 1px solid #efefef;
  color: #fff;
}
.mce-content-body .btn-base:before, .wysiwyg.entry .btn-base:before, .tox-navobj .btn-base:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
}
.mce-content-body .btn-base span, .wysiwyg.entry .btn-base span, .tox-navobj .btn-base span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 12px 0 0 10px;
  text-align: center;
  z-index: 10;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.mce-content-body .btn-base span:before, .wysiwyg.entry .btn-base span:before, .tox-navobj .btn-base span:before {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 21px;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  background: #fff;
  opacity: 1;
}
.mce-content-body .btn-base i, .wysiwyg.entry .btn-base i, .tox-navobj .btn-base i {
  font-size: 15px;
  color: #fff;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.mce-content-body .btn-base:hover, .wysiwyg.entry .btn-base:hover, .tox-navobj .btn-base:hover {
  text-decoration: none !important;
}
.mce-content-body ul, .wysiwyg.entry ul, .tox-navobj ul {
  list-style: none;
  padding-left: 0;
}
.mce-content-body ul li, .wysiwyg.entry ul li, .tox-navobj ul li {
  list-style: none;
}

@media (max-width: 768px) {
  /* -------------     commom      -------------*/
  .techblog .inner-archive {
    width: 100%;
  }
  .techblog .inner-archive .item {
    min-height: inherit;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 0 0;
    border-right: none;
    border-left: none;
  }
  .techblog .inner-archive .item + .item {
    margin: 7.227vw 0 0;
  }
  .techblog .inner-archive .item > a {
    display: block;
    width: 34.18vw;
    height: 41.016vw;
    padding: 5.859vw 0 5.859vw 4.883vw;
  }
  .techblog .inner-archive .item .thumb {
    width: 29.297vw;
    height: 29.297vw;
  }
  .techblog .inner-archive .item .thumb:before {
    content: none;
  }
  .techblog .inner-archive .item .detail {
    width: 100%;
    padding: 5.859vw 4.883vw 5.859vw 4.883vw;
    width: calc(100% - 29.297vw);
  }
  .techblog .inner-archive .item .detail:before {
    display: none;
  }
  .techblog .inner-archive .item .detail .archive-category {
    display: inline-block;
    letter-spacing: 0.05em;
    min-width: 22.266vw;
    text-align: center;
    margin-right: 4.395vw;
  }
  .techblog .inner-archive .item .detail .archive-category a {
    font-size: 2.734vw;
    padding: 2vw 1.953vw 1.5vw;
  }
  .techblog .inner-archive .item .detail p.archive-title {
    margin: 4.5vw 0 3vw 0;
    letter-spacing: 0.05em;
    width: 100%;
    font-size: 2.93vw;
  }
  .techblog .inner-archive .item .detail p.archive-title a {
    font-size: 2.93vw;
    line-height: 1.5;
  }
  .techblog .inner-archive .item .detail time.sp-item {
    font-size: 3.125vw;
    letter-spacing: 0.05em;
    display: inline-block !important;
    padding: 0 0 0;
  }
  .techblog .inner-archive .item .detail .archive-tags {
    margin: 2.93vw 0 0 -1.465vw;
  }
  .techblog .inner-archive .item .detail .archive-tags li {
    margin: 1.465vw;
  }
  .techblog .inner-archive .item .detail .archive-tags li a {
    font-size: 2.344vw;
    letter-spacing: 0.05em;
    padding: 0 1.953vw;
  }
  .techblog .inner-archive .item .detail .archive-tags li a:hover {
    opacity: 1;
  }
  .techblog .inner-archive .item:hover .thumb span {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .techblog .inner-sidenav {
    width: 100%;
    margin: 0;
  }
  .techblog .inner-sidenav .archive-links {
    padding: 9.766vw 13.477vw 7.422vw;
  }
  .techblog .inner-sidenav h3 {
    font-size: 4.102vw;
    margin: 0 0 3.906vw;
  }
  .techblog .inner-sidenav .item {
    margin-bottom: 8.301vw;
  }
  .techblog .inner-sidenav .item-about {
    padding: 9.766vw 13.477vw 7.422vw;
    margin-bottom: 4.883vw;
  }
  .techblog .inner-sidenav .item-about p {
    font-size: 2.93vw;
    letter-spacing: 0.05em;
  }
  .techblog .inner-sidenav .item-categories li, .techblog .inner-sidenav .item-archives li {
    padding: 0 0 0 11.035vw;
  }
  .techblog .inner-sidenav .item-categories li:after, .techblog .inner-sidenav .item-archives li:after {
    width: 3.906vw;
    left: 3.516vw;
    top: 2.441vw;
  }
  .techblog .inner-sidenav .item-categories li a, .techblog .inner-sidenav .item-archives li a {
    font-size: 3.125vw;
  }
  .techblog .inner-sidenav .item-categories li + li, .techblog .inner-sidenav .item-archives li + li {
    margin-top: 3.906vw;
  }
  .techblog .inner-sidenav .item-tag {
    margin-bottom: 0;
  }
  .techblog .inner-sidenav .item-tag ul {
    margin: 0 -1.465vw;
  }
  .techblog .inner-sidenav .item-tag li {
    margin: 1.465vw;
  }
  .techblog .inner-sidenav .item-tag li a {
    font-size: 2.93vw;
    letter-spacing: 0.05em;
    padding: 0 1.953vw;
  }
  .techblog .inner-sidenav .item-tag li a:hover {
    opacity: 1;
  }
  .techblog .inner-sidenav .btn-recruit {
    width: 86.426vw;
    height: 32.813vw;
    background: url("/techblog/images/btn-recruit-bg@sp.jpg") no-repeat right top/cover;
    padding: 0 6.836vw;
    margin: 14.648vw auto 0;
  }
  .techblog .inner-sidenav .btn-recruit:hover {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  .techblog .inner-sidenav .btn-recruit:after {
    width: 14.648vw;
  }
  .techblog .inner-sidenav .btn-recruit .large {
    font-size: 8.887vw;
    padding-right: 4.297vw;
  }
  .techblog .inner-sidenav .btn-recruit .min {
    font-size: 3.906vw;
  }
  /* -------------     common end      -------------*/
  /* -------------     top      -------------*/
  .techblog main {
    width: auto;
    padding: 0 0 27.93vw;
  }
  .techblog main .sec-slider {
    margin: 0 0 14.648vw;
    padding-top: 13.281vw;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide {
    width: 100% !important;
    height: 48.828vw;
    padding: 0;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap {
    overflow: hidden;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail {
    background: url("/techblog/images/slider-bg@sp.jpg") no-repeat right top/cover;
    padding: 7.324vw 2.441vw 3.906vw 4.883vw;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category {
    font-size: 2.441vw;
    display: inline-block;
    padding: 1.367vw 1.953vw;
    letter-spacing: 0.05em;
    min-width: 15.625vw;
    text-align: center;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title {
    font-size: 3.516vw;
    margin: 0 0 2.93vw;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title a:hover {
    text-decoration: underline;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time {
    font-size: 2.734vw;
    letter-spacing: 0.05em;
    margin-bottom: 0.977vw;
    display: block;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .text {
    font-size: 1.758vw;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags {
    display: none;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail {
    padding: 8.105vw 0 0;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo {
    width: 7.031vw;
    height: 19.629vw;
    margin: 0 auto;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail h2 {
    font-size: 2.441vw;
    margin: 0.977vw 0 0;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text {
    font-size: 1.758vw;
    margin: 4.883vw 0 0;
  }
  .techblog main .sec-slider .swiper-container .swiper-slide a:hover .thumb span {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .techblog main .sec-slider .swiper-nav-wrap {
    width: 43.945vw;
    height: 2.051vw;
    margin: 3.418vw auto 0;
  }
  .techblog main .sec-slider .swiper-nav-wrap:after {
    width: 1.66vw;
    height: 1.563vw;
    position: absolute;
    left: 21.1vw;
    top: -0.127vw;
    background-size: auto 100%;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next {
    width: 17.09vw;
    height: 1.465vw;
    font-size: 2.637vw;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover {
    opacity: 1;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:after {
    content: none;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span {
    display: block;
    width: 100%;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i {
    width: 9.473vw;
    top: 0.488vw;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i {
    left: 7.813vw;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:before {
    -webkit-animation: none;
            animation: none;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:after {
    -webkit-animation: none;
            animation: none;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i {
    right: 7.813vw;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:before {
    -webkit-animation: none;
            animation: none;
  }
  .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:after {
    -webkit-animation: none;
            animation: none;
  }
  .techblog main .sec-archives {
    width: 100%;
    background: #fff;
    margin: 0 auto;
    padding: 9.766vw 0;
  }
  .techblog main .sec-archives h2 {
    font-size: 4.688vw;
    margin: 0 0 7.422vw;
    padding: 0 6.836vw;
  }
  .techblog main .sec-archives .wrap {
    display: block;
  }
  .techblog main .sec-archives .btn-base {
    margin: 14.648vw auto;
  }
  .ios .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title {
    letter-spacing: -0.02em;
  }
  /* ------------- top - end -------------*/
  /* -------------     detail      -------------*/
  .techblog.detail main {
    padding: 9.766vw 0 43.262vw;
  }
  .techblog.detail main .content-wrap {
    width: 100%;
    margin-bottom: 0;
  }
  .techblog.detail main .content-wrap .content-box {
    width: 100%;
    padding: 0;
    display: block;
    background: none;
  }
  .techblog.detail main .content-wrap .entry-wrap {
    width: 100%;
  }
  .techblog.detail main .content-wrap .entry-wrap .wrap-sp-bg {
    width: 100%;
    padding: 10.156vw 4.883vw 13.184vw;
    display: block;
    background: #fff;
  }
  .techblog.detail main .content-wrap .entry-wrap img {
    max-width: 100%;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header {
    width: 100%;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 0 2.441vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top time {
    font-size: 3.125vw;
    margin: 0 4.297vw 0 0;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b {
    height: 6.152vw;
    margin: 0 4.297vw 0 0;
    min-width: 22.266vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b:hover {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a {
    padding: 1.953vw 1.953vw 1.953vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a span {
    font-size: 2.734vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom {
    padding: 0 0 8.789vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom h1 {
    font-size: 4.688vw;
    margin-bottom: 3.906vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -1.465vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li {
    margin: 1.465vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a {
    font-size: 2.93vw;
    letter-spacing: 0.05em;
    padding: 0 1.953vw;
  }
  .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a:hover {
    opacity: 1;
  }
  .techblog.detail main .content-wrap .entry-wrap hr {
    height: 0;
    margin: 0;
  }
  .techblog.detail main .content-wrap .writer_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5.078vw 5.469vw;
    margin: 9.473vw 0 0;
  }
  .techblog.detail main .content-wrap .writer_box .profile_img {
    width: 24.414vw;
    height: 24.414vw;
  }
  .techblog.detail main .content-wrap .writer_box .text {
    width: calc(100% - 24.414vw);
    padding: 1.367vw 0 0 3.223vw;
  }
  .techblog.detail main .content-wrap .writer_box .text .name {
    font-size: 2.93vw;
    margin-bottom: 17px;
  }
  s .techblog.detail main .content-wrap .writer_box .text .name a:hover {
    text-decoration: underline;
  }
  .techblog.detail main .content-wrap .writer_box .text .detail {
    font-size: 2.734vw;
    font-weight: 300;
    line-height: 2.25;
  }
  .techblog.detail main .content-wrap .btn-base {
    text-decoration: none;
    margin: 0;
  }
  .techblog.detail main .content-wrap .btn-base span {
    padding: 3.125vw 0 0 1.953vw;
  }
  .techblog.detail main .content-wrap .btn-base:hover {
    text-decoration: none !important;
  }
  .techblog.detail main .pager-wrap {
    position: relative;
    left: auto;
    bottom: auto;
    margin-bottom: 0;
    padding-bottom: 22.461vw;
  }
  .techblog.detail main .pager {
    width: 44.434vw;
    height: 2.539vw;
    margin: 10.742vw auto 0;
    position: relative;
  }
  .techblog.detail main .pager:after {
    width: 1.66vw;
    height: 1.563vw;
    position: absolute;
    left: 21.1vw;
    top: 0.288vw;
    background-size: auto 100%;
  }
  .techblog.detail main .pager .link_before, .techblog.detail main .pager .link_next {
    width: 17.09vw;
    height: 1.465vw;
    font-size: 2.637vw;
  }
  .techblog.detail main .pager .link_before:hover, .techblog.detail main .pager .link_next:hover {
    opacity: 1;
  }
  .techblog.detail main .pager .link_before:after, .techblog.detail main .pager .link_next:after {
    content: none;
  }
  .techblog.detail main .pager .link_before span, .techblog.detail main .pager .link_next span {
    display: block;
    width: 100%;
  }
  .techblog.detail main .pager .link_before i, .techblog.detail main .pager .link_next i {
    display: block;
    width: 9.473vw;
    height: 1px;
    top: 1.288vw;
  }
  .techblog.detail main .pager .link_before {
    background-image: none;
    text-align: left;
    position: absolute;
  }
  .techblog.detail main .pager .link_before i {
    left: 7.52vw;
  }
  .techblog.detail main .pager .link_before i:after {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
  }
  .techblog.detail main .pager .link_before:hover i:before {
    -webkit-animation: none;
            animation: none;
  }
  .techblog.detail main .pager .link_before:hover i:after {
    -webkit-animation: none;
            animation: none;
  }
  .techblog.detail main .pager .link_next {
    background-image: none;
    text-align: right;
    position: absolute;
    right: 0;
  }
  .techblog.detail main .pager .link_next span {
    position: absolute;
    right: 0;
    top: 0;
  }
  .techblog.detail main .pager .link_next i {
    right: 7.52vw;
  }
  .techblog.detail main .pager .link_next i:before, .techblog.detail main .pager .link_next i:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
  }
  .techblog.detail main .pager .link_next i:after {
    -webkit-transform: translateX(-101%);
            transform: translateX(-101%);
  }
  .techblog.detail main .pager .link_next:hover i:before {
    -webkit-animation: none;
            animation: none;
  }
  .techblog.detail main .pager .link_next:hover i:after {
    -webkit-animation: none;
            animation: none;
  }
  .techblog.detail main .btn-blogtop {
    margin: 14.648vw auto 0 !important;
  }
  .techblog.detail main .btn-blogtop span {
    padding-left: 1.953vw;
    padding-right: 0;
    text-align: center;
  }
  .techblog.detail main .btn-blogtop:hover span, .techblog.detail main .btn-blogtop:hover i {
    color: #fff !important;
  }
  .techblog.detail main .btn-mid-recruit {
    width: 86.426vw;
    height: 32.813vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url("/techblog/images/btn-recruit-mid-bg@sp.jpg") no-repeat left top/cover;
    padding: 0 7.813vw;
    font-size: 3.809vw;
    margin: 10.742vw auto 0;
  }
  .techblog.detail main .btn-mid-recruit:hover span {
    opacity: 1;
  }
  .techblog.detail main .btn-mid-recruit:after {
    width: 14.648vw;
  }
  .entrybody p + p, .entrybody p + h2, .entrybody p + h3, .entrybody p + h4, .entrybody p + figure, .entrybody p + table, .entrybody p + div, .entrybody p + ul, .entrybody p + ol {
    margin-top: 1em;
  }
  .entrybody p, .entrybody li {
    font-size: 2.93vw;
  }
  .entrybody a {
    color: #08a771;
  }
  .entrybody a:hover {
    text-decoration: underline;
  }
  .entrybody h2 {
    font-size: 4.199vw;
    padding: 0.977vw 0 0.977vw 3.906vw;
  }
  .entrybody h2:before {
    width: 1.855vw;
  }
  .entrybody h3 {
    font-size: 3.711vw;
    padding: 0.977vw 3.906vw;
  }
  .entrybody h3:before {
    width: 1.855vw;
  }
  .entrybody h4 {
    font-size: 3.516vw;
    padding: 2.734vw 3.906vw;
  }
  .entrybody h2, .entrybody h3, .entrybody h4 {
    margin: 0 0 1em;
    letter-spacing: 0.1em;
  }
  .entrybody {
    /*画像ボックス*/
  }
  .entrybody img {
    margin-top: 2.93vw;
    margin-bottom: 2.93vw;
  }
  .entrybody figure img {
    max-width: 100%;
    height: auto;
  }
  .entrybody figure figcaption {
    font-size: 3.125vw;
    letter-spacing: 0.1em;
    margin-top: 0.977vw;
  }
  .entrybody .fig-box-modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .entrybody .fig-box-modal a {
    width: calc((100% - 1.367vw) / 2);
    margin: 2.93vw 0;
  }
  .entrybody .fig-box-modal a img {
    display: block;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .entrybody .fig-box .caption {
    font-size: 3.125vw;
    letter-spacing: 0.1em;
    margin-top: 0.977vw;
  }
  .entrybody .fig-box figure {
    width: calc((100% - 1.367vw) / 2);
    margin: 2.93vw 0;
  }
  .entrybody .fig-box figure img {
    display: block;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box.fig-two figure {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 2.93vw -0.684vw;
  }
  .entrybody .fig-box.fig-two figure img {
    width: calc((100% - 2.734vw) / 2);
    display: inline;
    margin: 0 0.684vw;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box.fig-two figure img + img {
    margin-left: 0.684vw;
  }
  .entrybody .fig-box.fig-two figure figcaption {
    width: 100%;
  }
  .entrybody .fig-box.fig-two-modal div {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 2.93vw -0.684vw;
  }
  .entrybody .fig-box.fig-two-modal div a {
    width: calc((100% - 2.734vw) / 2);
    display: inline;
    margin: 0 0.684vw;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box.fig-two-modal div a + a {
    margin-left: 0.684vw;
  }
  .entrybody .fig-box.fig-three figure {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 2.93vw -0.684vw;
  }
  .entrybody .fig-box.fig-three figure img {
    width: calc((100% - 2.734vw) / 2);
    display: inline;
    margin: 0 0.684vw;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box.fig-three figure img + img {
    margin: 0 0.684vw;
  }
  .entrybody .fig-box.fig-three figure img:nth-child(3) {
    margin-top: 0.684vw;
  }
  .entrybody .fig-box.fig-three figure figcaption {
    width: 100%;
    margin-bottom: 0;
  }
  .entrybody .fig-box.fig-three-modal div {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 2.93vw -0.684vw;
  }
  .entrybody .fig-box.fig-three-modal div a {
    width: calc((100% - 2.734vw) / 2);
    display: inline;
    margin: 0 0.684vw;
    margin-bottom: 0;
    margin-top: 0;
  }
  .entrybody .fig-box.fig-three-modal div a img {
    width: 100%;
    margin: 0;
  }
  .entrybody .fig-box.fig-three-modal div a + a {
    margin: 0 0.684vw;
  }
  .entrybody .fig-box.fig-three-modal div a:nth-child(3) {
    margin-top: 0.684vw;
  }
  .entrybody .fig-one {
    padding-bottom: 2.93vw;
  }
  .entrybody {
    /*リスト*/
  }
  .entrybody ul, .entrybody ol {
    margin-bottom: 1em;
  }
  .entrybody ul {
    list-style: none;
  }
  .entrybody ul li {
    padding: 0 0 0 3.223vw;
    position: relative;
    list-style: none;
  }
  .entrybody ol {
    padding: 0 0 0 3.906vw;
  }
  .entrybody ol > li {
    list-style: decimal;
  }
  .entrybody ol > li > ul {
    margin-top: 0;
    padding-left: 0;
  }
  .entrybody ol > li > ul > li {
    list-style: none;
    padding-left: 1em;
  }
  .entrybody ul > li > ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1em;
  }
  .entrybody {
    /*コードのスライドボタン*/
  }
  .entrybody .title-slidebox {
    font-size: 2.93vw;
    padding: 0.977vw 2.734vw;
    position: relative;
    margin: 0 0 4.102vw;
  }
  .entrybody .title-slidebox a.btn-code {
    width: 37.109vw;
    height: 100%;
    position: absolute;
    right: 3.418vw;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .entrybody .title-slidebox a.btn-code i {
    font-style: normal;
    position: absolute;
    padding: 1vw 0 0 3.125vw;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .entrybody .title-slidebox a.btn-code i:before {
    width: 1.367vw;
    height: 2.441vw;
  }
  .entrybody .title-slidebox a.btn-code .open-text {
    opacity: 0;
  }
  .entrybody .title-slidebox a.btn-code .open-text:before {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    top: 1px;
  }
  .entrybody .title-slidebox a.btn-code:hover i {
    text-decoration: underline;
  }
  .entrybody .title-slidebox a.btn-code.active .close-text {
    opacity: 0;
  }
  .entrybody .title-slidebox a.btn-code.active .open-text {
    opacity: 1;
  }
  .entrybody .code-slidebox {
    display: none;
  }
  .entrybody {
    /*コードボックス*/
  }
  .entrybody .code-box {
    padding: 1.953vw 1.953vw 1.953vw 8.953vw;
    margin: 2.344vw 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    overflow-x: scroll;
  }
  .entrybody .code-box ol {
    margin-bottom: 0;
    padding: 0;
  }
  .entrybody .code-box ol li {
    font-size: 2.93vw;
  }
  .entrybody .code-box {
    /*						&.code-box-sample{padding:1.953vw 1.953vw 1.953vw 1.953vw;
    							pre{overflow:auto;background-position: left top;    background-size: 1px svw(110);}
    							ol{
    								li{font-size: 2.93vw;height: svw(55);}
    								li.L1, li.L3, li.L5, li.L7, li.L9 { background: none}
    							}

    						}*/
  }
  .entrybody .code-box + .code-box {
    margin-top: 4.688vw;
  }
  .entrybody .code-box + * {
    margin-top: 4.688vw;
  }
  .entrybody {
    /*アコーディオン*/
  }
  .entrybody .slide-btn {
    padding: 1.953vw 6.445vw;
    position: relative;
    font-size: 2.93vw;
    margin-bottom: 4.688vw;
  }
  .entrybody .slide-btn:before {
    width: 1.367vw;
    height: 2.441vw;
    background: url("/techblog/images/icon-arr.png") no-repeat right center/contain;
    position: absolute;
    left: 3.125vw;
    top: -0.023vw;
    bottom: 0;
    margin: auto;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .entrybody .slide-btn.active:before {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .entrybody .slide-content {
    padding: 0 5.859vw;
    display: none;
  }
  .entrybody .box-attention {
    padding: 4.395vw 5.664vw;
    margin-bottom: 6.836vw;
  }
  .entrybody .box-attention .box-title {
    color: #000;
    position: relative;
  }
  .entrybody .box-attention .box-title:before {
    content: "";
    width: 2.93vw;
    height: 2.93vw;
    left: -3.613vw;
  }
  .entrybody .box-attention .box-text {
    margin-top: 0;
  }
  .entrybody .box-attention p {
    font-size: 2.734vw;
    font-weight: 300;
    line-height: 1.92;
    color: #ec0000;
    margin: 0;
  }
  .entrybody table {
    width: 100%;
  }
  .entrybody table th, .entrybody table td {
    font-size: 2.441vw;
    padding: 1.758vw 3.418vw;
  }
  .entrybody table.table--with-image,
  .entrybody table[class*=table--with-image][class*=table--image-mixed] {
    margin-bottom: 6.836vw;
  }
  .entrybody table.table--with-image th, .entrybody table.table--with-image td,
  .entrybody table[class*=table--with-image][class*=table--image-mixed] th,
  .entrybody table[class*=table--with-image][class*=table--image-mixed] td {
    padding: 1.758vw 2.344vw;
  }
  .entrybody table.table--with-image.table--image-mixed > thead > tr > th:first-child,
  .entrybody table.table--with-image.table--image-mixed > tbody > tr > th:first-child,
  .entrybody table[class*=table--with-image][class*=table--image-mixed] > thead > tr > th:first-child,
  .entrybody table[class*=table--with-image][class*=table--image-mixed] > tbody > tr > th:first-child {
    width: 8.5em;
    min-width: 8.5em;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)),
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)),
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2.539vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)):before,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)):before,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)):before {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 8.203vw;
    height: 100%;
    margin-left: auto;
    background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.96)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)):after,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)):after,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)):after {
    content: "横にスクロールできます";
    position: sticky;
    right: 1.172vw;
    top: 1.172vw;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 4.297vw;
    padding: 0.781vw 1.758vw;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 1.953vw;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > thead,
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > tbody,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > thead,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > tbody,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > thead,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > tbody {
    display: table;
    table-layout: fixed;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > tbody > tr:first-child > th,
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > tbody > tr:first-child > td,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > tbody > tr:first-child > th,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > tbody > tr:first-child > td,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > tbody > tr:first-child > th,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > tbody > tr:first-child > td {
    border-top: 0;
  }
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > thead,
  .entrybody table.table--with-image.table--image-horizontal:has(tr > :nth-child(3)) > tbody {
    width: 140%;
    min-width: 140%;
  }
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > thead,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > tbody,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > thead,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > tbody {
    width: 130%;
    min-width: 130%;
  }
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > thead > tr > :first-child,
  .entrybody table.table--with-image.table--image-mixed:has(tbody tr td:nth-of-type(3)) > tbody > tr > :first-child,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > thead > tr > :first-child,
  .entrybody table[class*=table--with-image][class*=table--image-mixed]:has(tbody tr td:nth-of-type(3)) > tbody > tr > :first-child {
    width: 8.5em;
    min-width: 8.5em;
  }
  .entrybody .box-quote {
    padding: 6.836vw;
    position: relative;
    margin-bottom: 6.836vw;
  }
  .entrybody .box-quote p {
    margin-bottom: 0;
    font-size: 2.734vw;
    font-weight: 300;
    line-height: 1.92;
  }
  .entrybody .box-quote:before, .entrybody .box-quote:after {
    width: 2.148vw;
    height: 1.758vw;
  }
  .entrybody .box-quote:before {
    left: 3.125vw;
    top: 4.297vw;
  }
  .entrybody .box-quote:after {
    right: 4.297vw;
    bottom: 3.125vw;
  }
  .entrybody .box-tips, .entrybody .box-note {
    margin-bottom: 7.324vw;
    padding: 4.395vw 5.664vw;
  }
  .entrybody .box-tips .box-title, .entrybody .box-note .box-title {
    font-size: 3.418vw;
  }
  .entrybody .box-tips .box-text, .entrybody .box-note .box-text {
    margin-top: 0;
  }
  .entrybody .box-tips p, .entrybody .box-note p {
    font-size: 2.734vw;
  }
  .entrybody .btn-base {
    width: 66.895vw;
    height: 11.035vw;
  }
  .entrybody .btn-base span {
    padding: 3.5vw 0 0 1.953vw !important;
  }
  .entrybody .btn-base span:before {
    width: 10.742vw;
    height: 0.391vw;
    top: 5.176vw;
  }
  .entrybody .btn-base i {
    font-size: 3.711vw;
    font-weight: 300;
  }
  .entrybody .btn-base:hover span i {
    color: #fff !important;
  }
  /* ------------- detail - end -------------*/
}
/*MORE用*/
.techblog .inner-archive .is-btn-hidden {
  display: none;
}
.techblog .inner-archive .item:before, .techblog .inner-archive .item:after {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.techblog .inner-archive .item .thumb, .techblog .inner-archive .item .detail {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.techblog .inner-archive .item.is-hidden {
  display: none;
}
.techblog .inner-archive .item.is-hidden:before, .techblog .inner-archive .item.is-hidden:after {
  opacity: 0;
}
.techblog .inner-archive .item.is-hidden .thumb, .techblog .inner-archive .item.is-hidden .detail {
  opacity: 0;
}

/* ==========================================================
   横並び動画比較モジュール (movie-compare) 20260904
   MT定型文へ移行予定のため、このブロックのみで完結するように記述
   ・元は techblog22.css にあったが、定型文編集画面(TinyMCE)の
     プレビューiframeは p_techblog.css のみを読み込み、
     techblog22.css は読み込まないため、編集画面にも反映されるよう
     こちらへ移動した（このファイルはCSS直接編集が正式運用のため、
     SCSSからの再ビルドで消える心配は無し）
   ・台座の配色: 地 #eff2f3 / 罫線（外枠・区切り線とも）#dfe2e3
   ・2カラムはCSS Gridで等幅固定。flexのstretch/flex-basis:0起因の
     高さ0バグを避けるため採用。SPでも横並びのまま崩さない仕様。
   ・align-items:startで、キャプションの行数差があっても動画の
     天端位置がズレないようにしている
   ・キャプション文字の上側の余白(video→caption間, 15px/4vw)と
     下側の余白(caption→台座下端, 同じく15px/4vw)を揃えている
   ・記事本文側のデフォルト装飾（p, li の font-size/line-height、
     div+div, div+p, p+p 等の margin-top:1em リセットなど）は
     .entrybody / .mce-content-body の単一クラスだけでなく、
     プレビューモーダル（定型文挿入ダイアログ）側の .wysiwyg.entry
     のように2クラス複合セレクタ（詳細度 0,2,1〜0,2,2）で
     効いてくる場所もある。素の「.movie-compare 子孫」2階層
     （0,2,0）ではこれに負けて margin / font-size 等が上書きされる
     （動画の天端がズレる、文字が太字化する等の不具合の実例あり）。
     そのためクラスを二重指定して詳細度を (0,3,0) まで底上げし、
     どの画面（記事ページ／定型文編集画面／記事作成の挿入プレビュー）
     でも確実に上回るようにしている。
   ========================================================== */
.movie-compare {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    column-gap: 16px;
    margin: 30px 0;
    padding: 8px 15px 15px;
    background: #eff2f3;
    border: 1px solid #dfe2e3;
    border-radius: 0;
}
/* カラム間の区切り罫線（縦・台座の内枠に対して天地フルブリード） */
.movie-compare::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #dfe2e3;
    transform: translateX(-50%);
}
.movie-compare .movie-compare-item.movie-compare-item {
    min-width: 0;
    margin: 0;
}
.movie-compare .movie-compare-media.movie-compare-media {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #333;
    line-height: 0;
}
.movie-compare .movie-compare-media.movie-compare-media video,
.movie-compare .movie-compare-media.movie-compare-media img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.movie-compare .movie-compare-caption.movie-compare-caption {
    margin: 15px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-align: center;
    color: #333;
}
@media (max-width: 768px) {
    /* SPも横並びを維持するため、grid-template-columns はここでは
       上書きしない（repeat(2, 1fr) のまま）。縦罫線もそのまま出す */
    .movie-compare {
        margin: 6.4vw 0;
        padding: 2.133vw 4vw 4vw;
    }
    .movie-compare .movie-compare-caption.movie-compare-caption {
        margin: 4vw 0 0;
        font-size: 3.125vw;
    }
}
/* ======= movie-compare end ======= */


/* 202609 画像1・キャプション・モーダル（.fig-one-modal）のキャプション未装飾を修正
   .fig-box .caption（画像2/3系）と同じ見た目に揃える。
   .fig-one-modal限定のセレクタなので画像二列(.fig-box系)やフォームには影響しない。
   adjustment.cssではなくこちら(p_techblog.css)に置く理由：
   「記事の作成」画面の定型文挿入プレビューはp_techblog.cssしか読み込まず、
   adjustment.cssは反映されないため（movie-compareモジュールと同じ理由・前例）。
   ・.entrybody だけでなく .mce-content-body / .wysiwyg.entry / .tox-navobj も
     併記する（既存の .fig-box .caption ルールと同じ書き方）。
     「定型文の挿入」ダイアログのプレビューは body class が "wysiwyg entry" で、
     .entrybody 単体では一致しないため、これが無いと当該プレビューだけ
     反映されない不具合になる（実機検証で確認済み） */
.mce-content-body .fig-one-modal .caption,
.entrybody .fig-one-modal .caption,
.wysiwyg.entry .fig-one-modal .caption,
.tox-navobj .fig-one-modal .caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.93;
    letter-spacing: 1.4px;
    text-align: left;
    color: #a8a8a8;
    margin-top: 15px;
}
/* .entrybody img { margin-top:20px; margin-bottom:20px; } という汎用ルールが
   .fig-one-modal の画像にもかかってしまい、画像とキャプションの間が
   15px(caption側) + 20px(img側) = 35px になっていた（画像2系は
   .fig-box-modal a img で既に margin:0 に打ち消されており15pxのまま）。
   画像1・キャプション（.fig-one）・画像2系（.fig-box-modal）と同じ15pxに揃える */
.mce-content-body .fig-one-modal img,
.entrybody .fig-one-modal img,
.wysiwyg.entry .fig-one-modal img,
.tox-navobj .fig-one-modal img {
    margin-top: 0;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .mce-content-body .fig-one-modal .caption,
    .entrybody .fig-one-modal .caption,
    .wysiwyg.entry .fig-one-modal .caption,
    .tox-navobj .fig-one-modal .caption {
        font-size: 3.125vw;
        letter-spacing: 0.1em;
        margin-top: 0.977vw;
    }
}