@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&Noto+Serif+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
* css precss ver1.0
* Written by Variety Article Factory
******************************************vaf*/
/*
* 引数
**************************************/
:root {
  --inner_width: 1220px; /* padding in */
  --fontfamily_def: "Noto Sans JP", "Helvetica","Roboto","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
  --fontfamily_mincho: "Noto Serif JP", "Hiragino Mincho Pro","Yu Mincho","MS Mincho",sans-serif;
  --lineheight_def: 1.5;
  --lineheight_mid: 1.9;
  --lineheight_hi: 2.5;
  --header_height: 80px;
  --animate_spead: 0.3s;
  --img_maxsize: 600px;
  
  --sp_lineheight_def: 1.5;
  --sp_lineheight_mid: 1.7;
  --sp_lineheight_hi: 2.0;
  --sp_header_height: 70px;
  
  --sp_top_section_margin_top: 80px;
  --sp_top_section_margin_bottom: 72px;
  --sp_sec_section_margin_top: 60px;
  --sp_sec_section_margin_bottom: 54px;
  --sp_ttob_margin: 32px;
  --sp_btob_margin: 28px;
  
  --color_def: #ffffff;
  --color_link: #ffffff;
  --color_white: #ffffff;
  --color_black: #000000;
  --color_blue: #0000aa;
  --color_red: #aa0000;
  --color_purple: #8503B8;
}

/*
* font-size
**************************************/
/*
font-size: 10px = 0.625rem
font-size: 11px = 0.6875rem
font-size: 12px = 0.75rem
font-size: 14px = 0.875rem
font-size: 18px = 1.125rem
font-size: 20px = 1.25rem
font-size: 21px = 1.3125rem
font-size: 22px = 1.375rem
font-size: 24px = 1.5rem
font-size: 26px = 1.625rem
font-size: 28px = 1.75rem
font-size: 30px = 1.875rem
font-size: 32px = 2rem
*/


/*
* keyframes
**************************************/
@keyframes --key_hoveranimasion {
  /*0% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }*/
}


/*
* 共通要素（base）
**************************************/
body{
  font-family: var(--fontfamily_def);
  color: var(--color_def);
  font-size: var(--fontsize_def);
  line-height: var(--lineheight_def);
}
a {
  color: var(--color_link);
  text-decoration: none;
  
  &:not(.el_btn):hover {
    color: var(--color_link);
    text-decoration: underline;
    
    & img {
      opacity: 0.7;
      animation-name: --key_hoveranimasion;
      animation-duration: 0.2s;
    }
  }
}
ul,ol {
  list-style: none;
}
img {
  max-width: 100%;
}


/*
* 強制要素（helper）
**************************************/
/* text design */
.hp_gothic{
  font-family: var(--fontfamily_def) !important;
}
.hp_mincho{
  font-family: var(--fontfamily_mincho) !important;
}
.hp_t_left {
  text-align: left !important;
}
.hp_t_center {
  text-align: center !important;
}
.hp_t_right {
  text-align: right !important;
}
.hp_red {
  color: var(--color_link) !important;
}
.hp_blue {
  color: var(--color_blue) !important;
}


/*
* プログラム要素（Javascript）
**************************************/
.js_fixed {}
.js_hide {
  display: none !important;
}
.js_imgparallax {
  overflow:hidden;
  position:relative;
  
  .js_imgparallax__img {
    transform: translateY(0);
  }
}
.js_textparallax {
  overflow: hidden;
  .js_textparallax__text {
    display: block;
    transform: translateY(100%);
    transition: transform 1s ease-in-out;
    
    &.active{
      transform: translateY(0);
    }
  }
}

/*
* エレメント要素（element）
**************************************/
/* btn */
.el_btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0px solid var(--color_link);
  border-radius: 32px;
  
  width: 325px;
  height: 64px;
  padding: 20px 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color_black);
  background-color: var(--color_white);
  
  &:hover {
    text-decoration: none;
  }
  &:after {
  }
  
  &.el_btn__white {
    color: var(--color_black);
    background-color: var(--color_white);
    &:hover {
      color: var(--color_white);
      background-color: var(--color_purple);
    }
  }
  &.el_btn__transparent {
    color: var(--color_white);
    border: 1px solid var(--color_white);
    background-color: transparent;
    &:hover {
      border: 1px solid var(--color_purple);
      color: var(--color_white);
      background-color: var(--color_purple);
    }
  }
  
  &.el_btn_icon {
    &::after {
      content: "";
    }
    &.el_btn_icon_link {
      &::after {
        position: relative;
        left: 5px;
        width: 23px;
        height: 10px;
        mask: url("../img/common/icon_link.svg") no-repeat;
        background-color: var(--color_black);
      }
      &:hover {
        &::after {
          background-color: var(--color_white);
        }
      }
    }
  }
}

/* imgbox */
.el_imgbox {
  width: 100%;
  max-width: var(--img_maxsize);
  & img {
    width: 100%;
  }
}

/* colorbox */
.el_colorbox {
  .el_colorbox__white {
    background-color: var(--color_white);
  }
}
/* title */
.el_title {
  font-weight: 700;
  
  .el_title__big {
    font-size: 6.75rem;
    line-height: 1.5;
  }
  .el_title__small {
    font-size: 1.25rem;
  }
}

/* text */
.el_text {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  
  & + .el_text {
    margin-top: 1em;
  }
}

/* Copyright */
.el_copyright {
  opacity: 0.5;
  font-size: 0.875rem;
}

/* texticon */
.el_texticon {
  position: relative;
  padding-left: 30px;
  &.el_texticon__ring {
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: transparent none no-repeat scroll 0 0;
      background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
    }
    &:after {
      content: "";
      position: absolute;
      left: 6px;
      top: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #000000;
    }
  }
}
/*
* 共通レイヤー要素（layer）
**************************************/
/* wrapper */
.ly_wrap {
}

/* header */
.ly_header {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  pointer-events: auto;
  transition: .5s;
  
  .ly_header__inner {
    align-items: center;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    
    transform: translateX(0);
  }
  
  .ly_header__sitelogo {
     flex-shrink: 0;
     width: 20%;
     max-width: 208px;
     a {
      display: block;
     }
     
    .bbase {
      display: block;
    }
    .wbase {
      display: none;
    }
  }
  .ly_header_nav {
    width: 100%;
    .menu {
      list-style-type: none;
      display: flex;
      justify-content: flex-end;
      
      .menu-item {
        flex-shrink: 0;
        margin-left: 50px;
      }
    }
  }
  
  &.fixed {
    position: fixed;
    top: 0;
    z-index: 1000;
  }
  
  &.navcolor {
    background: rgba(255,255,255,1);
   
    a {
      color: #000000;
    }
    
    .bbase {
      display: none;
    }
    .wbase {
      display: block;
    }
    
    .el_btn-burger {
      background-color: var(--color_black);
    }
  }
  
  .el_btn-burger {
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 26px;
    height: 18px;
    border: 0;
    font-size: 0;
    color: var(--color_white);
    mask: url("../img/common/icon_spmenu.svg") no-repeat;
    background-color: var(--color_white);
  }
  
  &.open {
    .el_btn-burger {
      mask: url("../img/common/icon_spmenu-close.svg") no-repeat;
    }
  }
  .nav-toggle {
    display: none;
  }
  .nav-toggle:checked ~ .nav .nav-list {
    display: none;
  }

  
}


/* footer */
.ly_footer {
  padding: 80px 0;
  background-color: var(--color_black);
  .ly_footer_top {
    position: relative;
    padding: 0 40px;
    
    .bl_flex__left {
      .el_pmark {
        margin-top: 30px;
      }
    }
    .bl_flex__right {
      position: relative;
      
      .el_logo {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 310px;
        height: 30px;
      }
    }
    
    .menu {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 30px;
      width: 100%;
      max-width: 470px;
      padding: 0;
      
      .menu-item {
        width: calc(50% - 30px);
        font-size: 1rem;
        font-weight: 700;
      }
    }
    
  }
  .ly_footer_bottom {
    padding: 20px;
    margin-top: 70px;
    border-top: 1px solid var(--color_white);
    text-align: center;
    
    &.bl_flex {
      gap: 40px;
    }
    
    .el_copyright{
      padding-top: 10px;
      padding-left: 110px;
    }
  }
  
  .bl_inner {
    max-width: 1440px;
  }
  
  
}
.ly_footer_inner {
}

/* contents */
.ly_cont {
  padding-top: var(--header_height);
}
.ly_cont_inner {
}


/*
* 共通ブロック要素（block）
**************************************/
/* inner */
.bl_inner {
  position: relative;
  max-width: var(--inner_width);
  margin: auto;
  padding: 0 20px;
}

/* flex */
.bl_flex {
  display: flex;
  
  &.bl_flex__wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  &.bl_flex__column {
    flex-direction: column;
  }
  &.bl_flex__shrink {
    flex-shrink: 0;
  }
  &.bl_flex__start {
    justify-content: flex-start;
  }
  &.bl_flex__center {
    justify-content: center;
  }
  &.bl_flex__end {
    justify-content: flex-end;
  }
  &.bl_flex__bw {
    justify-content: space-between;
  }
  &.bl_flex__astart {
    align-items: flex-start;
  }
  &.bl_flex__acenter {
    align-items: center;
  }
  &.bl_flex__aend {
    align-items: flex-end;
  }
  & > .bl_flex__left {
    order: 1;
  }
  & > .bl_flex__right {
    order: 2;
  }
}
/* grid */
.bl_grid {
  display: grid;
  grid-template-rows: auto auto;
	grid-template-columns: auto auto;
	
  .bl_grid__item {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
}

/* sectionbox */
.bl_section {
  padding: 100px 0;
  background: linear-gradient(90deg, #0c0c10, #000000);
}

/* btnbox */
.bl_btnbox {
  margin: auto;
  margin-top: 80px;
  text-align: center;
}

/*
* オリジナル要素（origin）
**************************************/
.box_pagination {}
.box_contact {
  position: relative;
  background: transparent url("../img/components/contact_bg.png") no-repeat scroll left 0% top 50%;
  background-size: cover;
  
  .el_title {
    margin-bottom: 20px;
    .el_title__big {
      display: block;
    }
  }
  .el_text {
    font-size: 1.125rem;
  }
  .el_btn {
    width: 325px;
  }
  
}

.box_sec {
  padding: 0;
  background: transparent none no-repeat scroll 0 0;
  background-image: linear-gradient(90deg, #0c0c10, #000000);
}
.box_sec_head {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 140px 40px 100px;
  text-align: center;
  
  background: transparent none no-repeat scroll 0 0;
  background-image: linear-gradient(90deg, #2d023c 0%, #180324 22%, #060541 77%, #000447 100%);
  
  background-size: 500% 500%;
  background-repeat: repeat-x;
  animation: gradientFlow 10s linear infinite;
  
  /*&::before {
    content: "";
    position: absolute;
    right: -175px;
    top: -150px;
    z-index: 1;
    width: 881px;
    height: 492px;
    background: transparent url("../img/sec_head_bg.png") no-repeat scroll 0 0;
    background-size: cover;
  }*/
  
  .el_title {
    position: relative;
    z-index: 2;
    .el_title__big {
      display: block;
      margin-bottom: 20px;
      font-size: 5.5rem;
      font-weight: bold;
    }
    .el_title__small {
      display: block;
      font-size: 1.5rem;
      font-weight: bold;
    }
  }
}
@keyframes gradientFlow {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}



.box_sec_body {
  padding: 100px 0 200px;
}

.box_tablewrap {
  display: block;
  width: 100%;
  padding: 65px 70px;
  border-radius: 40px;
  background-color: var(--color_black);
}
.box_table {
  display: block;
  width: 100%;
  tbody {
    display: block;
    width: 100%;
  }
  .box_table__caption {
    display: block;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 20px;
    margin-bottom: 40px;
    font-size: 1.5rem;
    font-weight: 700;
  }
  .box_table__tr {
    display: flex;
    gap: 80px;
    border-top: 1px solid #ffffff;
    padding: 40px 0;
  }
  .box_table__th {
    display: block;
    .el_mark {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 190px;
      height: 58px;
      padding: 5px 10px;
      border: 1px solid #ffffff;
      border-radius: 90px;
      font-size: 1.25rem;
      font-weight: 700;
    }
  }
  .box_table__td {
    display: block;
    padding: 10px 0 0px;
    font-size: 1.125rem;
    line-height: 1.9;
    font-weight: 700;
    
    &.el_lh {
      line-height: 2.45;
    }
    
    .el_big {
      font-size: 1.5rem;
    }
    .el_small {
      font-size: 1.125rem;
    }
    
    .bl_pmark {
      gap: 40px;
      
      .bl_pmark__text {
        width: 100%;
      }
      .bl_pmark__img {
        flex-shrink: 0;
        margin-left: 90px;
      }
    }
  }
  
  .box_table__tr:first-child {
    border: 0;
    padding-top: 0;
  }
  
  & + .box_table {
    margin-top: 100px;
  }
  
}


/*
* ページ固有要素（unique）
**************************************/
/* home page */
.un_home {}
.un_home_kv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  color: #FFF;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: linear-gradient(90deg, #0c0c10, #000000);
  
  .un_home_kv_videobox {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    
    &::before ,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 900px;
      height: 850px;
      margin: auto;
      border-radius: 50%;
      opacity: 0.43;
      filter: blur(183px);
      background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
      
      transform: translateZ(0);
      pointer-events: none;
    }
    &::before {
      left: -600px;
    }
    &::after {
      right: -600px;
    }
    
    video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      
      opacity: 1;
      transition: opacity 1.5s ease;
      
      &.bgvideo {
        opacity: 0;
        z-index: 1;
      }
      
      &.is-fadeout{
        opacity: 0;
        pointer-events: none;
      }
      &.is-active{
        opacity: 1;
      }
      
    }
    
  }
  .un_home_kv_textbox {
    position: absolute;
    top: 215px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-direction: column; 
    width: 100%;
    max-width: 1030px;
    height: 400px;
    margin: auto;
    
    opacity: 0;
    transition: opacity 1.5s ease;
    
    &.is-active{
      opacity: 1;
    }
    
    .el_title {
      margin-bottom: 30px;
      font-size: 4.0rem;
      font-weight: 700;
    }
    .el_text {
      text-align: center;
      font-size: 1.0rem;
      font-weight: 400;
    }
  }
  
  
}
.un_home_about {
  overflow: hidden;
  padding-top: 200px;
  padding-bottom: 0px;
  background: transparent url("../img/top/about_bg.png") no-repeat scroll 0 0;
  background-size: cover;
  
  .bl_inner {
    max-width: 1060px;
  }
  
  .bl_flex {
    gap: 40px;
    .bl_flex__left {
      width: 580px;
    }
    .bl_flex__right {
      position: relative;
      padding-top: 40px;
      
      &::before {
        content: "";
        position: absolute;
        right: -230px;
        top: -60px;
        z-index: 1;
        width: 558px;
        height: 558px;
        background: transparent url("../img/components/service_features_bgicon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
  }
  .el_title {
    margin-bottom: 75px;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      top: -140px;
      left: -140px;
      z-index: 2;
      width: 285px;
      height: 285px;
      margin: auto;
      border-radius: 50%;
      opacity: 0.43;
      filter: blur(183px);
      background-image: linear-gradient(90deg, #FFFFFF 0%, #7D7D7D 22%, #525252 77%, #000000 100%);
      
      transform: translateZ(0);
      pointer-events: none;
    }
    
    .el_title__big {
      line-height: 1.1;
    }
  }
  .un_home_about__text {
    margin-bottom: 85px;
    .el_text {
      font-size: 1.125rem;
      & + .el_text {
        margin-top: 2em;
      }
      
      .el_text__big {
        display: block;
        font-size: 2.3125rem;
        font-weight: 700;
        line-height: 1.3;
      }
    }
  }
  .un_home_about__btnbox {
  
  }
}
.un_home_about_imgbox {
  .un_home_about_imgbox__img {
    
  }
  
  &.un_home_about_imgbox__box1 {
    position: relative;
    z-index: 5;
    width:430px;
    height:590px;
    border-radius:40px;
  }
  &.un_home_about_imgbox__box2 {
    position: relative;
    top: -85px;
    right: -220px;
    z-index: 5;
    width:325px;
    height:220px;
    border-radius:30px;
  }
}
.un_home_service {
  background: transparent url("../img/top/service_bg.png") no-repeat scroll 0 0;
  background-size: cover;
  .el_title {
    margin-bottom: 30px;
    
    .el_title__big {
      line-height: 1.1;
    }
  }
  .el_text {
    margin-bottom: 80px;
  }
  .un_home_service_imgbox {
    margin-bottom: 80px;
  }
  .un_home_service_cards {
    margin-bottom: 80px;
    
  }
  .un_home_service_btnbox {
    text-align: center;
    .el_btn {
      width: 325px;
    }
  }
  
}
.un_home_service_cards {
  padding: 0;
  gap: 50px;
  .bl_card {
    overflow: hidden;
    position: relative;
    width: calc(50% - 25px);
    max-width: 550px;
    padding: 60px 70px;
    border-radius: 20px;
    background-color: var(--color_black);
    
    &::before {
      content: "";
      position: absolute;
      right: -200px;
      top: -150px;
      z-index: 1;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      opacity: 0.4;
      transform: rotate(45deg);
      filter: blur(183px);
      background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
      
      transform: translateZ(0);
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 2;
      width: 250px;
      height: 250px;
      opacity: 0.50;
      background: transparent none no-repeat scroll 0 0;
    }
    
    
    .bl_card_head {
      position: relative;
      z-index: 5;
      .el_title {
        .el_title__small {
          display: block;
          margin-bottom: 15px;
          font-weight: 400;
          font-size: 1.125rem;
        }
        .el_title__big {
          display: block;
          font-size: 2.5rem;
          font-weight: 700;
          line-height: 1.3;
        }
      }
    }
    .bl_card_list {
      padding: 0;
      margin-top: 40px;
      border-top: 1px solid var(--color_white);
      .bl_card_list__item {
        border-bottom: 1px solid var(--color_white);
        
        .el_link {
          position: relative;
          display: block;
          padding: 20px;
          font-weight: 700;
          
          &::after {
            content: "";
            position: absolute;
            right: 20px;
            top: 0;
            bottom: 0;
            display: inline-block;
            width: 23px;
            height: 10px;
            margin: auto;
            mask: url("../img/common/icon_link.svg") no-repeat;
            background-color: var(--color_white);
          }
        }
      }
    }
  }
  .bl_card_consulting {
    &::after {
      background: transparent url("../img/service/consulting_title_icon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
  }
  .bl_card_system {
    &::after {
      background: transparent url("../img/service/system_title_icon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
  }
  .bl_card_ai {
    &::after {
      background: transparent url("../img/service/ai_title_icon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
  }
  .bl_card_cloud {
    &::after {
      background: transparent url("../img/service/cloud_title_icon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
  }
}

.un_home_recruit {
  background: transparent url("../img/top/recruit_bg.png") no-repeat scroll 0 0;
  background-size: cover;
  
  .el_title {
    margin-bottom: 50px;
    text-align: center;
  }
}
.un_home_recruit_cards {
  padding: 0;
  gap: 30px;
  .bl_card__item {
    position: relative;
    display: flex;
    align-items: flex-end;
    max-width: 425px;
    width: calc(50% - 30px);
    min-height: 550px;
    
    a:hover {
      text-decoration: none;
    }
    
    .un_home_recruit_cards__imgbox {
      height: 550px;
      border-radius: 20px;
    }
    .un_home_recruit_cards__textbox {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: left;
      
      &::before {
        content: "";
        position: relative;
        display: block;
        height: 300px;
        width: 100%;
        background-image: linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,1) 100%);
      }
      
      .el_title {
        position: absolute;
        bottom: 0;
        left: 20px;
        font-size: 2rem;
        font-weight: 400;
      }
    }
  }
}

/* xxxxx page */
.un_contact {
  .box_sec_body {
    .bl_inner {
      max-width: 1180px;
      padding: 80px;
      border-radius: 40px;
      background-color: #000000;
    }
    .el_text {
      margin-bottom: 80px;
      font-size: 0.875rem;
      line-height: 2.1;
      font-weight: 500;
      text-align: center;
    }
  }
  
  .contact_form {
    width: 100%;
    max-width: 630px;
    margin: 0 auto;
    
    dl {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 45px;
    }
    dt,
    dd {
      margin-bottom: 25px;
    }
    dt::last-child,
    dd::last-child {
      margin-bottom: 0;
    }
    dt {
      width: 30%;
      font-size: 1.0rem;;
      text-align: left;

      label {
        position: relative;
        top: 8px;
        left: 0;
        display: flex;
        align-items: center;
      }
    }
    dd {
      width: 70%;
      position: relative;
      font-size: 1.0rem;;
      text-align: left;
    }
    input[type=text] ,
    input[type=email] ,
    input[type=tel] ,
    textarea {
      -webkit-appearance: none;
      width: 95%;
      border: 1px solid #AFAAA5;
      border-radius: 8px;
      padding: 10px;
      margin-left: 1.3rem;
      outline: none;
     
      &::placeholder {
        color:#868D98;
        font-weight: normal;
      }
    }
    input[type=text]:focus ,
    input[type=email]:focus ,
    input[type=tel]:focus ,
    textarea:focus {
      border: 1px solid #AFAAA5;
      -webkit-appearance: none;
      outline: none;
    }

    .el_checkbtn {
      margin-bottom: 10px;
      
      .wpcf7-list-item {
        margin-left: 0;
      }
    }
    .privacy {
      overflow: auto;
      width: 100%;
      height: 186px;
      padding: 20px;
      margin: auto;
      margin-bottom: 55px;
      border: 0;
      border-radius: 12px;
      color: #000000;
      background-color: #ffffff;
      

      pre {
        margin-top: 0;
        word-wrap: break-word;
        white-space: break-spaces;
      }
      
    }
    .mark {
      position: relative;
      display:inline-flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      padding: 3px 5px;
      border-radius: 4px;
      font-size: 0.5rem;
      font-weight: 500;
      color: #888888;
      background-color: #F4F4F4;
      
      &.requied {
        color: #ffffff;
        background: transparent none no-repeat scroll 0 0;
        background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
      }
      
    }
    
    .submitbtn {
      display: block;
      margin: 0 auto;
      padding: 0;
      
      input[type="submit"]{
        cursor: pointer;
        -webkit-appearance: none !important;
        display: block;
        box-shadow: none;
        padding: 10px 100px;
        width: 360px;
        margin: 0 auto;
        outline: none;
        border: 0;
        border-radius: 34px;
        color: #ffffff;
        background: transparent none no-repeat scroll 0 0;
        background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
        
        &:hover{
          opacity: 0.7;
          animation-name: HoverAnimation;
          animation-duration: 0.2s;
        }
      }
      
    }
  }
}


.un_privacypolicy {
  .box_sec_body {
    .el_title {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 1.25rem;
    }
    .el_text {
      font-size: 1rem;
      font-weight: 500;
      & + .el_text {
        margin-top: 1rem;
      }
      & + .el_title {
        margin-top: 2rem;
      }
      &.el_text__toptext {
        margin-bottom: 80px;
      }
    }
  }
  
}
.un_privacyhandling {
  .box_sec_body {
    .el_title {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 1.25rem;
    }
    .el_text {
      font-size: 1rem;
      font-weight: 500;
      
      &.el_text__bold {
        font-size: 1.25rem;
        font-weight: 700;
      }
      
      & + .el_text ,
      & + .bl_box {
        margin-top: 1rem;
      }
      & + .el_title {
        margin-top: 2rem;
      }
      &.el_text__toptext {
        margin-bottom: 80px;
      }
      &.el_text__indent {
        text-indent: -2em;
        padding-left: 2em;
      }
      &.el_text__indent_h {
        text-indent: -1em;
        padding-left: 1em;
      }
    }
    .bl_box {
      &.bl_box__indent {
        padding-left: 2em;
      }
      
      & + .el_text ,
      & + .bl_box {
        margin-top: 1rem;
      }
    }
    .bl_table {
      width: 100%;
      margin-bottom: 60px;
      
      .bl_table__th ,
      .bl_table__td {
        width: 50%;
        border-bottom: 1px solid var(--color_white);
        color: var(--color_white);
      }
      .bl_table__th {
        padding: 5px;
        padding-top: 0;
        .el_wrap {
          padding: 20px 30px;
          background-color: rgba(255,255,255,0.15);
        }
        border-right: 1px solid var(--color_white);
      }
      .bl_table__td {
        padding: 20px 30px;
      }
      .bl_table__th:first-child {
        padding-left: 0;
      }
      .bl_table__th:last-child {
        padding-right: 0;
        border-right: 0;
      }
      .bl_table__td:first-child {
        border-right: 1px solid var(--color_white);
      }
    }
    
    .bl_list {
      list-style: disc;
      padding-left: 25px;
      border-left: 1px solid #ffffff;
      .bl_list__item {
        font-size: 1rem;
        font-weight: 500;
      }
      
      & + .el_text {
        margin-top: 1rem;
      }
      & + .el_title {
        margin-top: 2rem;
      }
    }
    
    
    .un_privacyhandling_title1 {}
    .un_privacyhandling_title2 {
      margin-top: 120px;
    }
    
    .un_privacyhandling_table1 {
      margin-top: 40px;
    }
    .un_privacyhandling_table2 {
      margin-top: 10px;
    }
    
  }
  
}


.un_service {
  overflow: hidden;
  background: transparent none no-repeat scroll left 50% top 0;
  background-image: linear-gradient(90deg, #0c0c10, #000000);
  background-size: cover;
  
  
  .box_sec_head {
    .el_imgbox {
      margin-right: 20px;
      width: 78px;
    }
    .bl_list {
      max-width: 1220px;
      width: 100%;
      margin: auto;
      margin-top: 50px;
      gap: 10px;
      .bl_lsit__item {
        display: flex;
        align-items: center;
        width: calc(50% - 10px);
        padding: 20px;
        border-radius: 20px;
        font-size: 1.375rem;
        font-weight: bold;
        text-align: left;
        background-color: rgba(0,0,0,0.5);
      }
    }
  }
  .box_sec_body {
    padding-bottom: 0;
    background: transparent none no-repeat scroll left 50% top 0;
    background-image: url("../img/service/contents_bg.png");
    background-size: auto auto;
  }
  
  .un_service_features {
    padding: 0 0 140px;
    overflow: hidden;
    
    .un_service_features_imgbox {
      position: relative;
      
      img {
        position: relative;
        z-index: 1;
      }
      
      &::before {
        content: "";
        position: absolute;
        right: -230px;
        top: -170px;
        z-index: 0;
        width: 558px;
        height: 558px;
        background: transparent url("../img/components/service_features_bgicon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
    
    .el_title {
      padding-left: 30px;
      margin-bottom: 80px;
      .el_title__small {
        display: block;
        margin-bottom: 10px;
        font-size: 1.25rem;
      }
      .el_title__big {
        display: block;
        font-size: 6rem;
      }
    }
  }
  .un_service_consulting {
    .el_title {
      &:before {
        background: transparent url("../img/service/consulting_title_icon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
  }
  .un_service_system {
    .el_title {
      &:before {
        background: transparent url("../img/service/system_title_icon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
  }
  .un_service_cloud {
    .el_title {
      &:before {
        background: transparent url("../img/service/cloud_title_icon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
  }
  .un_service_ai {
    .el_title {
      &:before {
        background: transparent url("../img/service/ai_title_icon.png") no-repeat scroll 0 0;
        background-size: cover;
      }
    }
  }
  
}
.un_service_contents {
  padding: 100px 0;
  border-top: 20px solid #000000;
  
  .bl_flex {
    .bl_flex__left {
      width: 780px;
      padding-top: 35px;
    }
    .bl_flex__right {}
  }
  
  .el_title {
    position: relative;
    margin-bottom: 30px;
    
    &::before {
      content: "";
      position: absolute;
      left: -95px;
      top: -85px;
      width: 230px;
      height: 230px;
      background: transparent none no-repeat scroll 0 0;
    }
    
    .el_title__small {
      display: block;
      font-size: 1.25rem;
      font-weight: 400;
    }
    .el_title__big {
      display: block;
      font-size: 3.5rem;
    }
  }
  .bl_list {
    padding: 0;
    gap: 10px;
    .bl_lsit__item {
      width: calc(50% - 5px);
      padding: 15px;
      font-size: 1.0rem;
      font-weight: 700;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
      
      .el_small {
        font-size: 0.75rem;
      }
    }
  }
  .un_service_contents__catch {
    margin-bottom: 10px;
    font-size: 1.75rem;
    font-weight: 700;
  }
  .un_service_contents__text {
    margin-bottom: 35px;
    font-size: 1rem;
    font-weight: 400;
    color: #E6E6E6;
  }
  .un_service_contents_imgbox {
    border-radius:40px;
    width:315px;
    height:415px;
  }
}

.un_about {
  .box_sec_body {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .un_about_wrap {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: transparent none no-repeat scroll 0 0;
      background-image: url("../img/about/contents_bg.png") ,linear-gradient(90deg, #0c0c10, #000000);
      background-size: cover;
    }
  }
  
  .un_about_message {
    overflow: hidden;
    padding: 220px 0 150px;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      right: -80px;
      top: 220px;
      z-index: 1;
      width: 948px;
      height: 530px;
      background: transparent url(../img/common/logo_icon_effect.png) no-repeat scroll 0 0;
      background-size: cover;
    }
    
    .box_body_title {
      margin-bottom: 70px;
      
      .el_title__big {
        position: relative;
        z-index: 2;
      }
      .el_title__small {
        position: relative;
        z-index: 2;
      }
      
      &::before {
        content: "";
        position: absolute;
        left: -145px;
        top: -145px;
        z-index: 1;
        width: 415px;
        height: 415px;
        border-radius: 50%;
        opacity: 0.60;
        transform: rotate(45deg);
        filter: blur(183px);
        background-image: linear-gradient(90deg, #FFFFFF 0%, #7D7D7D 22%, #525252 77%, #000000 100%);
        
        transform: translateZ(0);
        pointer-events: none;
      }
      
    }
    
    .un_about_message_box {
      position: relative;
      z-index: 2;
      &::before {
        content: "cherish all connection";
        position: absolute;
        bottom: -110px;
        left: -58px;
        z-index: 1;
        opacity: 0.07;
        font-size: 10.0625rem;
        font-weight: 700;
        color: #EAEAEA;
        white-space: nowrap;
        
        user-select: none;
      }
      
      
      .un_about_message_box__catch {
        position: relative;
        z-index: 3; 
        font-size: 2.3125rem;
        line-height: 1.5;
        font-weight: 700;
      }
      .un_about_message_box__text {
        position: relative;
        z-index: 3; 
        margin-top: 30px;
        margin-bottom: 10px;
        font-size: 1.125rem;
        line-height: 1.9;
        font-weight: 400;
      }
      .un_about_message_box__name {
        margin-top: 35px;
        position: relative;
        z-index: 3; 
        font-size: 1.1875rem;
        font-weight: 700;
        
        .el_big {
          font-size: 1.8125rem;
          font-family: var(--fontfamily_mincho);
        }
      }
    }
  }
  .un_about_about {
    border-top: 20px solid #000000;
    background: none;
    
    .box_body_title {
      margin-bottom: 50px;
    }
    .un_about_about_table {}
  }
  .un_about_history {
    padding-bottom: 200px;
    background: none;
    
    .box_body_title {
      margin-bottom: 100px;
    }
    
    .un_about_history_box {
      gap: 60px;
      .un_about_history_box__year {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          width: 1px;
          height: 100%;
          margin: auto;
          background: linear-gradient(180deg, transparent 70px, #ffffff 70px, #ffffff calc(100% - 10px), transparent calc(100% - 10px), transparent 100%);
        }
        flex-shrink: 0;
        .el_mark {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 200px;
          height: 60px;
          padding: 5px 10px;
          border: 1px solid #ffffff;
          border-radius: 90px;
          font-size: 1.5625rem;
          font-weight: 700;
        }
      }
      .un_about_history_box__text {
        width: 100%;
        padding: 50px 0 50px 30px;
        border-top: 1px solid #ffffff;
        line-height: 2.0;
        
        .bl_wrap {
          gap: 40px;
        }
        
        .el_month {
          display: flex;
          justify-content: flex-end;
          width: 3em;
          font-size: 1.25rem;
          font-weight: 700;
          line-height: 1.6;
        }
        .el_text{
          font-size: 1.25rem;
          font-weight: 700;
        }
        .el_box {
          display: inline-block;
          margin-top: 35px;
          padding: 20px 40px;
          border-radius: 40px;
          font-size: 1.375rem;
          font-weight: 700;
          background-color: var(--color_black);
          
          .el_small {
            position: relative;
            bottom: 4px;
            font-size: 0.875rem;
            vertical-align: bottom;
          }
        }
      }
      
      &:last-child {
        .un_about_history_box__year {
          &::before {
            display: none;
          }
        }
      }
    }
  }
}

.un_recruitdetrails {
  background: transparent none no-repeat scroll left 50% top 400px;
  background-image: url("../img/recruit/contents_bg.png") ,linear-gradient(90deg, #0c0c10, #000000);
  background-size: auto;
  
  .box_sec_body {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .box_body_title {
    margin-bottom: 65px;
    text-align: center;
    
    .el_title__big {
      margin-top: 20px;
      font-size: 3.0625rem;
    }
    .el_title__small {
      font-size: 1.25rem;
      font-weight: 400;
    }
  }
  .bl_section {
    background: none;
  }
  .un_recruitdetrails_pagelinks {
    padding: 40px 0 20px;
    
    .bl_list {
      .bl_list__item {
        & + .bl_list__item::before {
          content: "/";
          display: inline-block;
          margin-right: 1em;
          padding-left: 1em;
        }
      }
    }
  }
  .box_table {
    .box_table__th {
    }
  }
  .un_recruitdetrails_btnbox {
    padding-bottom: 100px;
    margin-top: 60px;
    text-align: center;
  }
}


.un_recruit {
  background: transparent none no-repeat scroll 0 0;
  background-image: url("../img/recruit/contents_bg.png") ,linear-gradient(90deg, #0c0c10, #000000);
  background-size: cover;

  .box_sec_body {
    padding-top: 0;
    padding-bottom: 0;
  }

  .box_body_title {
    margin-bottom: 70px;
  }
  
  .un_recruit_sales {}
  .un_recruit_engineer {}
  
  .un_recruit_btnbox {
    padding-bottom: 100px;
    margin-top: 60px;
    text-align: center;
  }
}
.un_recruit_card {
  position: relative;
  border-radius: 20px;
  background-color: var(--color_black);
  
  
  .bl_flex__left {
    position: relative;
    z-index: 2;
    width: 685px;
    overflow: hidden;
    padding: 65px 65px;
    border-radius: 20px 0 0 20px;
    
    &::before {
      content: "";
      position: absolute;
      left: -145px;
      top: -145px;
      z-index: 1;
      width: 403px;
      height: 403px;
      border-radius: 50%;
      opacity: 0.25;
      transform: rotate(45deg);
      filter: blur(183px);
      background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
      
      transform: translateZ(0);
      pointer-events: none;
    }
    
  }
  .bl_flex__right {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    top: 65px;
    width: 490px;
    padding: 0 45px;
  }
  
  .el_title {
    position: relative;
    z-index: 3;
    margin-bottom: 40px;
    
    &:before {
      content: "";
      position: absolute;
      right: -90px;
      top: -70px;
      z-index: 2;
      width: 252px;
      height: 252px;
      opacity: 0.5;
      background: transparent url("../img/components/recruit_consulting_title_icon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
  
    .el_title__big {
      display: block;
      font-size: 3.0625rem;
      font-weight: 700;
    }
    .el_title__small {
      display: block;
      margin-bottom: 10px;
      font-size: 1.25rem;
      font-weight: 400;
    }
  }
  .el_text {
    font-weight: 400;
    line-height: 2.0;
    font-size: 1.125rem;
  }
  .el_imgbox {
    border-radius: 40px;
    width: 400px;
    height: 522px;
  }
  
  
  & + .un_recruit_card {
    margin-top: 120px;
  }
}



/*
* SCREEN
**************************************/

/*
* PCのみ
**************************************/
@media screen and (min-width: 900.1px) {
/*
* 強制要素（helper）
**************************************/
.hp_pc_display {
}
.hp_sp_display{
  display: none !important;
}
.hp_sp_br {
  display: none;
}

/*
* 共通レイヤー要素（layer）
**************************************/
/*
* 共通ブロック要素（block）
**************************************/
/*
* ページ固有要素（unique）
**************************************/

}


/*
* SPのみ
**************************************/
@media screen and (max-width: 900px) {
/*
* 強制要素（helper）
**************************************/
.hp_pc_display {
  display: none !important;
}
.hp_sp_display{}
.hp_sp_br {}


/*
* 共通要素
**************************************/
body {
  line-height: var(--sp_lineheight_def);
}


/*
* エレメント要素（element）
**************************************/
/* btn */
.el_btn {
  height: 52px;
  border-radius: 24px;
  font-size: 0.875rem;
}

/* title */
.el_title {
  font-weight: 700;
  
  .el_title__big {
    font-size: 2.6875rem;
    line-height: 1.5;
  }
  .el_title__small {
    font-size: 1.0rem;
  }
}
/* text */
.el_text {
  font-size: 0.875rem;
  line-height: 1.7;
}


/*
* 共通レイヤー要素（layer）
**************************************/
/* header */
.ly_header {
  .ly_header__inner {
    display: block;
    width: calc(100% - 20px);
    height: var(--sp_header_height);
    padding: 30px 10px 0;
  }
  .ly_header__sitelogo {
    width: 180px;
    position: absolute;
    top: 30px;
  }
  .ly_header_nav {
    position: absolute;
    top: -100vh;
    left: 0;
    background-color: var(--color_black);
    z-index: 5;

    margin: 95px auto 0;
    text-align: left;

    .menu {
      .menu-item {
        margin-left: 0;
      }
    }
  }
  
  &.open {
    position: fixed;
    height: 100vh;
    background-color: var(--color_black);
    overflow: auto;
    z-index: 1000;
    
    .ly_header_nav {
      top: calc(var(--sp_header_height));
      padding-top: 30px;
      margin-top: 0;
      height: calc(100vh - 70px);
      background-color: var(--color_black);
      
      .menu {
        display: block;
        width: 100%;
        height: 100%;
        list-style: none;
        padding-left: 20px;
        margin: 0 0 20px;
        
        .menu-item {
          list-style: none;
          width: 100%;
          height: 100%;
          margin: 0 0 30px;
          
          a {
            display: block;
            text-decoration: none;
            color: #fff;
          }
        }
      }
      .ly_header_nav_list {
        padding-left: 20px;
      }
      
      .el_copyright {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 170px;
        width: 100%;
        padding-bottom: 100px;
        text-align: center;
        color: rgba(255,255,255,0.5);
        border-top: 1px solid rgba(255,255,255,0.5);
      }
    }
  }
}


/* footer */
.ly_footer {
  padding: 50px 0 0;
  .ly_footer_top {
    display: block;
    padding: 0;
    
    .bl_flex__right {
      margin-bottom: 50px;
      
      .el_logo {
        position: static;
        width: 190px;
      }
    }
    
    .menu {
      width: 70%;
      .menu-item {
        width: 100%;
        font-weight: 400;
      }
    }
    .el_pmark {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 75px;
      height: 75px;
    }
  }
  .ly_footer_bottom {
    .el_copyright {
      padding-top: 0;
      padding-left: 0;
    }
  }
}

/* contents */
.ly_cont {
  padding-top: var(--sp_header_height);
}


/*
* 共通ブロック要素（block）
**************************************/
.bl_inner {
  padding: 0 20px;
}
.bl_flex {
  display: block;
}
.bl_flex__spflex {
  display: flex;
}

/* sectionbox */
.bl_section {
  padding: var(--sp_top_section_margin_top) 0 var(--sp_top_section_margin_bottom);
}


/*
* オリジナル要素（origin）
**************************************/
.box_contact {
  background: transparent url("../img/components/contact_bg-sp.png") no-repeat scroll right 0% top 0%;
  background-size: cover;

  .bl_flex__right {
    margin-top: 40px;
  }
  .el_text {
    font-size: 0.875rem;
  }
  .box_contact__btnbox {
    text-align: center;
  }
}

.box_sec {
  .bl_section {
    padding: var(--sp_sec_section_margin_top) 0 var(--sp_sec_section_margin_bottom);
  }
}
.box_sec_head {
  padding: 90px 30px 30px;
  min-height: 200px;
  
  .el_title {
    .el_title__big {
      margin-bottom: 10px;
      font-size: 2.5rem;
    }
    .el_title__small {
      font-size: 0.875rem;
    }
  }
}
.box_sec_body {
  padding: var(--sp_sec_section_margin_top) 0 var(--sp_sec_section_margin_bottom);
}

.box_tablewrap {
  padding: 35px 20px 35px 20px;
  border-radius: 25px;
}
.box_table {
  
  .box_table__caption {
    margin-bottom: 22px;
    font-size: 1.125rem;
  }
  .box_table__tr {
    gap: 25px;
    padding: 22px 0;
  }
  .box_table__th {
    .el_mark {
      min-width: 120px;
      height: 34px;
      border-radius: 50px;
      font-size: 0.75rem;
    }
  }
  .box_table__td {
    padding: 5px 0 0px;
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: 400;
    
    &.el_lh {
      line-height: 1.8;
    }
    .el_big {
      font-size: 1.125rem;
      font-weight: 700;
    }
    .el_small {
      font-size: 0.875rem;
    }
    
    .bl_pmark {
      gap: 40px;
      .bl_pmark__img {
        flex-shrink: 0;
        margin-left: 0px;
      }
    }
  }
  
  & + .box_table {
    margin-top: 50px;
  }
  
}


/*
* ページ固有要素（unique）
**************************************/
/* home page */
.un_home {
  .bl_inner {
    padding: 0 20px;
  }
}
.un_home_kv {
  overflow: hidden;
  position: relative;
  height: 100dvh;
  min-height: 650px;
  /*background: #000000 url("../img/top/kv_bg-sp.png") left 50% top 50%;*/
  background-color: #000000;
  background-size: cover;
  
  .un_home_kv_videobox {
    display: flex;
    justify-content: flex-end;
      
    &::before ,
    &::after {
      display: none;
    }
    video {
      position: relative;
    }
    
  }
  .un_home_kv_textbox {
    padding: 0 20px;
    top: auto;
    /*bottom: calc(50px + env(safe-area-inset-bottom));*/
    bottom: calc(50px + 50px); /*50px=スマホメニュー*/ 
    bottom: 30px;
    right: auto;
    display: block;
    height: auto;
    
    opacity: 0;
    
    .el_title {
      font-size: 2.8125rem;
      line-height: 1.3;
    }
    .el_text {
      text-align: left;
    }
  }
}
.un_home_about {
  background: transparent none no-repeat scroll right 0 top 0;
  background-image: url("../img/top/about_bg.png") ,linear-gradient(90deg, #0c0c10, #000000);
  background-size: cover;
  
  .el_title {
    position:relative;
    z-index: 1;
    margin-bottom: 46px;
    
    & > * {
      position:relative;
      z-index: 2;
    }
    
    &::before {
      display: none;
    }
    &::after {
      content: "";
      position: absolute;
      right: -50px;
      top: -35px;
      z-index: 1;
      width: 232px;
      height: 228px;
      background: transparent url("../img/components/service_features_bgicon.png") no-repeat scroll 0 0;
      background-size: cover;
    }
    
    
    .el_title__small {
      display: block;
      position: relative;
      top: 5px;
    }
    
  }
  .bl_flex {
    .bl_flex__left {
      width: 100%;
    }
    .bl_flex__right {
      height: 310px;
      &::before {
        display: none;
      }
    }
  }
  .un_home_about__text {
    position: relative;
    z-index: 2;
    margin-bottom: 56px;
    .el_text {
      font-size: 0.875rem;
      .el_text__big {
        font-size: 1.75rem;
        line-height: 1.6;
      }
      & + .el_text {
        margin-top: 24px;
      }
    }
  }
  .un_home_about__btnbox {
    display: flex;
    justify-content: center;
  }
}
.un_home_about_imgbox {
  &.un_home_about_imgbox__box1 {
    position: absolute;
    right: -165px;
    left: 0;
    top: 0;
    width:298px;
    height:184px;
    margin: auto;
  }
  &.un_home_about_imgbox__box2 {
    position: absolute;
    right: 0;
    left: -225px;
    top: 130px;
    width:206px;
    height:133px;
    margin: auto;
  }
  
}


.un_home_service {
  .el_text {
    margin-bottom: var(--sp_ttob_margin);
  }
  .un_home_service_imgbox {
    margin: auto;
    margin-bottom: var(--sp_btob_margin);
    
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }
  .un_home_service_cards {
    margin-bottom: 40px;
    
  }
}
.un_home_service_cards {
  gap: var(--sp_btob_margin);
  .bl_card {
    width: 100%;
    max-width: none;
    padding: 40px 30px;
    padding-right: 0;
    
    
    &::after {
      width: 180px;
      height: 180px;
    }
    
    
    .bl_card_head {
      position: relative;
      z-index: 5;
      .el_title {
        .el_title__small {
          font-size: 1.0rem;
        }
        .el_title__big {
          font-size: 1.6875rem;
        }
      }
    }
    .bl_card_list {
      margin-top: 30px;
      .bl_card_list__item {
        .el_link {
          padding: 15px 50px 15px 12px;
        }
      }
    }
  }
}
.un_home_recruit {
  .el_title {
    margin-bottom: 30px;
  }
}
.un_home_recruit_cards {
  gap: var(--sp_btob_margin);
  flex-wrap: wrap;
  margin: 0;
  
  .bl_card__item {
    width: 100%;
    height: 435px;
    min-height: auto;
    
    .un_home_recruit_cards__imgbox {
      height: 435px;
    }
    .un_home_recruit_cards__textbox {
      &::before {
        border-radius: 20px;
      }
    }
  }
}


/* xxxxx page */
.un_contact {
  .box_sec_body {
    padding: 0;
    .bl_inner {
      padding: 60px 20px;
      border-radius: 0px;
    }
    .el_text {
      margin-bottom: 40px;
      text-align: left;
    }
  }
  .contact_form {
    max-width: none;
    dl {
      flex-direction: column;
    }
    dt {
      width: 100%;
    }
    dd {
      width: 100%;
    }
    input[type=text] ,
    input[type=email] ,
    input[type=tel] ,
    textarea {
      width: 100%;
      margin-left: 0;
    }
    .submitbtn {
      input[type="submit"]{
        width: 100%;
      }
    }
  }
}

.un_privacypolicy {
  .box_sec_body {
    padding: 60px 0 100px;
    
    .el_title {
    }
    .el_text {
      font-size: 0.875rem;
      
      
      &.el_text__toptext {
        margin-bottom: 40px;
      }
    }
    
  }
}
.un_privacyhandling {
  .bl_inner {
    padding: 0 20px;
  }
  .box_sec_body {
    
    .el_title {
    }
    .el_text {
      font-size: 0.875rem;
      
      &.el_text__bold {
        font-size: 1.0rem;
        font-weight: 700;
      }
    }
    .bl_table {
      .bl_table__th {
        .el_wrap {
          padding: 10px 20px;
        }
      }
      
      .bl_table__td {
        padding: 10px 20px;
      }
    }
    
    .un_privacyhandling_title2 {
      margin-top: 60px;
    }
  }
}

.un_service {
  background: transparent none no-repeat scroll 0 0;
  background-image: linear-gradient(90deg, #0c0c10, #000000);
  background-size: cover;
  .box_sec_head {
    .bl_list {
      display: none;
    }
    
  }
  
  .box_sec_body {
    background-image: none;
  }
  
  .un_service_features {
    padding-bottom: 0;
    .un_service_features_imgbox {
      &::before {
        display: none;
      }
    }
    .bl_inner {
      padding: 0;
    }
    .el_title {
      margin-bottom: var(--sp_ttob_margin);
      .el_title__small {
        margin-bottom: 0px;
        font-size: 1.0rem;
      }
      .el_title__big {
        font-size: 2.6875rem;
      }
    }
  }
  
  .un_service_consulting {
    border-top: 0;
  }
  
}
.un_service_contents {
  position: relative;
  padding: 30px 0;
  border-top: 20px solid #000000;
  
  &::before {
    content: "";
    position: absolute;
    left: -145px;
    top: -0px;
    z-index: 1;
    width: 410px;
    height: 350px;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(183px);
    background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
    
    transform: translateZ(0);
    pointer-events: none;
  }
  
  .bl_flex {
    .bl_flex__left {
      padding-top: 30px;
      width: 100%;
    }
    .bl_flex__right {
      display: none;
    }
  }
  .el_title {
    margin-bottom: calc(var(--sp_ttob_margin) - 7px);
    &::before {
      right: -50px;
      left: auto;
    }
    
    .el_title__small {
      margin-bottom: 10px;
      font-size: 1.0rem;
    }
    .el_title__big {
      font-size: 1.875rem;
      line-height: 1.7;
    }
  }
  .bl_list {
    gap: 15px;
    .bl_lsit__item {
      width: 100%;
      padding: 10px 30px;
    }
  }
  .un_service_contents__catch {
    margin-bottom: 0px;
    font-size: 1.125rem;
  }
  .un_service_contents__text {
    font-size: 0.875rem;
  }
  
  .bl_spwrap {
    display: flex;
    flex-direction: column;
    .un_service_contents__catch {
      order: 1;
    }
    .un_service_contents__text {
      order: 3;
      margin-top: 0;
    }
    .bl_list {
      order: 2;
    }
  }
}

.un_about {
  
  .un_about_wrap {
    &::before {
      opacity: 0.5;
    }
  }
  
  .un_about_message {
    padding: 60px 0 60px;
    
    &::before {
      width: 355px;
      height: 198px;
      
      right: -100px;
      top: auto;
      bottom: 30px;
      
      opacity: 0.3;
    }
    .box_body_title {
      margin-bottom: 30px;
      
      &::before {
        opacity: 0.30;
      }
    }
    
    .un_about_message_box {
      &::before {
        display: none;
      }
      .un_about_message_box__catch {
        font-size: 1.5625rem;
        line-height: 1.45;
      }
      .un_about_message_box__text {
        font-size: 0.8125rem;
        line-height: 2.1;
      }
      .un_about_message_box__name {
        margin-top: 40px;
        font-size: 1.0625rem;
        .el_big {
          font-size: 1.1875rem;
        }
      }
    }
  }
  .un_about_about {
    .box_body_title {
      padding: 0 20px;
      margin-bottom: 30px;
    }
    .bl_inner {
      padding: 0;
    }
  }
  .un_about_history {
    overflow: hidden;
    padding-bottom: 100px;
    
    .box_body_title {
      margin-bottom: 30px;
    }
    
    .un_about_history_box {
      gap: 20px;
      
      .un_about_history_box__year {
        &::before {
          left: 25px;
          right: auto;
        }
        .el_mark {
          min-width: 145px;
          height: 42px;
          font-size: 1.25rem;
        }
        
      }
      .un_about_history_box__text {
        flex-shrink: 0;
        gap: 20px;
        position: relative;
        top: 21px;
      
        width: calc(100% - 0px - 0);
        
        .bl_flex {
          .bl_flex__right {
            width: 100%;
          }
        }
        
        .bl_wrap {
          gap: 20px;
          position: relative;
          left: -160px;
        }
        
        .el_month {
          flex-shrink: 0;
          font-size: 1.125rem;
        }
        .el_text{
          font-size: 1.125rem;
          line-height: 1.5;
        }
        .el_box {
          width: 100%;
          padding: 10px 20px;
          font-size: 1.125rem;
          line-height: 1.1;
          text-align: center;
          
          .el_small {
            font-size: 0.75rem;
          }
          .el_sp_small {
            font-size: 0.75rem;
          }
        }
      }
      
      &:last-child {
        .un_about_history_box__year {
          &::before {
            display: none;
          }
        }
      }
    }
    
  }
  
}
.un_recruitdetrails {
  background: transparent none no-repeat scroll 0 0;
  background-image: linear-gradient(90deg, #0c0c10, #000000);
  
  .box_body_title {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 0;
    
    &::before {
      content: "";
      position: absolute;
      top: 10px;
      left: -140px;
      z-index: 1;
      width: 430px;
      height: 430px;
      margin: auto;
      border-radius: 50%;
      opacity: 0.15;
      transform: rotate(30deg);
      filter: blur(183px);
      background-image: linear-gradient(90deg, #BF00FF 0%, #8503B8 22%, #140BE3 77%, #000DFD 100%);
      transform: translateZ(0);
      pointer-events: none;
    }
    
    
    .el_title__big {
      margin-top: 3px;
      font-size: 2.0rem;
    }
    .el_title__small {
      font-size: 1.0rem;
    }
  }
  .box_tablewrap {
    position: relative;
    z-index: 2;
  }
  
  .un_recruitdetrails_pagelinks {
    padding-top: 25px;
    .bl_list {
      padding: 0;
      margin: 0;
      
      .bl_list__item {
        font-size: 1.125rem;
        font-weight: 700;
      }
    }
  }
  .un_recruitdetrails_sales {
    padding-top: 0;
    
    .bl_inner {
      padding: 0;
    }
  }
  .un_recruitdetrails_engineer {
    padding-top: 30px;
    .bl_inner {
      padding: 0;
    }
  }
}


.un_recruit {
  background-image: linear-gradient(90deg, #0c0c10, #000000);
  .bl_inner {
    padding: 0 20px;
  }
  .box_body_title {
    margin-bottom: 40px;
    
    .el_title__big {
      line-height: 1.4;
    }
  }
}
.un_recruit_card {
  border-radius: 20px;
  
  .bl_flex__left {
    width: 100%;
    padding: 40px 30px 20px;
    margin-bottom: -60px;
    
    &::before {
      left: -100px;
      top: -75px;
    }
  }
  .bl_flex__right {
    width: 100%;
    padding: 0 20px;
    
    .el_imgbox {
      margin: auto;
    }
  }
  
  .el_title {
    margin-bottom: 15px;
    
    
    &:before {
      display: none;
    }
    
    .el_title__big {
      font-size: 2.0rem;
    }
    .el_title__small {
      font-size: 1.0rem;
    }
  }
  .el_text {
    font-size: 0.875rem;
  }
  .el_imgbox {
    border-radius: 8px;
    width: 100%;
    height: auto;
  }
}


}