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

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

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

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

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

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

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

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/* finalcode toppage mainvisual slick
------------------------------------------------*/
.slick-dotted.slick-slider {
  margin-bottom: 0; }

/* dot */
.dot-class {
  position: relative;
  text-align: center; }
  .dot-class li {
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 4px 10px;
    background-color: #327d69;
    border: 0;
    border-radius: 100%;
    cursor: pointer; }
    .dot-class li button {
      display: none; }
    .dot-class li.slick-active {
      width: 12px;
      height: 12px;
      margin: 0 4px;
      padding: 0;
      border: solid 1px #327d69;
      background-color: #fff; }

.js-slider-toppage-mainvisual .dot-class {
  bottom: 30px; }
  @media only screen and (max-width: 768px) {
    .js-slider-toppage-mainvisual .dot-class {
      padding: 10px; } }

.js-slider-toppage-usecase .dot-class {
  bottom: 0; }

/* arrow */
.js-slider-toppage-mainvisual .slick-arrow {
  position: absolute;
  top: 160px;
  z-index: 2;
  width: 22px;
  height: 41px;
  background-color: inherit;
  text-indent: 40px;
  white-space: nowrap;
  overflow: hidden; }
.js-slider-toppage-mainvisual .slick-prev {
  left: calc(50% - 500px);
  background: url(../img/top/btn_mainvisual_slick_prev.png) center center no-repeat; }
.js-slider-toppage-mainvisual .slick-next {
  right: calc(50% - 500px);
  background: url(../img/top/btn_mainvisual_slick_next.png) center center no-repeat; }

.l-content--usecases .slick-arrow {
  position: absolute;
  top: 160px;
  z-index: 2;
  width: 22px;
  height: 41px;
  background-color: inherit;
  text-indent: 40px;
  white-space: nowrap;
  overflow: hidden; }
  @media only screen and (max-width: 768px) {
    .l-content--usecases .slick-arrow {
      top: 120px; } }
.l-content--usecases .slick-prev {
  left: -30px;
  background: url(../img/top/btn_mainvisual_slick_prev.png) center center no-repeat; }
  @media only screen and (min-width: 0) and (max-width: 1200px) {
    .l-content--usecases .slick-prev {
      left: 20px; } }
.l-content--usecases .slick-next {
  right: -30px;
  background: url(../img/top/btn_mainvisual_slick_next.png) center center no-repeat; }
  @media only screen and (min-width: 0) and (max-width: 1200px) {
    .l-content--usecases .slick-next {
      right: 20px; } }

/*=============================
topページ
=============================*/
/* common parts
------------------------------*/
.wrapper {
  overflow: hidden; }

.l-content-title {
  position: relative;
  padding-bottom: 40px;
  text-align: center;
  font-size: 46px;
  font-size: 4.6rem;
  font-weight: 800;
  font-family: 'Open Sans Condensed';
  color: #327d69;
  line-height: 1.1; }
  @media only screen and (max-width: 768px) {
    .l-content-title {
      font-size: 32px;
      font-size: 3.2rem; } }
  .l-content-title:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background-color: #327d69; }

.l-content__inner {
  width: auto; }

.btn {
  display: inline-block;
  text-align: center; }
  .btn a,
  .btn span {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #327d69;
    color: #fff; }
    .btn a:after,
    .btn span:after {
      content: "";
      display: inline-block;
      margin-left: 5px;
      width: 0;
      height: 0;
      border-top: solid 6px #fff;
      border-left: solid 5px transparent;
      border-right: solid 5px transparent; }

.btn--main-visual {
  width: 400px;
  height: 60px; }
  @media only screen and (max-width: 768px) {
    .btn--main-visual {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      height: auto; } }
  .btn--main-visual a {
    padding: 10px 0 0;
    font-size: 28px;
    font-size: 2.8rem;
    font-family: 'Open Sans Condensed';
    font-weight: 800;
    background-color: #f9a94b;
    border-radius: 5px;
    box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.25); }
    @media only screen and (max-width: 768px) {
      .btn--main-visual a {
        padding: 10px; } }
    .btn--main-visual a:after {
      content: "";
      display: inline-block;
      margin-left: 12px;
      width: 0;
      height: 0;
      border-left: solid 8px #fff;
      border-top: solid 8px transparent;
      border-bottom: solid 8px transparent; }
    .btn--main-visual a:hover {
      opacity: 0.8; }

.btn--product,
.btn--usecases {
  width: 100%;
  text-align: center; }
  .btn--product a,
  .btn--usecases a {
    width: 420px;
    height: 60px;
    padding: 13px 0 0;
    background-color: #327d69;
    border: solid 1px #327d69;
    color: #fff;
    font-size: 22px;
    font-size: 2.2rem;
    font-family: 'Open Sans Condensed';
    font-weight: 800; }
    @media only screen and (max-width: 768px) {
      .btn--product a,
      .btn--usecases a {
        width: 80%;
        height: auto;
        max-width: 420px;
        padding: 0.5em; } }
    .btn--product a:after,
    .btn--usecases a:after {
      content: "";
      display: inline-block;
      margin-left: 12px;
      width: 0;
      height: 0;
      border-left: solid 8px #fff;
      border-top: solid 8px transparent;
      border-bottom: solid 8px transparent; }
    .btn--product a:hover,
    .btn--usecases a:hover {
      color: #327d69;
      background-color: #fff; }
      .btn--product a:hover:after,
      .btn--usecases a:hover:after {
        border-left: solid 8px #327d69;
        border-top: solid 8px transparent;
        border-bottom: solid 8px transparent; }

.btn--how,
.btn--video {
  width: 100%;
  text-align: center; }
  .btn--how a,
  .btn--video a {
    width: 420px;
    height: 60px;
    padding: 13px 0 0;
    background-color: #fff;
    border: solid 1px #d4eae6;
    color: #327d69;
    font-size: 22px;
    font-size: 2.2rem;
    font-family: 'Open Sans Condensed';
    font-weight: 800; }
    @media only screen and (max-width: 768px) {
      .btn--how a,
      .btn--video a {
        width: 80%;
        height: auto;
        max-width: 420px;
        padding: 0.5em; } }
    .btn--how a:after,
    .btn--video a:after {
      content: "";
      display: inline-block;
      margin-left: 12px;
      width: 0;
      height: 0;
      border-left: solid 8px #327d69;
      border-top: solid 8px transparent;
      border-bottom: solid 8px transparent; }
    .btn--how a:hover,
    .btn--video a:hover {
      color: #fff;
      background-color: #327d69;
      border-color: #fff; }
      .btn--how a:hover:after,
      .btn--video a:hover:after {
        border-left: solid 8px #fff; }

.btn--special-featurea {
  width: 100%;
  text-align: center; }
  .btn--special-featurea span {
    width: 420px;
    height: 60px;
    padding: 16px 0 0;
    background-color: #fff;
    border: solid 1px #327d69;
    color: #327d69;
    font-size: 22px;
    font-size: 2.2rem;
    font-family: 'Open Sans Condensed';
    font-weight: 800;
    cursor: pointer; }
    @media only screen and (max-width: 768px) {
      .btn--special-featurea span {
        width: 80%;
        height: auto;
        max-width: 420px;
        padding: 0.5em;
        margin-top: 20px; } }
    .btn--special-featurea span:after {
      margin-left: 10px;
      vertical-align: bottom;
      padding-bottom: 8px;
      border-top: solid 6px #327d69;
      border-left: solid 5px transparent;
      border-right: solid 5px transparent; }
    .btn--special-featurea span:hover {
      background-color: #327d69;
      color: #fff; }
      .btn--special-featurea span:hover:after {
        border-top: solid 6px #fff;
        border-left: solid 5px #327d69;
        border-right: solid 5px #327d69; }

.btn--special-featurea.active span:after {
  vertical-align: top;
  padding-top: 8px;
  border-top: 0;
  border-bottom: solid 6px #327d69;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent; }
.btn--special-featurea.active span:hover {
  background-color: #327d69;
  color: #fff; }
  .btn--special-featurea.active span:hover:after {
    border-bottom: solid 6px #fff;
    border-left: solid 5px #327d69;
    border-right: solid 5px #327d69; }

.btn--special-featurea.pc-only {
  display: block; }
  @media only screen and (max-width: 768px) {
    .btn--special-featurea.pc-only {
      display: none; } }

.btn--special-featurea.sp-only {
  display: none; }
  @media only screen and (max-width: 768px) {
    .btn--special-featurea.sp-only {
      display: block; } }

/* main-visual
------------------------------*/
.l-main--top .main-visual {
  width: auto;
  margin: 0 auto; }
  .l-main--top .main-visual .main-visual__contents {
    width: 1500px;
    margin: 0 auto;
    background-size: cover;
    width: auto; }
    .l-main--top .main-visual .main-visual__contents__inner {
      width: 800px;
      min-height: 380px;
      margin: 0 auto; }
      .l-main--top .main-visual .main-visual__contents__inner:after {
        content: "";
        display: table;
        clear: both; }
      @media only screen and (max-width: 768px) {
        .l-main--top .main-visual .main-visual__contents__inner {
          width: auto; }
          .l-main--top .main-visual .main-visual__contents__inner .description,
          .l-main--top .main-visual .main-visual__contents__inner .sub-title,
          .l-main--top .main-visual .main-visual__contents__inner .title {
            text-align: center;
            line-height: 1; } }

.main-visual__contents.slider-1 {
  background-image: url("../img/top/bg_toppage_visual_1.png"); }
  .main-visual__contents.slider-1 .main-visual__contents__inner {
    padding: 20px 0; }
    .main-visual__contents.slider-1 .main-visual__contents__inner .text-area {
      float: left;
      width: 60%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-1 .main-visual__contents__inner .text-area {
          width: 100%;
          padding: 10px;
          margin: 0 auto;
          text-align: center; } }
    .main-visual__contents.slider-1 .main-visual__contents__inner .title {
      font-size: 44px;
      font-size: 4.4rem;
      line-height: 1.4;
      font-weight: 800;
      font-family: 'Open Sans Condensed';
      border-bottom: solid 1px #b6c4c3;
      color: #327d69;
      display: inline-block;
      padding-bottom: 3px; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-1 .main-visual__contents__inner .title {
          font-size: 32px;
          font-size: 3.2rem;
          line-height: 1; } }
    .main-visual__contents.slider-1 .main-visual__contents__inner .sub-title {
      padding-top: 5px;
      font-size: 22px;
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.4;
      color: #327d69; }
    .main-visual__contents.slider-1 .main-visual__contents__inner .description {
      padding: 5px 0 10px;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 1.7; }
    .main-visual__contents.slider-1 .main-visual__contents__inner .main-visual__key-visual {
      float: right;
      width: 40%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-1 .main-visual__contents__inner .main-visual__key-visual {
          display: none; } }
      .main-visual__contents.slider-1 .main-visual__contents__inner .main-visual__key-visual img {
        width: 100%;
        height: auto; }

.main-visual__contents.slider-2 {
  background-image: url("../img/top/bg_toppage_visual_2.png"); }
  .main-visual__contents.slider-2 .main-visual__contents__inner {
    padding: 70px 0; }
    .main-visual__contents.slider-2 .main-visual__contents__inner .text-area {
      float: left;
      width: 60%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-2 .main-visual__contents__inner .text-area {
          width: 100%;
          padding: 10px;
          margin: 0 auto;
          text-align: center; } }
    .main-visual__contents.slider-2 .main-visual__contents__inner .title {
      font-size: 22px;
      font-size: 2.2rem;
      line-height: 1.4;
      font-weight: 800;
      font-family: 'Open Sans Condensed';
      border-bottom: solid 1px #327d69;
      color: #327d69;
      display: inline-block;
      padding-bottom: 3px; }
    .main-visual__contents.slider-2 .main-visual__contents__inner .sub-title {
      padding-top: 10px;
      font-size: 32px;
      font-size: 3.2rem;
      font-weight: 300;
      line-height: 1.3;
      color: #327d69; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-2 .main-visual__contents__inner .sub-title {
          font-size: 22px;
          font-size: 2.2rem; } }
    .main-visual__contents.slider-2 .main-visual__contents__inner .description {
      padding-bottom: 10px;
      font-size: 44px;
      font-size: 4.4rem;
      line-height: 1.4;
      font-weight: 800;
      font-family: 'Open Sans Condensed';
      color: #327d69; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-2 .main-visual__contents__inner .description {
          font-size: 32px;
          font-size: 3.2rem; } }
    .main-visual__contents.slider-2 .main-visual__contents__inner .main-visual__key-visual {
      float: right;
      width: 40%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-2 .main-visual__contents__inner .main-visual__key-visual {
          display: none; } }
      .main-visual__contents.slider-2 .main-visual__contents__inner .main-visual__key-visual img {
        width: 100%;
        height: auto; }

.main-visual__contents.slider-3 {
  background-image: url("../img/top/bg_toppage_visual_3.png"); }
  .main-visual__contents.slider-3 .main-visual__contents__inner {
    padding: 50px 0; }
    .main-visual__contents.slider-3 .main-visual__contents__inner .text-area {
      float: left;
      width: 60%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-3 .main-visual__contents__inner .text-area {
          width: 100%;
          padding: 10px;
          margin: 0 auto;
          text-align: center; } }
    .main-visual__contents.slider-3 .main-visual__contents__inner .title {
      font-size: 44px;
      font-size: 4.4rem;
      line-height: 1.4;
      font-weight: 800;
      font-family: 'Open Sans Condensed';
      border-bottom: solid 1px #327d69;
      color: #327d69;
      display: inline-block;
      padding-bottom: 3px; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-3 .main-visual__contents__inner .title {
          font-size: 32px;
          font-size: 3.2rem;
          line-height: 1; } }
    .main-visual__contents.slider-3 .main-visual__contents__inner .sub-title {
      padding-top: 10px;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 1.6;
      color: #327d69; }
    .main-visual__contents.slider-3 .main-visual__contents__inner .description {
      padding: 10px 0 20px;
      font-size: 24px;
      font-size: 2.4rem;
      line-height: 1.2;
      font-weight: 400;
      color: #327d69; }
      .main-visual__contents.slider-3 .main-visual__contents__inner .description span {
        font-weight: 800;
        font-style: italic; }
    .main-visual__contents.slider-3 .main-visual__contents__inner .main-visual__key-visual {
      float: right;
      width: 40%; }
      @media only screen and (max-width: 768px) {
        .main-visual__contents.slider-3 .main-visual__contents__inner .main-visual__key-visual {
          display: none; } }
      .main-visual__contents.slider-3 .main-visual__contents__inner .main-visual__key-visual img {
        width: 100%;
        height: auto; }

.l-content__inner.special-featurea-wrapper {
  padding-bottom: 50px; }

.js-sp-nav {
  display: none; }

.special-featurea:after {
  content: "";
  display: table;
  clear: both; }
.special-featurea__content {
  float: left;
  width: 33.33%; }
  @media only screen and (max-width: 768px) {
    .special-featurea__content {
      width: 100%; } }
.special-featurea__title {
  height: 150px;
  width: 100%;
  padding-top: 120px;
  text-align: center;
  font-size: 32px;
  font-size: 3.2rem;
  font-family: 'Open Sans Condensed';
  font-weight: 800;
  background-repeat: no-repeat;
  background-position: center 40px; }
.special-featurea__sub-title {
  padding: 30px 0;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center; }
.special-featurea__keypoints {
  position: relative;
  width: 100%;
  max-width: 390px;
  min-height: 180px;
  display: inline-block;
  background-size: 100% 100%; }
  @media only screen and (max-width: 768px) {
    .special-featurea__keypoints {
      max-width: none;
      min-height: 0;
      width: 100%; } }
  .special-featurea__keypoints .keypoint + .keypoint {
    padding-top: 0.5em; }
  .special-featurea__keypoints .keypoint:before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 14px;
    background-repeat: no-repeat;
    margin-right: 6px; }
.special-featurea__descriptions {
  display: none;
  padding: 30px; }
  .special-featurea__descriptions .description {
    text-align: center; }
    .special-featurea__descriptions .description .title {
      margin-bottom: 15px;
      padding: 0.2em 0;
      font-size: 15px;
      font-size: 1.5rem;
      font-weight: 800;
      color: #fff;
      border-radius: 3px;
      text-align: center; }
  .special-featurea__descriptions .description + .description {
    padding-top: 30px; }
.special-featurea__content.secure .special-featurea__title {
  background-image: url("../img/top/icon_special-featurea_secure.png");
  color: #007796; }
.special-featurea__content.secure .special-featurea__sub-title {
  color: #007796; }
.special-featurea__content.secure .special-featurea__keypoints {
  padding: 30px 0 30px 13%;
  color: #007796;
  background-image: url("../img/top/bg_special-featurea_secure.png"); }
  .special-featurea__content.secure .special-featurea__keypoints:after {
    content: "";
    display: table;
    clear: both; }
  @media only screen and (max-width: 768px) {
    .special-featurea__content.secure .special-featurea__keypoints {
      padding: 10px;
      background-color: #d3e5ef;
      background-image: none; } }
  .special-featurea__content.secure .special-featurea__keypoints__inner {
    text-align: left; }
    @media only screen and (max-width: 768px) {
      .special-featurea__content.secure .special-featurea__keypoints__inner {
        text-align: center; } }
  .special-featurea__content.secure .special-featurea__keypoints .keypoint-block:first-child {
    display: inline-block;
    vertical-align: top;
    padding-right: 20px;
    max-width: 145px;
    padding-top: 0.5em; }
    @media only screen and (max-width: 768px) {
      .special-featurea__content.secure .special-featurea__keypoints .keypoint-block:first-child {
        text-align: left;
        max-width: 190px; } }
  .special-featurea__content.secure .special-featurea__keypoints .keypoint-block:last-child {
    display: inline-block;
    vertical-align: top;
    max-width: 190px;
    padding-top: 0.5em; }
    @media only screen and (max-width: 768px) {
      .special-featurea__content.secure .special-featurea__keypoints .keypoint-block:last-child {
        text-align: left; } }
  .special-featurea__content.secure .special-featurea__keypoints .keypoint {
    text-indent: -1em;
    padding-left: 1em; }
  .special-featurea__content.secure .special-featurea__keypoints .keypoint:before {
    background-image: url("../img/top/icon_special-featurea_secure_small-key.png"); }
.special-featurea__content.secure .special-featurea__descriptions .title {
  background-color: #007796; }
.special-featurea__content.track:after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  border-left: solid 1px #eaf2f0;
  border-right: solid 1px #eaf2f0; }
  @media only screen and (max-width: 768px) {
    .special-featurea__content.track:after {
      display: none; } }
.special-featurea__content.track .special-featurea__title {
  border-left: solid 1px #eaf2f0;
  border-right: solid 1px #eaf2f0;
  background-image: url("../img/top/icon_special-featurea_track.png");
  color: #327d69; }
.special-featurea__content.track .special-featurea__sub-title {
  border-left: solid 1px #eaf2f0;
  border-right: solid 1px #eaf2f0;
  color: #327d69; }
.special-featurea__content.track .special-featurea__keypoints {
  position: relative;
  padding-top: 50px;
  padding-left: 28%;
  color: #327d69;
  background-image: url("../img/top/bg_special-featurea_track.png"); }
  @media only screen and (max-width: 768px) {
    .special-featurea__content.track .special-featurea__keypoints {
      background-color: #d4eae6;
      background-image: none;
      padding: 10px; } }
  .special-featurea__content.track .special-featurea__keypoints__inner {
    position: absolute; }
    @media only screen and (max-width: 768px) {
      .special-featurea__content.track .special-featurea__keypoints__inner {
        width: 230px;
        position: static;
        text-align: left;
        margin: 0 auto; } }
  .special-featurea__content.track .special-featurea__keypoints .keypoint:before {
    background-image: url("../img/top/icon_special-featurea_track_small-key.png"); }
.special-featurea__content.track .special-featurea__descriptions {
  border-left: solid 1px #eaf2f0;
  border-right: solid 1px #eaf2f0; }
  .special-featurea__content.track .special-featurea__descriptions .title {
    background-color: #327d69; }
.special-featurea__content.delete .special-featurea__title {
  background-image: url("../img/top/icon_special-featurea_delete.png");
  color: #604877; }
.special-featurea__content.delete .special-featurea__sub-title {
  position: relative;
  color: #604877; }
.special-featurea__content.delete .special-featurea__keypoints {
  padding: 60px 5% 0 28%;
  color: #604877;
  background-image: url("../img/top/bg_special-featurea_delete.png"); }
  @media only screen and (max-width: 768px) {
    .special-featurea__content.delete .special-featurea__keypoints {
      background-color: #e4e1f0;
      background-image: none;
      padding: 10px; } }
  .special-featurea__content.delete .special-featurea__keypoints .keypoint:before {
    background-image: url("../img/top/icon_special-featurea_delete_small-lkey.png"); }
  @media only screen and (max-width: 768px) {
    .special-featurea__content.delete .special-featurea__keypoints__inner {
      width: 200px;
      position: static;
      text-align: left;
      margin: 0 auto; } }
.special-featurea__content.delete .special-featurea__descriptions .title {
  background-color: #604877; }

.l-content--product {
  border-top: solid 1px #e6efed;
  border-bottom: solid 1px #e6efed;
  text-align: left;
  padding: 50px 0;
  background-color: #f7faf9; }

.l-content__inner__product {
  margin: 0 auto;
  padding: 0; }
  .l-content__inner__product .product-lists {
    padding: 30px 0 50px; }
    .l-content__inner__product .product-lists__list {
      display: inline-block;
      vertical-align: top;
      width: 45%;
      min-height: 150px;
      margin: 30px 2% 0;
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 150px auto; }
      @media only screen and (max-width: 768px) {
        .l-content__inner__product .product-lists__list {
          width: auto;
          background-position: center top;
          padding-top: 130px;
          padding-left: 0;
          background-size: 130px;
          margin-bottom: 20px; } }
      .l-content__inner__product .product-lists__list:hover {
        transform: scale(1.1);
        transition: 0.3s; }
        @media only screen and (max-width: 768px) {
          .l-content__inner__product .product-lists__list:hover {
            transform: none; } }
      .l-content__inner__product .product-lists__list a {
        display: block;
        padding-left: 175px;
        width: 100%;
        height: 100%; }
        @media only screen and (max-width: 768px) {
          .l-content__inner__product .product-lists__list a {
            padding-left: 0; } }
      .l-content__inner__product .product-lists__list .title {
        font-size: 32px;
        font-size: 3.2rem;
        font-family: 'Open Sans Condensed';
        font-weight: 800;
        line-height: 1.5;
        color: #327d69; }
        @media only screen and (max-width: 768px) {
          .l-content__inner__product .product-lists__list .title {
            font-size: 24px;
            font-size: 2.4rem;
            padding-top: 10px;
            text-align: center; } }
      .l-content__inner__product .product-lists__list .text {
        padding-top: 10px;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.6;
        color: #444; }
    .l-content__inner__product .product-lists__list.express {
      background-image: url("../img/top/icon_software_express.png"); }
    .l-content__inner__product .product-lists__list.finalcode5 {
      background-image: url("../img/top/icon_software_finalcode5.png"); }
    .l-content__inner__product .product-lists__list.software_for_box {
      background-image: url("../img/top/icon_software_for_box.png"); }
    .l-content__inner__product .product-lists__list.software_for_cad {
      background-image: url("../img/top/icon_software_for_cad.png"); }

.l-content--how {
  padding: 80px 0; }
  .l-content--how .how {
    margin: 0 auto; }
    .l-content--how .how:after {
      content: "";
      display: table;
      clear: both; }
    .l-content--how .how__key-visual {
      float: left;
      width: calc(100% - 420px);
      padding-right: 5%;
      max-width: 710px; }
      @media only screen and (max-width: 768px) {
        .l-content--how .how__key-visual {
          width: auto;
          max-width: 650px;
          margin: 0 auto;
          float: none;
          padding-right: 0; } }
    .l-content--how .how .l-content-title {
      float: right;
      width: 420px;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        .l-content--how .how .l-content-title {
          margin-bottom: 50px;
          float: none;
          margin-left: 0;
          padding-top: 50px;
          width: auto;
          text-align: center; } }
    .l-content--how .how .text {
      float: right;
      width: 420px;
      text-align: center;
      padding: 30px 0; }
      @media only screen and (max-width: 768px) {
        .l-content--how .how .text {
          float: none;
          width: auto; } }
    .l-content--how .how .btn--how {
      float: right;
      width: 420px; }
      @media only screen and (max-width: 768px) {
        .l-content--how .how .btn--how {
          float: none;
          width: 100%; } }

.l-content--video {
  padding: 80px 0;
  background-color: #327d69; }
  .l-content--video .video {
    width: auto; }
    .l-content--video .video:after {
      content: "";
      display: table;
      clear: both; }
    .l-content--video .video .l-content-title {
      width: 420px;
      float: left;
      color: #fff; }
      @media only screen and (max-width: 768px) {
        .l-content--video .video .l-content-title {
          float: none;
          width: 100%;
          margin-bottom: 50px; } }
      .l-content--video .video .l-content-title:after {
        background-color: #fff; }
    .l-content--video .video .text {
      width: 420px;
      float: left;
      padding: 30px 0;
      color: #fff;
      line-height: 1.4;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        .l-content--video .video .text {
          float: none;
          width: 100%; } }
    .l-content--video .video__key-visual__box {
      float: right;
      width: calc(100% - 420px);
      padding-left: 5%; }
      @media only screen and (max-width: 768px) {
        .l-content--video .video__key-visual__box {
          float: none;
          width: auto;
          padding-left: 0; } }
    .l-content--video .video__key-visual {
      position: relative;
      width: 100%;
      padding: 56.25% 0 0; }
      .l-content--video .video__key-visual iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
    .l-content--video .video .btn--video {
      float: left;
      width: 420px; }
      @media only screen and (max-width: 768px) {
        .l-content--video .video .btn--video {
          float: none;
          width: 100%; } }

.l-content--usecases {
  padding: 50px 0;
  background-color: #f7faf9; }
  .l-content--usecases .usecases__contents {
    width: 1120px;
    margin: 0 auto;
    padding-bottom: 70px; }
    @media only screen and (min-width: 0) and (max-width: 1200px) {
      .l-content--usecases .usecases__contents {
        width: auto;
        margin: 0 auto; } }
  .l-content--usecases .usecases__text {
    max-width: 750px;
    margin: 0 auto;
    padding: 30px 0;
    color: #444;
    text-align: center;
    line-height: 1.6; }
  .l-content--usecases .usecases__list {
    max-width: 540px;
    width: auto;
    margin: 10px;
    border: solid 1px #e8f0ee;
    color: #327d69;
    background-color: #fff; }
    .l-content--usecases .usecases__list:after {
      content: "";
      display: table;
      clear: both; }
    @media only screen and (min-width: 0) and (max-width: 1200px) {
      .l-content--usecases .usecases__list {
        max-width: 1000px;
        width: auto; } }
  .l-content--usecases .usecases__title-area {
    display: table; }
  .l-content--usecases .usecases__number {
    display: table-cell;
    vertical-align: middle;
    width: 80px;
    min-height: 60px;
    text-align: center;
    font-family: 'Open Sans Condensed';
    font-weight: 800;
    line-height: 1; }
    @media only screen and (max-width: 768px) {
      .l-content--usecases .usecases__number {
        width: 50px; } }
    .l-content--usecases .usecases__number .case {
      font-size: 12px;
      font-size: 1.2rem; }
    .l-content--usecases .usecases__number .case-number {
      font-size: 30px;
      font-size: 3rem; }
  .l-content--usecases .usecases__title {
    display: table-cell;
    vertical-align: middle;
    max-width: 444px;
    height: 60px;
    padding: 14px 18px;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 800;
    border-left: solid 1px #e8f0ee; }
    @media only screen and (max-width: 768px) {
      .l-content--usecases .usecases__title {
        font-size: 14px;
        font-size: 1.4rem;
        padding: 10px; } }
  .l-content--usecases .usecases__key-visual {
    clear: both;
    padding: 20px;
    border-top: solid 1px #e8f0ee; }
    @media only screen and (min-width: 0) and (max-width: 1200px) {
      .l-content--usecases .usecases__key-visual img {
        width: 100%; } }

.l-content--clients {
  position: relative;
  padding: 50px 0;
  height: 340px;
  text-align: center;
  border-bottom: solid 1px #c1d8d2; }
  .l-content--clients .clients__icons {
    width: 1170px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden; }
  .l-content--clients .clients__icons__carousel div {
    text-align: center;
    width: 200px;
    height: 200px;
    float: left;
    position: relative; }
    .l-content--clients .clients__icons__carousel div img {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto; }

.l-content--recognition {
  position: relative;
  padding: 50px 0;
  height: 360px;
  text-align: center;
  border-bottom: solid 1px #c1d8d2; }
  .l-content--recognition .recognition__icons {
    width: 1170px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden; }
  .l-content--recognition .recognition__icons__carousel div {
    text-align: center;
    width: 200px;
    height: 200px;
    float: left;
    position: relative; }
    .l-content--recognition .recognition__icons__carousel div img {
      position: absolute;
      max-width: 130px;
      max-height: 130px;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto; }