/* Scss Document */
@keyframes AnimationTitle {
  0% {
    background-position: 50% 50%; }
  30% {
    background-position: 100% 55%; }
  60% {
    background-position: 0% 45%; }
  100% {
    background-position: 50% 50%; } }
@keyframes AnimationTitle1 {
  0% {
    background-position: 50% 50%; }
  30% {
    background-position: 100% 50%; }
  900% {
    background-position: 0% 50%; }
  100% {
    background-position: 50% 50%; } }
@keyframes out {
  0% {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes out1 {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
section:after {
  display: none; }
@media screen and (max-width: 767px) {
  section {
    padding-bottom: 100px; } }

.h2-tt {
  line-height: 1.4;
  font-size: 85px; }
  .h2-tt span {
    letter-spacing: 0.04em; }
  @media screen and (max-width: 767px) {
    .h2-tt {
      line-height: 1.5;
      font-size: 40px; }
      .h2-tt .ico {
        font-size: 14px;
        background-size: 10px; } }

#opening {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  pointer-events: none;
  pointer-events: none; }
  #opening .logo {
    width: 250px;
    opacity: 0; }

.page-done #opening {
  animation: out 1s ease-in-out   forwards  3s; }
  .page-done #opening .logo {
    animation: out1 3s ease-in-out forwards; }
.page-done #key-index h1 {
  opacity: 1; }

#key-index {
  position: relative;
  padding: 14.8% 0% 13.5% 5.6%;
  /*  background-image: url("../img/index/grand_text.jpg");
  background-size: cover;
     background-position: center 40px;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
       animation: AnimationTitle 5s ease infinite;
    */ }
  #key-index:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 50%; }
  #key-index .scroll {
    color: #000;
    border-left: 1px solid;
    height: 125px;
    width: 6px;
    position: absolute;
    left: 50%;
    bottom: -47px;
    z-index: 5; }
    #key-index .scroll:before {
      position: absolute;
      content: '';
      width: 13px;
      border-top: 1px solid;
      left: -4px;
      bottom: 5px;
      transform: rotate(-58deg); }
    @media screen and (max-width: 999px) {
      #key-index .scroll {
        height: 62px;
        width: 6px;
        bottom: -32px; }
        #key-index .scroll:before {
          width: 13px;
          left: -4px;
          bottom: 5px;
          transform: rotate(-58deg); } }
  #key-index h1 {
    white-space: nowrap;
    width: 100%;
    line-height: 1;
    opacity: 0;
    transition: opacity 2s ease 4s;
    -moz-transition: opacity 2s ease 4s;
    -webkit-transition: opacity 2s ease 4s; }
    #key-index h1 .t1 {
      display: block;
      font-size: 8.8vw;
      letter-spacing: 0;
      line-height: 1.07;
      background-image: url("../img/index/grand_text.jpg");
      background-size: auto;
      background-position: center center;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: AnimationTitle 5s ease infinite; }
      #key-index h1 .t1 .pad {
        letter-spacing: -0.02em; }
    #key-index h1 .t2 {
      font-weight: 600;
      display: block;
      margin: 2.3vw 0 0;
      font-size: 3vw;
      letter-spacing: 0.04em;
      background: linear-gradient(90deg, #03567f 0%, black 88%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: AnimationTitle1 5s ease infinite; }
    #key-index h1 img {
      max-width: 100%;
      height: auto; }
  @media screen and (max-width: 767px) {
    #key-index {
      padding: 21vw 10px 27vw;
      height: auto; }
      #key-index:before {
        top: -38vw;
        right: 0;
        right: -5vw;
        width: 152.5%; }
      #key-index h1 .t1 {
        background-image: url("../img/index/grand_text_sp.jpg");
        font-size: 14.8vw;
        letter-spacing: 0.04em;
        line-height: 1.14;
        animation: AnimationTitle 10s ease infinite; }
        #key-index h1 .t1 .pad1 {
          padding: 0 0 0 13vw;
          letter-spacing: 0.04em; }
        #key-index h1 .t1 .pad {
          padding: 00 0 0;
          font-size: 11vw;
          display: block; }
      #key-index h1 .t2 {
        font-size: 5vw;
        margin: 12vw 0 0;
        letter-spacing: 0.08em; } }

#about {
  padding: 0 50px;
  margin-bottom: 100px; }
  #about .box {
    position: relative;
    padding: 100px 0;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    z-index: 1; }
    #about .box:before {
      z-index: -1;
      content: '';
      border-radius: 50px;
      background-color: #f7fafb;
      position: absolute;
      top: 100px;
      left: 100px;
      bottom: 100px;
      right: calc(50% - 480px); }
  #about .wrap {
    padding: 67px 0 70px 48px; }
  #about .shape {
    order: -1;
    max-width: 690px;
    width: calc(100% - 510px); }
  #about .info {
    width: 490px; }
    #about .info .txt {
      margin-bottom: 60px;
      margin-right: -10px; }
      @media screen and (max-width: 999px) {
        #about .info .txt {
          margin-right: 0; } }
  @media screen and (max-width: 1550px) {
    #about .box:before {
      top: 50px;
      bottom: 50px;
      right: 50px;
      left: 50px; } }
  @media screen and (max-width: 1500px) {
    #about {
      padding: 0 30px; }
      #about .wrap {
        max-width: 100%;
        padding: 65px 60px 0; }
      #about .box:before {
        top: 30px;
        bottom: 30px;
        right: 30px;
        left: 30px; } }
  @media screen and (max-width: 999px) {
    #about .wrap {
      display: block; }
    #about .box {
      padding-top: 0; }
      #about .box:before {
        display: none; }
    #about .info {
      width: 100%;
      padding-bottom: 50px;
      border-radius: 20px; }
    #about .shape {
      width: 100%;
      background-color: #f7fafb;
      max-width: 100%;
      border-radius: 20px;
      padding: 40px 20px 10px; } }
  @media screen and (max-width: 767px) {
    #about {
      padding: 0 15px;
      margin-bottom: 50px; }
      #about .wrap {
        padding: 50px 10px 40px; }
      #about .box {
        padding-bottom: 0;
        border-radius: 10px; }
        #about .box:before {
          display: none; }
      #about .info {
        padding: 0 10px 40px; }
        #about .info .txt {
          margin-bottom: 30px; }
      #about .shape {
        border-radius: 20px;
        padding: 40px 8px 10px; } }

#service {
  padding: 40px 0 180px; }
  #service .lead {
    width: 410px; }
  #service .photo-hidden {
    width: 300px;
    margin-top: 78px;
    position: relative; }
    #service .photo-hidden li {
      width: 340px;
      border-radius: 20px;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.5s ease, visibility 0.5s ease;
      box-shadow: 30.6666px 31.6666px 44.8333px rgba(0, 0, 0, 0.1); }
      #service .photo-hidden li:nth-child(1) {
        position: relative; }
      #service .photo-hidden li.is-show {
        opacity: 1;
        visibility: visible; }
    @media screen and (max-width: 1360px) {
      #service .photo-hidden {
        left: 30px; } }
  #service .group {
    max-width: 730px;
    width: calc(100% - 440px);
    padding: 37px 0 0; }
    #service .group .service {
      border-top: 1px solid rgba(3, 86, 127, 0.3);
      padding: 35px 125px 13px 0;
      letter-spacing: 0.04em;
      position: relative;
      cursor: pointer; }
      #service .group .service:after {
        content: '';
        background: url("../img/shared/arow.png") no-repeat 0 0/100%;
        width: 68px;
        height: 68px;
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease; }
      #service .group .service:last-child {
        border-bottom: 1px solid rgba(3, 86, 127, 0.3); }
      #service .group .service .link {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        pointer-events: none;
        visibility: hidden;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all  .3s ease; }
      #service .group .service .txt {
        letter-spacing: 0.05em; }
      #service .group .service .info {
        padding-bottom: 27px; }
      #service .group .service .service-main, #service .group .service .service-link {
        padding-left: 146px; }
      #service .group .service .service-link {
        line-height: 34px;
        position: relative;
        opacity: 0.7;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all  .3s ease; }
        #service .group .service .service-link dt {
          font-size: 18px;
          font-weight: 600; }
        #service .group .service .service-link dd {
          font-size: 22px;
          font-weight: 600;
          background: linear-gradient(90deg, #1e557e 0%, #4867c4 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          padding: 5px 0 32px;
          line-height: 32px;
          letter-spacing: 0em; }
        #service .group .service .service-link .num {
          left: 30px;
          top: 0px;
          color: #8D8D8D;
          position: absolute;
          font-size: 13.71px;
          font-weight: 400; }
      #service .group .service.active:after {
        background: url("../img/shared/arow1.png") no-repeat 0 0/100%; }
      #service .group .service.active .service-link {
        opacity: 1; }
      #service .group .service.active .link {
        pointer-events: auto;
        visibility: visible; }
  @media screen and (max-width: 1200px) {
    #service .group .service {
      padding-right: 100px; }
      #service .group .service:after {
        right: 20px; }
      #service .group .service .service-link, #service .group .service .service-main {
        padding-left: 0; }
      #service .group .service .service-link .num {
        position: static;
        line-height: 1; } }
  @media screen and (max-width: 999px) {
    #service .wrap {
      display: block; }
    #service .lead {
      width: auto; }
    #service .group {
      width: auto;
      max-width: 100%; }
      #service .group .service {
        padding-right: 0; }
        #service .group .service:after {
          top: 65px;
          width: 30px;
          height: 30px;
          transform: translateY(0);
          background: url("../img/shared/arow_tog_sp.svg") no-repeat 0 0/100%; }
        #service .group .service .link {
          display: none; }
        #service .group .service .service-main .info {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; }
        #service .group .service .service-main .txt {
          width: 55%; }
        #service .group .service .service-main .photo {
          width: 42%;
          display: block !important;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.05);
          position: relative;
          z-index: 1; } }
      @media screen and (max-width: 999px) and (max-width: 767px) {
        #service .group .service .service-main .photo {
          border-radius: 12px; } }
  @media screen and (max-width: 999px) {
        #service .group .service .service-main .more {
          display: block !important;
          width: 58%;
          margin: 30px auto; }
          #service .group .service .service-main .more a {
            display: block;
            text-align: left;
            background: linear-gradient(90deg, #03567f 0%, #3c68c7 100%);
            color: #fff;
            font-size: 16px;
            line-height: 60px;
            border-radius: 10px;
            font-weight: 600;
            padding: 0 30px;
            position: relative; }
            #service .group .service .service-main .more a:after {
              content: '';
              width: 10px;
              height: 10px;
              border-right: 1px solid;
              border-bottom: 1px solid;
              position: absolute;
              right: 20px;
              top: 50%;
              transform: rotate(-45deg) translateY(-50%);
              z-index: 1; }
        #service .group .service.active:after {
          background: url("../img/shared/arow_tog_sp.svg") no-repeat 0 0/100%;
          transform: rotate(180deg); }
    #service .photo-hidden {
      display: none;
      position: relative;
      left: auto;
      top: auto;
      margin: 60px 0; } }
  @media screen and (max-width: 767px) {
    #service {
      padding-bottom: 125px; }
      #service .group .service {
        padding: 38px 0px 10px; }
        #service .group .service .service-main {
          padding-left: 20px;
          padding-right: 20px; }
          #service .group .service .service-main .info {
            padding-bottom: 0; }
          #service .group .service .service-main .photo {
            border-radius: 12px;
            height: fit-content;
            margin: 10px  -20vw 0px 0;
            width: 100%; }
          #service .group .service .service-main .txt {
            width: 100%; }
          #service .group .service .service-main .more {
            width: 220px;
            margin: 40px auto 30px; }
            #service .group .service .service-main .more a {
              line-height: 50px; }
        #service .group .service .service-link {
          padding: 0 20px; }
          #service .group .service .service-link .num {
            font-size: 12px; }
          #service .group .service .service-link dt {
            font-size: 16px; }
          #service .group .service .service-link dd {
            font-size: 18px;
            padding: 7px 0 26px; } }

.js-pager {
  padding: 40px 45px 0;
  max-width: 1300px;
  margin: 0 auto;
  justify-content: flex-start;
  display: flex;
  gap: 20px; }
  .js-pager li {
    display: block;
    line-height: 1;
    font-size: 14px;
    border-radius: 50%;
    display: block;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    color: #8D8D8D;
    border: 1px solid rgba(141, 141, 141, 0); }
    .js-pager li.active {
      border: 1px solid #8d8d8d; }
  @media screen and (max-width: 1360px) {
    .js-pager {
      max-width: 100%;
      padding-left: 60px;
      padding-right: 60px; } }
  @media screen and (max-width: 767px) {
    .js-pager {
      justify-content: center;
      padding: 48px 0 0; } }

#casestudy {
  background-color: #F5F5F5;
  padding: 65px 0 85px; }
  #casestudy .js-full {
    padding: 20px 0 0; }
    #casestudy .js-full .item {
      width: 557px !important;
      padding: 0px 40px 0 0;
      line-height: 32px; }
      #casestudy .js-full .item .box {
        background-color: #fff;
        height: 280px;
        padding: 40px;
        position: relative; }
      #casestudy .js-full .item .photo {
        border: 1px solid #eeeeee;
        width: 163px;
        margin-bottom: 20px; }
      #casestudy .js-full .item .tag dt {
        position: absolute;
        top: 66px;
        left: 226px;
        line-height: 20px; }
        #casestudy .js-full .item .tag dt .tt {
          color: #03567F;
          font-weight: 500;
          letter-spacing: 0.08em;
          padding-bottom: 10px;
          display: inline-block; }
        #casestudy .js-full .item .tag dt .t {
          font-size: 14px; }
          #casestudy .js-full .item .tag dt .t span {
            color: #8D8D8D; }
  @media screen and (max-width: 767px) {
    #casestudy {
      padding: 80px 0 70px; }
      #casestudy .js-full {
        padding: 30px 0 0 25px; }
        #casestudy .js-full .item {
          width: 325px !important;
          padding: 0px 10px;
          line-height: 32px; }
          #casestudy .js-full .item .box {
            height: 345px;
            padding: 25px;
            line-height: 28px; }
          #casestudy .js-full .item .photo {
            width: 100%;
            margin-bottom: 15px; }
          #casestudy .js-full .item .tag dt {
            position: static;
            line-height: 28px;
            padding-bottom: 5px; }
            #casestudy .js-full .item .tag dt .tt {
              padding-bottom: 0; }
            #casestudy .js-full .item .tag dt .t {
              font-size: 12px; } }

#news {
  padding: 170px 0 100px;
  position: relative; }
  #news:before {
    content: '';
    background: url("../img/index/deco.png") no-repeat 0 0/100%;
    width: 650px;
    height: 650px;
    position: absolute;
    top: -238px;
    right: calc(50% - 857px); }
    @media screen and (max-width: 1300px) {
      #news:before {
        right: -210px; } }
    @media screen and (max-width: 999px) {
      #news:before {
        right: -190px;
        width: 600px; } }
    @media screen and (max-width: 767px) {
      #news:before {
        right: -110px;
        width: 351px;
        top: -52px; } }
  @media screen and (max-width: 767px) {
    #news {
      padding: 175px 0 50px; }
      #news .blog-shared {
        padding-bottom: 40px; } }

#youtube {
  padding: 75px 0; }
  #youtube .js-youtube {
    padding: 40px 0 0; }
    #youtube .js-youtube .item {
      padding-right: 20px;
      width: 330px !important; }
      #youtube .js-youtube .item dl {
        background-color: #fff; }
      #youtube .js-youtube .item dd {
        padding: 9px 20px; }
  #youtube .slick-next {
    left: calc(50% - 488px); }
    @media screen and (max-width: 1360px) {
      #youtube .slick-next {
        left: 173px; } }
  @media screen and (max-width: 767px) {
    #youtube {
      padding: 85px 0 50px; }
      #youtube .js-youtube {
        padding: 40px 0 0 20px;
        margin-right: -15px; }
        #youtube .js-youtube .item {
          padding-right: 20px;
          width: 325px !important; }
          #youtube .js-youtube .item dl {
            background-color: #fff; }
          #youtube .js-youtube .item dd {
            padding: 9px 20px; }
      #youtube .js-pager {
        padding-top: 60px; }
      #youtube .slick-arrow {
        left: calc(50% - 115px);
        bottom: -85px; }
      #youtube .slick-next {
        right: calc(50% - 100px);
        left: auto; } }

#recruit {
  padding: 133px 50px 126px;
  position: relative;
  z-index: 2; }
  #recruit .info {
    background: url("../img/index/recruit_bg.jpg") no-repeat center/cover;
    color: #fff;
    border-radius: 20px;
    padding: 70px 0 97px; }
    #recruit .info .txt {
      padding-bottom: 77px; }
    @media screen and (max-width: 999px) {
      #recruit .info {
        padding: 50px 0 77px; } }
  @media screen and (max-width: 1500px) {
    #recruit {
      padding-left: 30px;
      padding-right: 30px; } }
  @media screen and (max-width: 1420px) {
    #recruit .wrap {
      max-width: 100%;
      padding-left: 30px;
      padding-right: 30px; } }
  @media screen and (max-width: 767px) {
    #recruit {
      padding: 105px 15px  100px; }
      #recruit .info {
        border-radius: 10px;
        background: url("../img/index/recruit_bg_sp.jpg") no-repeat center/cover;
        padding: 65px 6px 80px; }
        #recruit .info .txt {
          padding-bottom: 33px;
          margin-right: -3px; }
        #recruit .info .bnr-shared a {
          padding: 0 10px 0 0;
          text-align: center;
          letter-spacing: 0; }
        #recruit .info .h2-tt {
          font-size: 40px; } }

#outline {
  position: relative;
  z-index: 1; }
  #outline:after {
    content: '';
    z-index: -1;
    background: url("../img/index/banner_decor.png") no-repeat 0 0/100%;
    width: 1045px;
    height: 1123px;
    position: absolute;
    top: -282px;
    right: 0; }
  #outline .banner {
    padding: 0 30px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease; }
    #outline .banner:hover {
      opacity: 0.8; }
    #outline .banner:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: url("../img/index/gradient_bg.jpg") no-repeat 0 0/100%;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      width: calc(50% + 550px); }
  #outline .wrap {
    padding: 55px 0 50px; }
    #outline .wrap:before {
      content: '';
      background: url("../img/shared/arow4.svg") no-repeat 0 0/100%;
      width: 60px;
      height: 60px;
      position: absolute;
      top: 50%;
      right: calc(50% - 445px);
      transform: translateY(-50%); }
  #outline a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; }
  #outline .h2-tt {
    font-size: 60px;
    padding-bottom: 30px; }
    #outline .h2-tt .ico {
      background-size: 10px;
      font-size: 14px;
      padding: 0px 0 0 16px;
      margin: 5px 0 0; }
  #outline .logo {
    width: 150px; }
  @media screen and (max-width: 1160px) {
    #outline:before {
      width: calc(100% - 30px); }
    #outline .wrap:before {
      right: 105px; } }
  @media screen and (max-width: 999px) {
    #outline .wrap:before {
      right: 55px; } }
  @media screen and (max-width: 767px) {
    #outline {
      padding: 0 15px 0 0; }
      #outline:after {
        background: url("../img/index/banner_decor_sp.png") no-repeat 0 0/100%;
        width: 375px;
        top: -90px;
        right: 0; }
      #outline .h2-tt {
        font-size: 40px;
        padding-bottom: 24px;
        line-height: 1.4; }
      #outline .wrap {
        padding: 60px 0 80px; }
      #outline .wrap:before {
        right: 5px; }
      #outline .banner {
        padding: 0 15px; }
        #outline .banner:before {
          width: 100%;
          background-size: cover; } }