@charset "UTF-8";
/*common*/
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: 3.4vw;
  line-height: 1.5;
  color: #282828;
  -webkit-text-size-adjust: 100%;
  background: #e4eaed; }

.en {
  font-family: "Roboto Condensed", sans-serif; }

a {
  color: #282828;
  text-decoration: none;
  transition: 0.3s; }

a:hover {
  color: #282828;
  transition: 0.3s;
  opacity: 0.8; }

.pc {
  display: none; }

img {
  width: 100%; }

#page-top {
  width: 17%;
  position: fixed;
  right: 5%;
  bottom: 3%;
  z-index: 2;
  opacity: 0;
  transform: translateX(100px); }
  #page-top a {
    display: block;
    background: url("/common/images/pagetop.png") no-repeat center center;
    background-size: 60px 60px;
    width: 60px;
    height: 60px; }

#page-top.LeftMove {
  animation: LeftAnime 0.5s forwards; }

#page-top.RightMove {
  animation: RightAnime 0.5s forwards; }

:root {
  --color_base:#0080c8; }

header h1 {
  width: 40%;
  position: absolute;
  left: 10%;
  top: 5%;
  z-index: 2; }

.nav {
  display: none; }

.menu {
  display: block;
  background: #fff;
  font-size: 3.6vw;
  font-weight: 600;
  border-radius: 4px;
  display: flex;
  padding: 1vw 2vw;
  width: 100%; }
  .menu li a {
    display: block;
    padding: 1vw 1vw 1vw 1vw;
    white-space: nowrap; }
  .menu li a:hover {
    color: var(--color_base); }
  .menu li span {
    display: none; }

.sidenav {
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 20;
  top: 0;
  right: -100%;
  transition: all 0.6s;
  height: 100vh;
  letter-spacing: 0;
  overflow-y: auto;
  height: 100vh; }
  .sidenav dl {
    width: 84%;
    margin: 0 auto;
    padding: 15% 0%;
    font-size: 3.6vw;
    font-weight: 600; }
    .sidenav dl a {
      display: block;
      background: url("../images/index/btn_arrow_black.svg") no-repeat right top 5vw;
      background-size: 3vw;
      padding: 4vw 1vw; }
    .sidenav dl dt {
      border-bottom: 1px solid #ccc; }
    .sidenav dl dd {
      padding-left: 4vw;
      border-bottom: 1px solid #ccc; }
      .sidenav dl dd ul li {
        font-size: 3.0vw;
        border-bottom: 1px dotted #ccc; }
        .sidenav dl dd ul li a {
          background-position: top 5vw; }
      .sidenav dl dd ul li:last-child {
        border-bottom: none; }

.sidenav.panelactive {
  right: 0; }

.openbtn {
  position: absolute;
  z-index: 100;
  /*ボタンを最前面に*/
  right: 3%;
  top: 2%;
  cursor: pointer;
  width: 12%;
  transition: all 0.6s;
  z-index: 10; }

.openbtn2 {
  position: absolute;
  z-index: 100;
  /*ボタンを最前面に*/
  right: 5%;
  top: 4%;
  cursor: pointer;
  width: 8%;
  transition: all 0.6s; }

.menu-item a {
  display: block; }

.menu-panel {
  position: absolute;
  top: 12.5%;
  left: 0;
  width: 80%;
  background-color: #e4eaed;
  padding: 3% 10% 1% 10%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 999; }
  .menu-panel ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .menu-panel ul li {
      width: 23%;
      margin: 0 2.5% 2% 0; }
    .menu-panel ul li:nth-last-child(4n) {
      margin-right: 0; }
    .menu-panel ul a {
      display: block;
      line-height: 1.4;
      overflow: hidden; }
      .menu-panel ul a img {
        margin-bottom: 3%;
        border-radius: 8px; }

.menu-panel.active {
  opacity: 1;
  visibility: visible; }

.contact {
  position: fixed;
  right: 0%;
  bottom: 5%;
  z-index: 10;
  writing-mode: vertical-rl; }
  .contact a {
    display: block;
    background: var(--color_base);
    color: #fff;
    font-size: 3.6vw;
    font-weight: 600;
    border-radius: 3px 0px 0px 3px;
    padding: 4vw 2vw;
    white-space: nowrap; }
  .contact a:hover {
    background: #fff;
    color: var(--color_base);
    opacity: 1; }

#mainVisual {
  overflow: hidden; }
  #mainVisual .warp {
    background: url("../images/index/mv_bg.webp") no-repeat center right -45vw;
    background-size: cover;
    height: 100vh; }
  #mainVisual dl {
    color: #fff;
    position: absolute;
    left: 10%;
    top: 35vh; }
    #mainVisual dl dt {
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: 7.6vw;
      font-weight: 700;
      position: relative;
      line-height: 1.3;
      letter-spacing: 1px;
      margin-bottom: 11%; }
    #mainVisual dl dt::before {
      content: "";
      position: absolute;
      bottom: -20%;
      width: 10vw;
      height: 1px;
      background: #fff; }
    #mainVisual dl dd {
      font-size: 3.0vw;
      font-weight: 600;
      line-height: 1.6;
      letter-spacing: 2px; }

h3 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 8.0vw;
  font-weight: 700;
  text-align: center;
  padding: 10% 0 2% 0;
  background: #e4eaed; }

#about {
  color: #fff;
  background: url("../images/index/about_bg.webp") no-repeat center top;
  background-size: cover;
  padding: 16% 8% 16% 8%; }
  #about .ttlArea {
    text-align: center;
    margin-bottom: 16%; }
    #about .ttlArea h2 {
      font-size: 4.8vw;
      letter-spacing: 1px; }
    #about .ttlArea p {
      font-weight: 700;
      font-size: 3.0vw; }
  #about h4 {
    font-size: 4.8vw;
    margin-bottom: 7%; }
  #about .readArea {
    font-weight: 500;
    margin-bottom: 10%; }
    #about .readArea p {
      margin-bottom: 8%; }
    #about .readArea ol {
      margin-bottom: 8%; }
      #about .readArea ol li {
        color: #333;
        margin-bottom: 2%;
        font-weight: 700;
        line-height: 1.5;
        background: #fff;
        padding: 2% 3% 3% 3%;
        width: 81%; }
        #about .readArea ol li span {
          display: block;
          text-indent: -1em;
          padding-left: 1em; }
  #about ul li {
    margin-bottom: 5%; }
    #about ul li dl {
      font-family: "Roboto Condensed", sans-serif; }
      #about ul li dl dt {
        font-size: 4.2vw;
        font-weight: 600; }
      #about ul li dl dd {
        font-size: 3.0vw; }
      #about ul li dl .subttl {
        padding: 2% 0 3% 0; }
      #about ul li dl .link {
        position: relative;
        text-align: right;
        padding-right: 4vw;
        font-size: 3.6vw; }
        #about ul li dl .link img {
          width: 3vw;
          position: absolute;
          right: 0;
          top: 22%; }
    #about ul li a {
      color: #fff;
      display: block;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      padding: 8% 10%; }
  #about .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
    color: #333; }
    #about .modal .ttlArea {
      text-align: center;
      margin-bottom: 0%;
      padding: 12% 0; }
      #about .modal .ttlArea h5 {
        font-size: 4.6vw;
        color: var(--color_base); }
      #about .modal .ttlArea p {
        font-family: "Roboto Condensed", sans-serif; }
    #about .modal .txtArea {
      text-align: left;
      margin-bottom: 6%; }
      #about .modal .txtArea .ttl {
        font-size: 4.0vw;
        font-weight: 600;
        margin-bottom: 5%; }
      #about .modal .txtArea p {
        margin-bottom: 6%; }
      #about .modal .txtArea dl {
        text-align: left;
        margin-bottom: 6%; }
        #about .modal .txtArea dl dt {
          color: var(--color_base);
          font-weight: 600;
          font-size: 3.8vw;
          margin-bottom: 2%; }
      #about .modal .txtArea span {
        color: var(--color_base);
        font-weight: 600;
        vertical-align: top; }
      #about .modal .txtArea b {
        color: var(--color_base);
        font-weight: 600;
        font-size: 3.8vw; }
      #about .modal .txtArea ol {
        text-align: left;
        margin-bottom: 6%;
        margin-left: 0%; }
        #about .modal .txtArea ol li {
          list-style: disc;
          margin-left: 25px; }
  #about .modal.show {
    display: flex;
    opacity: 1; }
  #about .modal-content {
    background: white;
    padding: 8%;
    border-radius: 10px;
    overflow-y: scroll;
    max-width: 70%;
    height: 80%;
    animation: fadeInUp 0.4s ease;
    position: relative;
    line-height: 1.5; }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
  #about .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer; }

#service {
  position: relative; }
  #service #ma {
    background: url("../images/index/ma_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #dx {
    background: url("../images/index/dx_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #security {
    background: url("../images/index/security_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #salesforce {
    background: url("../images/index/salesforce_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #ec {
    background: url("../images/index/ec_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #recruit {
    background: url("../images/index/recruit_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service #other {
    background: url("../images/index/other_bg.webp") no-repeat center center;
    background-size: cover;
    height: 100vh; }
  #service .service {
    position: sticky;
    top: 0;
    overflow: hidden; }
    #service .service .pht {
      overflow: hidden;
      padding: 8%;
      height: 40vw;
      margin-bottom: 5%; }
    #service .service .txtArea {
      color: #fff;
      padding: 0 8%; }
      #service .service .txtArea dl {
        margin-bottom: 3%; }
        #service .service .txtArea dl dt {
          font-size: 3.4vw;
          font-weight: 600; }
        #service .service .txtArea dl dd {
          font-family: "Roboto Condensed", sans-serif;
          font-size: 7.0vw;
          font-weight: 700;
          line-height: 1.2; }
      #service .service .txtArea p {
        font-weight: 500;
        margin-bottom: 5%; }
      #service .service .txtArea .linkBtn {
        font-family: "Roboto Condensed", sans-serif; }
        #service .service .txtArea .linkBtn a {
          display: block;
          background: #fff;
          font-size: 3.6vw;
          font-weight: 500;
          border-radius: 4px;
          padding: 5% 10%;
          position: relative;
          width: 25vw; }
          #service .service .txtArea .linkBtn a img {
            position: absolute;
            right: 10%;
            top: 39%;
            width: 3vw; }
    #service .service .number {
      position: absolute;
      left: 0%;
      top: 5%;
      writing-mode: vertical-rl;
      font-family: "Roboto Condensed", sans-serif;
      color: #fff;
      font-size: 7.0vw;
      font-weight: 700; }

#news {
  width: 90%;
  margin: 0 auto 15% auto; }
  #news ul li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5%;
    margin-bottom: 5%; }
    #news ul li a {
      display: block; }
    #news ul li dl {
      display: flex;
      justify-content: space-between; }
      #news ul li dl dt {
        width: 30%;
        overflow: hidden;
        border-radius: 4px; }
      #news ul li dl dd {
        width: 65%;
        font-size: 3.6vw;
        font-weight: 600; }
        #news ul li dl dd time {
          font-family: "Roboto Condensed", sans-serif;
          color: #999;
          margin-right: 15%; }
        #news ul li dl dd span {
          font-family: "Roboto Condensed", sans-serif;
          color: #999; }

#linkArea li:nth-child(1) {
  background: url("../images/index/company_bg.webp") no-repeat center center;
  background-size: cover; }
#linkArea li:nth-child(2) {
  background: url("../images/index/contact_bg.webp") no-repeat center center;
  background-size: cover; }
#linkArea a {
  display: block;
  padding: 12% 0% 6% 8%; }
#linkArea a:hover {
  opacity: 0.7; }
#linkArea dl {
  color: #fff; }
#linkArea dt {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 8.0vw; }
#linkArea dd {
  font-weight: 600;
  margin-bottom: 10%; }
#linkArea .link {
  font-family: "Roboto Condensed", sans-serif;
  display: block;
  background: #fff;
  font-size: 3.6vw;
  font-weight: 500;
  border-radius: 4px;
  padding: 5% 10%;
  position: relative;
  width: 25vw;
  color: #333; }
  #linkArea .link img {
    position: absolute;
    right: 10%;
    top: 39%;
    width: 3vw; }

footer {
  background: #000;
  color: #999999;
  font-family: "Roboto Condensed", sans-serif;
  position: relative;
  padding: 20% 0 12% 0; }
  footer a {
    color: #999999; }
  footer a:hover {
    color: #fff; }
  footer b {
    display: block;
    font-weight: 700;
    font-size: 6.0vw;
    margin-bottom: 4%; }
  footer .copy {
    font-weight: 300;
    padding: 6% 0 0 8%;
    font-size: 3.0vw; }
  footer .sitemap {
    width: 84%;
    margin: 0 auto 0 auto; }
    footer .sitemap div {
      margin-right: 3%; }
  footer ul {
    margin-bottom: 6%; }
    footer ul li {
      margin-bottom: 3%; }
  footer .logo {
    width: 50%;
    padding: 6% 0 0 8%; }
  footer .pagetop {
    position: absolute;
    right: 5%;
    top: 3%;
    padding-right: 4.0vw;
    display: block;
    font-weight: 700;
    font-size: 5.0vw;
    background: url("../images/index/btn_arrowup_white.svg") no-repeat right center;
    background-size: 3vw; }