@charset "UTF-8";
/* main-area
-------------------------------------- */
.area-main {
  width: 100vw;
  min-width: 1024px;
  height: 100vh;
  background-size: cover;
  position: relative; }
  @media screen and (max-width: 768px) {
    .area-main {
      min-width: auto;
      max-height: 600px; } }
  .area-main .items {
    width: 44.14%;
    /* 452px */
    max-width: 700px;
    position: absolute;
    right: 12.69%;
    bottom: 25.65%; }
    @media screen and (max-width: 768px) {
      .area-main .items {
        width: 66.0%;
        max-width: 300px;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        margin: auto;
        transform: translateY(-25%);
        -webkit-transform: translateY(-25%); } }
  .area-main .logo {
    width: 23.67%; }
    @media screen and (max-width: 768px) {
      .area-main .logo {
        width: 38.67%; } }
  .area-main .txt01 {
    width: 100%;
    margin-top: 2.43%; }
    @media screen and (max-width: 768px) {
      .area-main .txt01 {
        margin-top: 4.43%; } }
  .area-main .txt02 {
    width: 96.01%;
    margin-top: 3.43%; }
    @media screen and (max-width: 768px) {
      .area-main .txt02 {
        width: 100%; } }

/* company
-------------------------------------- */
.area-sec01 {
  background: url("../img/bg_company.jpg") no-repeat right center;
  background-size: contain; }
  @media screen and (max-width: 768px) {
    .area-sec01 {
      background-size: cover;
      background-position: -40% center;
      overflow: hidden; } }
  .area-sec01 .inner {
    width: 94.5%;
    max-width: 1114px;
    /* 参考サイト同様 */
    margin: 0 auto; }
    @media screen and (min-width: 769px) {
      .area-sec01 .inner {
        overflow: hidden; } }
    @media screen and (max-width: 768px) {
      .area-sec01 .inner {
        width: 88.0%; } }
    .area-sec01 .inner .txt-inner {
      width: 35.23%;
      margin-top: 15.69%;
      margin-bottom: 14.46%;
      margin-left: 10.58%; }
      @media screen and (max-width: 768px) {
        .area-sec01 .inner .txt-inner {
          width: 100%;
          max-width: none;
          margin: 0 auto;
          overflow: hidden; } }
      .area-sec01 .inner .txt-inner h2 {
        width: 47.74%;
        margin-bottom: 12.01%; }
        @media screen and (max-width: 768px) {
          .area-sec01 .inner .txt-inner h2 {
            margin-top: 21%;
            margin-bottom: 7%; } }
      .area-sec01 .inner .txt-inner .txt01 {
        font-size: 18px;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          .area-sec01 .inner .txt-inner .txt01 {
            font-size: 14px;
            font-size: 4vw; } }
      .area-sec01 .inner .txt-inner .btn-more {
        width: 62.76%;
        max-width: 220px;
        background: #242493;
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        box-sizing: border-box;
        font-family: 'arial narrow', "Futura" , sans-serif;
        margin-top: 15.01%; }
        @media screen and (max-width: 768px) {
          .area-sec01 .inner .txt-inner .btn-more {
            width: 43.76%;
            max-width: none;
            font-size: 16px;
            font-size: 4.57143vw;
            margin-top: 11%;
            margin-bottom: 19%; } }
        .area-sec01 .inner .txt-inner .btn-more a {
          display: block;
          padding: 12px 35px;
          position: relative; }
          @media screen and (min-width: 769px) {
            .area-sec01 .inner .txt-inner .btn-more a {
              transition: .4s; } }
          @media screen and (max-width: 768px) {
            .area-sec01 .inner .txt-inner .btn-more a {
              padding: 8.0% 7.0%; } }
          .area-sec01 .inner .txt-inner .btn-more a:after {
            content: "";
            display: block;
            background: url("../img/icon_arrow.svg") no-repeat center top;
            background-size: 100% auto;
            width: 15px;
            height: 24px;
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            margin-right: 10.52%; }
            @media screen and (min-width: 769px) {
              .area-sec01 .inner .txt-inner .btn-more a:after {
                transition: .4s; } }
            @media screen and (max-width: 768px) {
              .area-sec01 .inner .txt-inner .btn-more a:after {
                width: 6.0%;
                height: 100%;
                margin-right: 7.52%;
                background-position: center center; } }
        @media screen and (min-width: 769px) {
          .area-sec01 .inner .txt-inner .btn-more:hover {
            background: #2b2bd8;
            /* Old browsers */
            background: -moz-linear-gradient(left, #2b2bd8 0%, #242493 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #2b2bd8 0%, #242493 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #2b2bd8 0%, #242493 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2bd8', endColorstr='#242493',GradientType=1 );
            /* IE6-9 */ }
            .area-sec01 .inner .txt-inner .btn-more:hover a {
              letter-spacing: .05vw; }
              .area-sec01 .inner .txt-inner .btn-more:hover a:after {
                transform: translateX(0.2em);
                -webkit-transform: translateX(0.2em); } }

/* service
-------------------------------------- */
.area-sec02 {
  background: url("../img/bg_service.jpg") no-repeat left top;
  background-size: cover;
  margin-bottom: 8.49%; }
  @media screen and (max-width: 768px) {
    .area-sec02 {
      background-position: right center; } }
  .area-sec02 .inner {
    width: 94.5%;
    max-width: 1114px;
    /* 参考サイト同様 */
    margin: 0 auto;
    overflow: hidden; }
    @media screen and (max-width: 768px) {
      .area-sec02 .inner {
        width: 94.0%;
        max-width: none; } }
    .area-sec02 .inner .txt-inner {
      width: 39.36%;
      background: rgba(255, 255, 255, 0.8);
      margin-top: 14.28%;
      float: right;
      margin-right: 4.23%;
      margin-bottom: 4.23%; }
      @media screen and (max-width: 768px) {
        .area-sec02 .inner .txt-inner {
          width: 100%;
          margin-right: 0;
          margin-bottom: 10.0%;
          margin-top: 10.0%; } }
      .area-sec02 .inner .txt-inner h2 {
        width: 36.55%;
        margin-top: 13.44%;
        margin-left: 8.06%;
        margin-bottom: 10.75%; }
        @media screen and (max-width: 768px) {
          .area-sec02 .inner .txt-inner h2 {
            width: 37.55%;
            margin-left: 3.0%;
            margin-top: 10.0%;
            margin-bottom: 6.0%; } }
      .area-sec02 .inner .txt-inner .txt01 {
        font-size: 18px;
        line-height: 1.6;
        margin-left: 8.06%;
        margin-right: 12.09%; }
        @media screen and (max-width: 768px) {
          .area-sec02 .inner .txt-inner .txt01 {
            font-size: 14px;
            font-size: 4vw;
            margin-left: 3.0%; } }
      .area-sec02 .inner .txt-inner .btn-more {
        width: 56.18%;
        max-width: 220px;
        margin-left: 8.06%;
        margin-bottom: 14.78%;
        background: #242493;
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        box-sizing: border-box;
        font-family: 'arial narrow', "Futura" , sans-serif;
        margin-top: 15.01%; }
        @media screen and (max-width: 768px) {
          .area-sec02 .inner .txt-inner .btn-more {
            width: 41.38%;
            max-width: none;
            margin-left: 3.0%;
            margin-top: 10.0%;
            font-size: 16px;
            font-size: 4.57143vw;
            margin-bottom: 10.0%; } }
        .area-sec02 .inner .txt-inner .btn-more a {
          display: block;
          padding: 12px 35px;
          position: relative; }
          @media screen and (min-width: 769px) {
            .area-sec02 .inner .txt-inner .btn-more a {
              transition: .4s; } }
          @media screen and (max-width: 768px) {
            .area-sec02 .inner .txt-inner .btn-more a {
              padding: 8.0% 7.0%; } }
          .area-sec02 .inner .txt-inner .btn-more a:after {
            content: "";
            display: block;
            background: url("../img/icon_arrow.svg") no-repeat center top;
            background-size: 100% auto;
            width: 15px;
            height: 24px;
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            margin-right: 10.52%; }
            @media screen and (min-width: 769px) {
              .area-sec02 .inner .txt-inner .btn-more a:after {
                transition: .4s; } }
            @media screen and (max-width: 768px) {
              .area-sec02 .inner .txt-inner .btn-more a:after {
                width: 6.0%;
                height: 100%;
                margin-right: 7.52%;
                background-position: center center; } }
        @media screen and (min-width: 769px) {
          .area-sec02 .inner .txt-inner .btn-more:hover {
            background: #2b2bd8;
            /* Old browsers */
            background: -moz-linear-gradient(left, #2b2bd8 0%, #242493 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #2b2bd8 0%, #242493 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #2b2bd8 0%, #242493 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2bd8', endColorstr='#242493',GradientType=1 );
            /* IE6-9 */ }
            .area-sec02 .inner .txt-inner .btn-more:hover a {
              letter-spacing: .05vw; }
              .area-sec02 .inner .txt-inner .btn-more:hover a:after {
                transform: translateX(0.2em);
                -webkit-transform: translateX(0.2em); } }

/* animation
------------------------------- */
.animation {
  opacity: 0; }

/* ie9 */
.animation:not(:target) {
  opacity: 1\9; }
  @media screen and (max-width: 768px) {
    .animation:not(:target) {
      opacity: 1\9; } }

/*ie10*/
@media all and (-ms-high-contrast: none) {
  .animation:not(:target) {
    opacity: 0; } }

/* fade in
------------------------------- */
.ani-fade {
  -webkit-animation: ani-fade 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: ani-fade 1s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@-webkit-keyframes ani-fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes ani-fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* fade left
------------------------------- */
.ani-fade-left {
  -webkit-animation: ani-fade-left 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: ani-fade-left 1s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@-webkit-keyframes ani-fade-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@keyframes ani-fade-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

/* fade right
------------------------------- */
.ani-fade-right {
  -webkit-animation: ani-fade-right 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: ani-fade-right 1s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@-webkit-keyframes ani-fade-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

@keyframes ani-fade-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; } }

/*# sourceMappingURL=index.css.map */