@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Lato:400&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:700&display=swap");
@import url(base.css);
.area-ttl {
  text-align: center;
  color: #13ae68; }
  .area-ttl .en {
    font-family: "Roboto", sans-serif;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 3.5px;
    margin-bottom: 14px; }
  .area-ttl .ja {
    letter-spacing: .3px; }

.main-visual {
  width: 100%;
  overflow: hidden; }
  .main-visual .main-image {
    width: 100%;
    background: url("../img/index/main-visual.jpg") center;
    background-size: cover; }
  .main-visual .news-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #13ae68;
    color: white;
    letter-spacing: .3px; }
    .main-visual .news-line .inner {
      display: flex;
      justify-content: space-between; }
      .main-visual .news-line .inner a {
        color: inherit;
        height: 65px;
        align-items: center;
        display: flex;
        position: relative;
        overflow: hidden;
        transition: .3s; }
        .main-visual .news-line .inner a:after {
          content: "";
          position: absolute;
          transition: .3s;
          width: 0;
          bottom: 0;
          height: 8px;
          background: #59e3bf;
          right: 0;
          left: auto;
          opacity: .7; }
        .main-visual .news-line .inner a:hover:after {
          width: 100%;
          left: 0; }
      .main-visual .news-line .inner .news-line-item {
        width: calc(100% - 121px); }
        .main-visual .news-line .inner .news-line-item .date {
          margin-right: 30px; }
        .main-visual .news-line .inner .news-line-item .news-ttl {
          width: 80%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap; }
      .main-visual .news-line .inner a.link-btn {
        font-size: 14px;
        width: 121px;
        text-align: right; }
        .main-visual .news-line .inner a.link-btn .arrow {
          height: 11px;
          padding-left: 13px;
          margin-top: 2px; }

.top-area {
  margin: 77px 0 84px; }
  .top-area .inner {
    display: flex;
    align-items: center; }
    .top-area .inner .top-image {
      margin-right: 61px; }
    .top-area .inner .text-box {
      margin-top: 17px; }
      .top-area .inner .text-box .name {
        margin-bottom: 19px;
        margin-left: 2px; }
        .top-area .inner .text-box .name img {
          width: 436px; }
      .top-area .inner .text-box .top-text {
        font-size: 28px;
        line-height: 51px;
        font-weight: 400;
        letter-spacing: .8px; }

.mission {
  font-size: 0;
  margin-bottom: 67px; }
  .mission .mission-box {
    width: 50%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    color: white; }
    .mission .mission-box a {
      color: inherit;
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 2;
      text-align: center; }
      .mission .mission-box a .text-box {
        display: inline-block;
        padding: 42px 0 56px; }
        .mission .mission-box a .text-box .number {
          font-family: "Roboto", sans-serif;
          font-size: 52px;
          margin-bottom: 13px;
          letter-spacing: 2.5px; }
          .mission .mission-box a .text-box .number .en {
            font-size: 22px;
            margin-right: 11px;
            vertical-align: 10px;
            letter-spacing: .5px; }
        .mission .mission-box a .text-box .service {
          font-size: 18px;
          margin-bottom: 33px;
          letter-spacing: .8px; }
        .mission .mission-box a .text-box .mission-catch {
          font-size: 32px;
          line-height: 43px;
          letter-spacing: 5px;
          font-weight: 400; }
          .mission .mission-box a .text-box .mission-catch .it {
            margin-right: .2em; }
    .mission .mission-box .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: .5s ease; }
      .mission .mission-box .bg:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        opacity: .4;
        z-index: 1;
        top: 0;
        left: 0;
        transition: .5s ease;
        mix-blend-mode: multiply; }
    .mission .mission-box:nth-child(1) .bg {
      background: url("../img/index/m1.jpg") center/cover; }
    .mission .mission-box:nth-child(2) .bg {
      background: url("../img/index/m2.jpg") center/cover; }
    .mission .mission-box:hover .bg {
      transform: scale(1.07); }
      .mission .mission-box:hover .bg:after {
        opacity: .3;
        background: #18423b; }
  .mission .mission-text {
    margin-top: 95px;
    font-size: 20px;
    line-height: 42px;
    text-align: center;
    letter-spacing: .5px; }
    .mission .mission-text .it {
      margin: 0 .25em; }

.blog {
  margin-bottom: 89px; }
  .blog .blog-box {
    width: calc((100vw - 10px) / 3);
    height: 24.2vw;
    position: relative;
    overflow: hidden;
    margin: 0 2.5px; }
    .blog .blog-box .blog-image {
      background-size: cover;
      background-position: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      height: 100%;
      width: 100%; }
      .blog .blog-box .blog-image:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        opacity: 0;
        z-index: 1;
        top: 0;
        left: 0;
        transition: .3s ease;
        mix-blend-mode: multiply; }
    .blog .blog-box .blog-ttl {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 96px;
      color: white;
      font-size: 20px;
      line-height: 32px;
      letter-spacing: .5px;
      padding: 15px 20px;
      background-color: rgba(0, 0, 0, 0.4);
      background-blend-mode: multiply; }
    .blog .blog-box:hover .blog-image:after {
      opacity: .3; }
  .blog .slide-btn a {
    margin: 35px auto 0; }

.company {
  margin-bottom: 103px; }
  .company .company-content {
    margin-top: 41px;
    background: url("../img/index/company-bg.jpg") center right/cover; }
    .company .company-content .text-box {
      margin-left: 60%;
      padding: 39px 0 20px;
      font-size: 20px;
      letter-spacing: .5px;
      line-height: 37.5px; }
      .company .company-content .text-box .slide-btn {
        margin: 16px 0 0 115px; }

.news {
  margin-bottom: 98px; }
  .news .news-list {
    width: 800px;
    margin: 21px auto 0; }
    .news .news-list li {
      border-bottom: dotted 1px #b2b2b2; }
      .news .news-list li a {
        color: #4d4d4d;
        font-size: 14px;
        letter-spacing: .3px;
        display: flex;
        align-items: center;
        height: 65px; }
        .news .news-list li a .date {
          margin-right: 33px; }
        .news .news-list li a .cate {
          background: #232d58;
          color: white;
          margin-right: 25px;
          min-width: 94px;
          text-align: center;
          max-width: 200px;
          padding: 5px 15px; }
        .news .news-list li a .news-ttl {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        .news .news-list li a:hover {
          background: rgba(50, 205, 136, 0.1); }

.voice {
  background: #F5F5F5;
  padding: 64px 0 60px;
  margin: 100px 0; }
  .voice .iv-list {
    margin-top: 50px; }
  .voice .slide-btn a {
    margin: 5px auto 0; }

@media screen and (max-width: 1100px) {
  .company .company-content .text-box {
    margin-left: 50%; } }
@media screen and (max-width: 768px) {
  .area-ttl .en {
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 9px; }

  .main-visual .news-line {
    font-size: 14px;
    padding: 10px 0 16px; }
    .main-visual .news-line .inner {
      display: block; }
      .main-visual .news-line .inner a {
        height: 30px; }
        .main-visual .news-line .inner a:after {
          display: none; }
      .main-visual .news-line .inner .news-line-item {
        width: 100%; }
        .main-visual .news-line .inner .news-line-item .date {
          margin-right: 12px; }
      .main-visual .news-line .inner a.link-btn {
        text-align: right;
        display: block;
        height: 14px;
        margin: 9px 0 0 auto; }

  .top-area {
    margin: 40px 0 50px; }
    .top-area .inner {
      flex-wrap: wrap;
      justify-content: center; }
      .top-area .inner .top-image {
        margin-right: 0;
        order: 1;
        max-width: 100%; }
      .top-area .inner .text-box {
        margin: 0 0 30px;
        order: 0;
        text-align: center; }
        .top-area .inner .text-box .name {
          margin-bottom: 19px;
          margin-left: 0; }
          .top-area .inner .text-box .name img {
            width: 100%;
            max-width: 450px; }
        .top-area .inner .text-box .top-text {
          font-size: 20px;
          line-height: 30px; }

  .mission {
    font-size: 0;
    margin-bottom: 45px; }
    .mission .mission-box {
      width: 100%;
      margin-bottom: 5px; }
      .mission .mission-box a .text-box {
        padding: 25px 0 30px; }
        .mission .mission-box a .text-box .number {
          font-size: 40px;
          margin-bottom: 10px;
          letter-spacing: 2.5px; }
          .mission .mission-box a .text-box .number .en {
            font-size: 16px;
            margin-right: 11px;
            vertical-align: 6px;
            letter-spacing: .5px; }
        .mission .mission-box a .text-box .service {
          font-size: 14px;
          margin-bottom: 20px;
          letter-spacing: .8px; }
        .mission .mission-box a .text-box .mission-catch {
          font-size: 25px;
          line-height: 33px;
          letter-spacing: 3px; }
          .mission .mission-box a .text-box .mission-catch .it {
            margin-right: .2em; }
      .mission .mission-box:hover .bg {
        transform: scale(1); }
        .mission .mission-box:hover .bg:after {
          opacity: .4;
          background: #1a1a1a; }
    .mission .mission-text {
      padding: 0 20px;
      margin: 35px auto 0;
      font-size: 16px;
      line-height: 35px;
      text-align: left;
      max-width: 510px; }

  .blog {
    margin-bottom: 45px; }
    .blog .inner {
      width: 100%;
      padding: 0 20px;
      display: block; }
    .blog .blog-box {
      width: 70vw;
      height: 51vw;
      margin: 0 0 8px; }
      .blog .blog-box .blog-ttl {
        height: 80px;
        font-size: 16px;
        line-height: 28px;
        padding: 12px 13px; }
      .blog .blog-box a:after {
        content: "";
        background: white;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        transition: 1s ease;
        opacity: .6; }
      .blog .blog-box.slick-active a:after {
        opacity: 0; }
      .blog .blog-box:hover .blog-image:after {
        opacity: 0; }
    .blog .slide-btn a {
      margin-top: 25px; }

  .company {
    margin-bottom: 45px; }
    .company .company-content {
      margin-top: 25px;
      background-position: center left 36%; }
      .company .company-content .text-box {
        margin-left: 0;
        padding: 25px 20px;
        font-size: 15px;
        line-height: 27px;
        background: rgba(255, 255, 255, 0.75);
        width: 100%; }
        .company .company-content .text-box .slide-btn {
          margin: 13px auto 0;
          padding: 0; }

  .news {
    margin-bottom: 50px; }
    .news .news-list {
      width: 100%;
      margin: 12px auto 0; }
      .news .news-list li a {
        flex-wrap: wrap;
        height: auto;
        padding: 16px 0; }
        .news .news-list li a .date {
          margin-right: 16px; }
        .news .news-list li a .cate {
          margin-right: 0;
          min-width: 80px;
          padding: 4px 13px;
          font-size: 13px;
          max-width: 180px; }
        .news .news-list li a .news-ttl {
          width: 100%;
          margin-top: 11px; }
        .news .news-list li a:hover {
          background: none; }

  .voice {
    padding: 45px 0;
    margin: 55px 0; }
    .voice .iv-list {
      margin-top: 30px; } }

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