@charset "UTF-8";

/* =============================================
* HOME
* ============================================= */
#mv {
   position: relative;
}

#mv figure img {
   width: 100%;
   max-width: inherit;
}

.scroll-down {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
   height: 90vh;
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 30px;
}

.scroll-down span {
   display: block;
}

.scroll-down .txt {
   width: 9px;
}

.scroll-down .arrow {
   width: 8px;
   animation: sdb05 infinite 1s;
}

@media screen and (max-width: 767px) {
   .scroll-down {
      height: auto;
      top: auto;
      bottom: 0;
      left: 15px;
   }
}

@keyframes sdb05 {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(10px);
   }

   100% {
      transform: translateY(0);
   }
}

/* -- -- */
#about {
   margin-top: -4.6vw;
   padding-bottom: 230px;
   position: relative;
}

#about:before {
   content: '';
   background-color: #F4F4F5;
   clip-path: polygon(0 0, 0% 100%, 100% 100%);
   width: 260px;
   height: 470px;
   position: absolute;
   bottom: 0;
   left: 0;
}

#about .wrap {
   padding-top: 82px;
}

#about figure {
   width: 373px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

#about .ttl-sub {
   font-weight: 700;
   position: relative;
}

#about h2 {
   line-height: 50px;
   padding-top: 48px;
   position: relative;
}

#about .arrow {
   width: 18px;
   margin: 0 auto;
   padding-top: 48px;
   position: relative;
}

#about .button {
   padding-top: 48px;
   position: relative;
}

@media screen and (max-width: 1023px) {
   #about {
      margin-top: 0;
      padding-top: 130px;
   }

   #about:before {
      width: 10.5vw;
      height: 18.6vw;
   }
}

@media screen and (max-width: 767px) {
   #about {
      padding: 100px 0;
   }

   #about .wrap {
      padding: 70px 0 0;
   }

   #about figure {
      width: 76vw;
   }

   #about h2 {
      font-size: 23px;
      line-height: 45px;
   }

   #about .arrow {
      padding-top: 85px;
   }
}

@media screen and (max-width: 429px) {
   #about h2 {
      font-size: 20px;
   }
}

/* -- -- */

#system-consulting {
   background-color: #F4F4F5;
   position: relative;
   padding: 170px 0 0;
}

#system-consulting:before {
   content: '';
   background-color: #fff;
   clip-path: polygon(0 0, 0% 100%, 100% 100%);
   width: 260px;
   height: 470px;
   position: absolute;
   top: -140px;
   left: 0;
}

#system-consulting .row {
   background-color: #fff;
   position: relative;
   padding: 150px 0;
}

#system-consulting .wrap {
   display: grid;
   grid-template-columns: 400px 1fr;
   gap: 80px;
}

#system-consulting .col-l {
   display: flex;
   flex-direction: column;
   gap: 35px;
}

#system-consulting .col-l .txt {
   flex: 1 0 0;
   line-height: 35px;
}

#system-consulting .col-r {}

#system-consulting .col-r .item {
   display: grid;
   grid-template-columns: 60px 1fr 176px;
   gap: 15px;
}

#system-consulting .col-r .item+.item {
   margin-top: 25px;
   padding-top: 25px;
   border-top: 1px solid #E3E3E3;
}

#system-consulting .col-r .no {
   font-weight: 600;
   font-size: 42px;
   line-height: 60px;
   color: rgba(36, 99, 235, 0.2);
}

#system-consulting .col-r h3 {
   padding-bottom: 15px;
}

#system-consulting .col-r figure img {
   border-radius: 5px;
}

@media screen and (max-width: 1023px) {
   #system-consulting {
      padding-top: 10.5vw;
   }

   #system-consulting:before {
      width: 10.5vw;
      height: 18.6vw;
      top: 0;
   }

   #system-consulting .wrap {
      grid-template-columns: 100%;
   }
}

@media screen and (max-width: 767px) {
   #system-consulting .row {
      padding: 80px 0;
   }

   #system-consulting .wrap {
      gap: 40px;
   }

   #system-consulting .col-l {
      gap: 20px;
   }

   #system-consulting .button {
      padding-top: 20px;
   }

   #system-consulting .col-r .item {
      grid-template-columns: 100%;
      gap: 0px;
   }

   #system-consulting .col-r .item+.item {
      margin-top: 30px;
      padding-top: 20px;
   }

   #system-consulting .col-r figure {
      padding-top: 30px;
   }
}

/* -- -- */

#download {
   background: url('../img/top/download-bg.webp') no-repeat center / cover;
   color: #fff;
   padding: 80px 0 60px;
}

#download .ttl-sub {
   color: #fff;
}

#download h2 span {
   display: block;
}

#download .txt {
   max-width: 500px;
   letter-spacing: 0.02em;
   padding-top: 24px;
}

#download .button {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

#download .button a {
   justify-content: center;
   gap: 30px;
   width: 400px;
   height: 84px;
   background-color: #fff;
   color: #2463EB;
   border-radius: 50px;
   font-weight: 700;
   font-size: 20px;
   letter-spacing: 0.02em;
}

#download .button a img {
   max-width: 40px;
}

@media screen and (max-width: 1023px) {
   #download {
      text-align: center;
   }

   #download .txt {
      max-width: inherit;
   }

   #download .button {
      position: static;
      transform: translateY(0);
      padding-top: 50px;
   }
}

@media screen and (max-width: 767px) {
   #download {
      padding: 40px 0 50px;
   }

   #download .txt {
      padding-top: 20px;
   }

   #download .button {
      padding-top: 30px;
   }

   #download .button a {
      gap: 15px;
      width: 100%;
      height: 70px;
      font-size: 18px;
   }

   #download .button a img {
      max-width: 30px;
   }
}

/* -- -- */

#service {
   background-color: #F4F4F5;
   padding: 205px 0 165px;
}

#service h2 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px 45px;
}

#service h2 .ttl-sub {
   width: 100%;
}

#service .box-1 {
   min-height: 290px;
   border-bottom: 1px solid #E3E3E3;
   padding-bottom: 50px;
}

#service .box-1 .txt {
   padding-top: 30px;
}

#service .box-1 .button {
   padding-top: 45px;
}

#service .box-1 .button a:after {
   background-image: url("../img/common/icon-extend-1.png");
   background-size: 10px auto;
}

#service .box-1 figure {
   width: 290px;
   position: absolute;
   top: 0;
   right: 0;
}

#service .box-2 {
   padding-top: 65px;
}

#service .box-2 h3 {
   padding-bottom: 10px;
}

#service .box-2 h3 img {
   vertical-align: baseline;
   max-width: 146px;
   margin-right: 8px;
}

#service .box-2 [class*="item"] a {
   display: grid;
   grid-template-columns: 300px 175px 1fr;
   align-items: center;
   gap: 25px;
   background-color: #fff;
   border-radius: 5px;
   margin-top: 50px;
   padding: 50px 160px 50px 50px;
   border-left: 12px solid;
   position: relative;
}

#service .box-2 [class*="item"] a:after {
   content: '';
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-sizing: border-box;
   border: 1px solid #CECECE;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 10px auto;
   position: absolute;
   top: 50%;
   right: 45px;
   transform: translate(0, -50%);
   transition: all 0.3s;
}

#service .box-2 [class*="item"] a:hover:after {
   transform: translate(5px, -50%);
}

#service .box-2 [class*="item"] figure img {
   border-radius: 5px;
}

#service .box-2 [class*="item"] .txt {
   padding-left: 25px;
}

#service .box-2 .item-1 a {
   border-left-color: #01A0E9;
}

#service .box-2 .item-1 a:after {
   background-image: url("../img/common/icon-extend-2.png");
}

#service .box-2 .item-1 .ttl-sub {
   color: #01A0E9;
}

#service .box-2 .item-2 a {
   border-left-color: #1467CB;
}

#service .box-2 .item-2 a:after {
   background-image: url("../img/common/icon-extend-3.png");
}

#service .box-2 .item-2 .ttl-sub {
   color: #1467CB;
}

#service .box-2 .item-3 a {
   border-left-color: #009090;
}

#service .box-2 .item-3 a:after {
   background-image: url("../img/common/icon-extend-4.png");
}

#service .box-2 .item-3 .ttl-sub {
   color: #009090;
}

@media screen and (max-width: 1200px) {
   #service .box-2 [class*="item"] a {
      padding: 20px 70px 20px 20px;
   }

   #service .box-2 [class*="item"] a:after {
      right: 20px;
   }

   #service .box-2 [class*="item"] .txt {
      padding-left: 0;
   }
}

@media screen and (max-width: 1023px) {
   #service {
      padding-top: 0;
   }

   #service .box-1 {
      padding-top: 200px;
   }

   #service .box-1 figure {
      top: -140px;
      left: 50%;
      transform: translateX(-50%);
   }

   #service .box-2 [class*="item"] a {
      grid-template-columns: 1fr;
      border-top: 12px solid;
      border-left: 0;
      padding: 45px 87px;
   }

   #service .box-2 [class*="item"] a:after {
      top: 78px;
      right: 87px;
      transform: translate(0, 0);
   }

   #service .box-2 [class*="item"] figure {
      text-align: center;
   }

   #service .box-2 .item-1 a {
      border-top-color: #01A0E9;
   }

   #service .box-2 .item-2 a {
      border-top-color: #1467CB;
   }

   #service .box-2 .item-3 a {
      border-top-color: #009090;
   }
}

@media screen and (max-width: 767px) {
   #service {
      padding: 0;
   }

   #service .box-1 {
      padding: 90px 0 60px;
   }

   #service .box-1 figure {
      width: 137px;
      top: -70px;
   }

   #service .box-1 h2 {
      flex-direction: column;
      align-items: flex-start;
      flex-wrap: nowrap;
      gap: 8px;
   }

   #service .box-1 h2 .ttl-sub {
      padding-bottom: 8px;
   }

   #service .box-1 .txt {
      padding-top: 30px;
   }

   #service .box-1 .button {
      padding-top: 30px;
   }

   #service .box-2 {
      padding: 60px 0 80px;
   }

   #service .box-2 h3 {
      padding-bottom: 0;
   }

   #service .box-2 [class*="item"] {
      margin-top: 40px;
   }

   #service .box-2 [class*="item"] a {
      padding: 46px;
   }

   #service .box-2 [class*="item"] a:after {
      top: 72px;
      right: 46px;
   }

   #service .box-2 [class*="item"] a:hover:after {
      transform: translate(0, 0);
   }

   #service .box-2 [class*="item"] h4 {
      font-size: 26px;
   }
}

@media screen and (max-width: 429px) {
   #service .box-2 [class*="item"] a {
      padding: 46px 25px;
   }

   #service .box-2 [class*="item"] a:after {
      right: 25px;
   }
}

/* -- -- */
#xronoa {
   background: url("../img/top/xronoa_bg_pc.webp") no-repeat center top/cover;
   color: #fff;
   padding: 135px 0 60px;
   position: relative;
}

#xronoa:before {
   content: '';
   width: calc(50% + 130px);
   height: auto;
   background: url("../img/top/xronoa-bg-1.webp") no-repeat top left/cover;
   position: absolute;
   top: 65px;
   right: 0;
   bottom: 0;
}

#xronoa .wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
}

#xronoa .logo {
   width: 356px;
}

#xronoa .col {
   width: 500px;
}

#xronoa h2 {
   color: inherit;
}

#xronoa .txt {
   font-weight: 500;
   letter-spacing: 0.02em;
   padding-top: 25px;
}

#xronoa .button {
   padding-top: 15px;
}

#xronoa .button a:after {
   background-image: url("../img/common/icon-extend-6.png");
   background-size: 10px auto;
}

@media screen and (max-width: 1023px) {
   #xronoa {
      padding: 85px 0 25px;
   }

   #xronoa:before {
      width: auto;
      top: 175px;
      left: 0;
   }

   #xronoa .wrap {
      flex-direction: column;
   }

   #xronoa .col {
      padding: 75px 0 0 100px;
   }
}

@media screen and (max-width: 767px) {
   #xronoa {
      background-image: url("../img/top/xronoa_bg_sp.webp");
   }

   #xronoa:before {
      background-image: url("../img/top/xronoa-bg-1_sp.webp");
      left: 15px;
   }

   #xronoa .wrap {
      padding: 0;
   }

   #xronoa .logo {
      width: 70vw;
   }

   #xronoa .col {
      width: 100%;
      box-sizing: border-box;
      padding: 75px 10.5vw 0 27vw;
   }

   #xronoa .button {
      padding-top: 25px;
   }
}

@media screen and (max-width: 429px) {
   #xronoa .col {
      padding-right: 6vw;
      padding-left: 25vw;
   }
}

/* -- -- */

#development {
   background-color: #F4F4F5;
   position: relative;
   padding: 100px 30px 140px;
}

#development:before {
   content: '';
   background-color: #F4F4F5;
   clip-path: polygon(0 0, 100% 100%, 100% 0);
   width: 230px;
   height: 230px;
   position: absolute;
   top: 100%;
   right: 0;
}

#development .in {
   background-color: #fff;
   border-radius: 5px;
   padding: 100px 30px 120px;
}

#development .box {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
}

#development .box figure {
   width: 290px;
}

#development h3,
#development .desc {
   padding-top: 35px;
}

#development .button {
   padding-top: 60px;
}

#development .case-list {
   padding-top: 75px;
}

@media screen and (max-width: 1023px) {
   #development .box figure {
      width: 250px;
   }

   #development .case-list {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   #development {
      background-color: #fff;
      padding: 80px 0vw;
   }

   #development:before {
      width: 10.5vw;
      height: 18.6vw;
   }

   #development .in {
      background-color: transparent;
      padding: 0;
   }

   #development .wrap {
      padding: 0 10.8vw;
   }

   #development .box {
      flex-direction: column;
   }

   #development .box figure {
      width: 40vw;
   }

   #development h3,
   #development .desc {
      padding-top: 20px;
   }

   #development .button {
      padding-top: 40px;
   }

   #development .case-list {
      margin: 0 -5vw;
      padding-top: 60px;
   }
}

/* -- -- */
#news {
   padding: 160px 0;
}

#news .wrap {
   display: flex;
   justify-content: space-between;
}

#news .button {
   padding-top: 60px;
}

#news .list {
   width: 793px;
}

#news .list li+li {
   border-top: 1px solid #F0F0F0;
   margin-top: 30px;
   padding-top: 30px;
}

#news .list li a {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px 15px;
   padding: 0 90px 0 20px;
   position: relative;
}

#news .list li a:after {
   content: '';
   display: block;
   width: 32px;
   height: 32px;
   background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
   border: 1px solid #CECECE;
   border-radius: 50%;
   transition: all 0.3s;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translate(0, -50%);
}

#news .list li a:hover:after {
   transform: translate(5px, -50%);
}

#news .list time {
   color: #ADADAD;
   font-weight: 700;
}

#news .list .cat {
   background-color: #E1EBF8;
   min-width: 60px;
   border-radius: 30px;
   padding: 0 10px;
   font-weight: 700;
   font-size: 13px;
   line-height: 22px;
   text-align: center;
}

#news .list .ttl {
   width: 100%;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

@media screen and (max-width: 1200px) {
   #news .list {
      width: 750px;
   }
}

@media screen and (max-width: 1023px) {
   #news .wrap {
      flex-direction: column;
      gap: 60px;
   }

   #news .button {
      padding-top: 30px;
   }

   #news .list {
      width: 100%;
   }

   #news .list li a {
      padding: 0 50px 0 0px;
   }

   #news .list li a:after {
      right: 0;
   }
}

@media screen and (max-width: 767px) {
   #news {
      padding: 80px 0;
   }

   #news .list li a {
      padding: 0;
   }

   #news .list li a:after {
      display: none;
   }

   #news .list .ttl {
      position: relative;
      padding-right: 50px;
   }

   #news .list .ttl:after {
      content: '';
      display: block;
      width: 32px;
      height: 32px;
      background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
      border: 1px solid #CECECE;
      border-radius: 50%;
      transition: all 0.3s;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
   }
}

/* -- -- */
.section__cta {
   background: url("../img/common/contact_bg_pc.webp") no-repeat center/cover;
   color: #fff;
   padding: 120px 0;
}

.section__cta .ttl-sub {
   color: #fff;
   padding-bottom: 20px;
}

.section__cta .txt {
   padding-top: 45px;
}

.section__cta .button {
   padding-top: 70px;
}

@media screen and (max-width: 767px) {
   .section__cta {
      background-image: url("../img/common/contact_bg_sp.webp");
      padding: 70px 0;
   }

   .section__cta h2 {
      font-size: 28px;
   }

   .section__cta h2 span {
      padding-bottom: 30px;
   }

   .section__cta .txt {
      padding-top: 30px;
   }

   .section__cta .button {
      padding-top: 55px;
   }
}

/*=============================================*
* AI開発
*=============================================*/
#lead {
   color: #fff;
}

#lead .wrap {
   display: flex;
   flex-wrap: wrap;
}

#lead h2 {
   width: calc(50% - 20px);
   letter-spacing: 0.1em;
   padding-right: 30px;
   box-sizing: border-box;
}

#lead .txt {
   width: calc(50% + 20px);
   font-weight: 500;
   line-height: 45px;
}

#lead .group-btn {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 66px;
   width: 100%;
   padding-top: 60px;
}

#lead .group-btn a {
   display: block;
   background-color: #fff;
   color: #0078F8;
   text-align: center;
   border-radius: 100px;
   position: relative;
   padding: 40px 0;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#lead .group-btn a i {
   display: block;
   width: 47px;
   height: 47px;
   border-radius: 50%;
   background: linear-gradient(30deg, #0078F8, #43C5FF);
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translate(0, -50%);
   transition: all 0.3s;
}

#lead .group-btn a i:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/common/arrow-right-wh.png") no-repeat center/8px auto;
   position: absolute;
   top: 0;
   left: 0;
}

#lead .group-btn a:hover,
#lead .group-btn a.current {
   background-color: #0078F8;
   color: #fff;
   opacity: 1;
}

#lead .group-btn a:hover i,
#lead .group-btn a.current i {
   transform: translate(5px, -50%);
}

#lead h3 {
   color: #0078F8;
   position: relative;
   z-index: 1;
   padding-top: 78px;
}

#lead h3 span {
   display: inline-block;
   background-color: #fff;
   margin-bottom: 8px;
   padding: 0px 15px;
}

#lead h3 span:last-child {
   margin-bottom: 0;
}

#lead h3 .h-23 {
   font-weight: 400;
   padding-top: 2px;
}

#lead figure {
   margin-top: -30px;
   padding-left: 75px;
}

#lead figure img {
   width: revert-layer;
}

@media screen and (max-width: 1023px) {

   #lead h2,
   #lead .txt {
      width: 100%;
   }

   #lead h2 {
      padding-right: 0;
   }

   #lead .txt {
      padding-top: 30px;
   }

   #lead .group-btn {
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   #lead .txt {
      padding-top: 20px;
   }

   #lead .group-btn {
      grid-template-columns: 1fr;
      gap: 20px;
      padding-top: 30px;
   }

   #lead .group-btn a {
      padding: 22px 0;
   }

   #lead h3 {
      padding-top: 50px;
   }

   #lead figure {
      max-width: 70%;
      padding-left: 20px;
   }

   #lead figure img {
      width: auto;
   }
}

/* -- -- */
#about__ai-dev {
   padding: 50px 0 90px;
   position: relative;
}

#about__ai-dev:before {
   content: '';
   width: 100%;
   background: url("../img/common/bg-img-1.jpg") no-repeat center top/cover;
   position: absolute;
   top: -45%;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#about__ai-dev h2 {
   letter-spacing: 0.1em;
}

#about__ai-dev .txt {
   line-height: 45px;
   padding-top: 50px;
}

#about__ai-dev .arrow {
   width: 149px;
   margin: 10px auto 0;
}

#about__ai-dev .arrow img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

#about__ai-dev .box {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding-top: 30px;
}

#about__ai-dev .box figcaption {
   padding-bottom: 20px;
}

#about__ai-dev .box .col-l {
   width: 461px;
}

#about__ai-dev .box .col-r {
   width: 475px;
   filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.16));
}

#about__ai-dev .box .icon-x {
   width: 104px;
   align-self: center;
}

@media screen and (max-width: 767px) {
   #about__ai-dev .txt {
      padding-top: 30px;
   }

   #about__ai-dev .arrow {
      width: 80px;
   }

   #about__ai-dev .box {
      flex-direction: column;
      align-items: center;
   }

   #about__ai-dev .box .col-l,
   #about__ai-dev .box .col-r {
      width: 100%;
   }

   #about__ai-dev .box .icon-x {
      width: 60px;
   }
}

/* -- -- */
#flow-point {
   background: url("../img/ai/bg_1.jpg") no-repeat center top/cover;
   color: #fff;
   padding: 100px 0 70px;
}

#flow-point .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 45px;
   color: #000;
   font-weight: 500;
   line-height: 30px;
   padding-top: 30px;
}

#flow-point .box .col {
   padding: 0 25px 25px;
   position: relative;
}

#flow-point .box .col:before {
   content: '';
   width: 100%;
   background-color: #fff;
   border-radius: 10px;
   position: absolute;
   top: 140px;
   bottom: 0;
   left: 0;
}

#flow-point .box figure {
   text-align: center;
}

#flow-point .box figure img {
   width: auto;
   height: 190px;
}

#flow-point .box figcaption {
   text-align: center;
   text-transform: capitalize;
   font-weight: 500;
   padding-bottom: 10px;
   color: #fff;
}

#flow-point .box h3,
#flow-point .box h4 {
   font-weight: 600;
   position: relative;
}

#flow-point .box h3 {
   padding-top: 8px;
}

#flow-point .box .txt {
   min-height: 120px;
   padding-top: 20px;
   position: relative;
}

#flow-point .box .point {
   background-color: #DBF4FF;
   border-radius: 26px;
   margin-top: 60px;
   padding: 42px 26px 26px;
   position: relative;
}

#flow-point .box .point:after {
   content: '';
   width: 95px;
   height: 79px;
   background: url("../img/ai/point-ttl.png") no-repeat center top/cover;
   position: absolute;
   top: -40px;
   left: 50%;
   transform: translateX(-50%);
}

#flow-point .box .point-txt {
   padding-top: 16px;
}

#flow-point .catch {
   letter-spacing: 0.1em;
   padding-top: 40px;
}

@media screen and (max-width: 1023px) {
   #flow-point .box {
      grid-template-columns: 370px;
      justify-content: center;
   }

   #flow-point .box .txt {
      min-height: inherit;
   }
}

@media screen and (max-width: 767px) {
   #flow-point .box {
      grid-template-columns: 1fr;
   }
}

/* -- -- */
#realized-ai {
   background: url("../img/ai/bg_2.jpg") no-repeat center top/cover;
   color: #fff;
   padding: 85px 0 110px;
   position: relative;
}

#realized-ai h2 {
   font-weight: 700;
   line-height: 20px;
}

#realized-ai h2 img {
   max-width: 551px;
}

#realized-ai .slider-scroll {
   padding-top: 30px;
}

#realized-ai .slider-scroll figure {
   width: 240px;
   margin-right: 38px;
}

#realized-ai .slider-scroll figure:nth-child(even) {
   margin-top: 45px;
}

#realized-ai .slider-scroll figcaption {
   text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   padding-top: 20px;
}

#realized-ai .catch {
   position: absolute;
   right: 0;
   bottom: -62px;
   left: 0;
   z-index: 1;
}

#realized-ai .catch span {
   display: inline-block;
   background-color: #fff;
   padding: 2px 14px;
   margin-bottom: 6px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#realized-ai .catch span:last-child {
   margin-bottom: 0;
}

@media screen and (max-width: 767px) {
   #realized-ai {
      padding: 80px 0;
   }

   #realized-ai h2 img {
      max-width: 320px;
   }

   #realized-ai .slider-scroll {
      padding-top: 30px;
   }

   #realized-ai .slider-scroll figure {
      width: 200px;
      margin-right: 20px;
   }

   #realized-ai .slider-scroll figure:nth-child(even) {
      margin-top: 20px;
   }

   #realized-ai .slider-scroll figcaption {
      padding-top: 10px;
   }
}

/* -- -- */
#case-study {
   background: url("../img/common/bg-img-1.jpg") no-repeat center/cover;
   padding: 155px 0 85px;
   position: relative;
}

#case-study:before {
   content: '';
   width: 100%;
   height: 110px;
   background-color: #0078F8;
   position: absolute;
   top: 375px;
   left: 0;
   mix-blend-mode: multiply;
}

#case-study h2 {
   font-weight: 500;
   letter-spacing: 0.18em;
   line-height: 24px;
}

#case-study h2 img {
   max-width: 402px;
   padding-bottom: 10px;
}

#case-study .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 80px;
   padding-top: 30px;
}

#case-study .box figure {
   padding-bottom: 35px;
}

#case-study .box figure a {
   display: block;
   padding-top: 75%;
   position: relative;
   border-radius: 10px;
}

#case-study .box figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

#case-study .box .cat {
   display: inline-block;
   vertical-align: middle;
   background: linear-gradient(to right, #43C5FF, #0078F8);
   color: #fff;
   font-weight: 700;
   font-size: 12px;
   line-height: 16px;
   margin-right: 10px;
   padding: 3px 5px;
}

#case-study .box time {
   display: inline-block;
   vertical-align: middle;
   color: #0078F8;
   font-weight: 500;
   font-size: 12px;
   line-height: 17px;
}

#case-study .box .ttl {
   width: 100%;
   line-height: 30px;
   padding-top: 25px;
}

#case-study .box .ttl a {
   display: inline-block;
   position: relative;
   padding-bottom: 32px;
}

#case-study .box .ttl a:after {
   content: '';
   width: 32px;
   height: 32px;
   background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
   position: absolute;
   bottom: 0;
   right: 0;
   border: 1px solid #CECECE;
   border-radius: 50%;
   transition: all 0.3s;
   box-sizing: border-box;
}

#case-study .box .ttl a span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   display: -webkit-box;
   overflow: hidden;
}

#case-study .button {
   padding-top: 40px;
}

@media screen and (max-width: 1200px) {
   #case-study:before {
      top: 345px;
   }
}

@media screen and (max-width: 1023px) {
   #case-study:before {
      top: 325px;
   }

   #case-study .box {
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   #case-study {
      padding: 120px 0 80px;
   }

   #case-study:before {
      display: none;
   }

   #case-study h2 img {
      max-width: 280px;
   }

   #case-study .box {
      grid-template-columns: 1fr;
      gap: 50px;
   }

   #case-study .box figure {
      position: relative;
      margin-bottom: 20px;
      padding-bottom: 0;
   }

   #case-study .box figure:before {
      content: '';
      width: 100vw;
      height: 80px;
      background-color: #0078F8;
      position: absolute;
      top: 50%;
      left: 50%;
      mix-blend-mode: multiply;
      transform: translate(-50%, -50%);
   }

   #case-study .box .ttl {
      padding-top: 15px;
   }
}

/*=============================================*
* 生成AI研修
*=============================================*/
#about__ai-generative {
   position: relative;
}

#about__ai-generative:before {
   content: '';
   width: 100%;
   background: url("../img/common/bg-img-1.jpg") no-repeat center top/cover;
   position: absolute;
   top: -40%;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#about__ai-generative h2 {
   background: url("../img/ai/ai-generative-icon-1.png") no-repeat center top/60px auto;
   padding-top: 70px;
   letter-spacing: 0.1em;
}

#about__ai-generative .box {
   padding: 60px 0 90px;
   position: relative;
}

#about__ai-generative .box:before {
   content: '';
   width: 100%;
   background-color: rgba(255, 255, 255, 0.85);
   position: absolute;
   top: 110px;
   bottom: 0;
   left: 0;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16);
   border-radius: 10px;
}

#about__ai-generative .box .list-circle {
   display: grid;
   grid-template-columns: repeat(3, 187px);
   justify-content: center;
   gap: 65px;
   padding-bottom: 85px;
}

#about__ai-generative .box .list-check {
   display: inline-grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
   text-align: left;
   position: relative;
   padding: 0 40px;
}

#about__ai-generative .box .list-check li {
   background: url("../img/ai/ai-generative-icon-2.png") no-repeat top 0px left/32px auto;
   padding-left: 56px;
   letter-spacing: 0.05em;
   font-weight: 500;
}

#about__ai-generative .arrow {
   width: 149px;
   margin: 115px auto 0;
}

#about__ai-generative .arrow img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

#about__ai-generative .catch {
   padding-top: 50px;
   position: relative;
   top: 20px;
   z-index: 1;
}

#about__ai-generative .catch span {
   display: inline-block;
   background-color: #fff;
   padding: 2px 14px;
   margin-bottom: 6px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#about__ai-generative .catch span:last-child {
   margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
   #about__ai-generative .box .list-circle {
      gap: 30px;
   }

   #about__ai-generative .box .list-check {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
   }
}

@media screen and (max-width: 767px) {
   #about__ai-generative {
      padding-top: 40px;
   }

   #about__ai-generative .box {
      padding: 20px 20px 40px;
   }

   #about__ai-generative .box:before {
      top: 100px;
   }

   #about__ai-generative .box .list-circle {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      padding-bottom: 40px;
   }

   #about__ai-generative .box .list-circle li {
      width: calc(50% - 5px);
   }

   #about__ai-generative .box .list-check {
      padding: 0;
   }

   #about__ai-generative .box .list-check li {
      background-position: top 4px left;
      background-size: 24px auto;
      padding-left: 32px;
   }

   #about__ai-generative .arrow {
      width: 80px;
      margin-top: 50px;
   }

   #about__ai-generative .catch {
      padding-top: 20px;
   }
}

/* -- -- */
#features {
   background: url("../img/ai/bg_1.jpg") no-repeat center/cover;
   color: #fff;
   padding: 100px 0 140px;
}

#features .desc {
   padding-top: 50px;
}

#features .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 60px;
   padding-top: 64px;
}

#features .box figure {
   position: relative;
   padding-top: 35px;
}

#features .box figcaption {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background-color: #fff;
   color: #000;
   font-weight: 500;
   position: absolute;
   top: 0;
   left: 0;
   left: calc(50% - 35px);
}

#features .box h3 {
   letter-spacing: 0.1em;
   padding-top: 36px;
}

#features .box .txt {
   padding-top: 50px;
}

@media screen and (max-width: 1023px) {
   #features .box {
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   #features {
      padding: 80px 0;
   }

   #features .box {
      grid-template-columns: 1fr;
      gap: 50px;
   }

   #features .box h3 {
      padding-top: 20px;
   }

   #features .box .txt {
      padding-top: 20px;
   }
}

/* -- -- */
#lineup {
   padding: 140px 0 210px;
}

#lineup h2 {
   max-width: 276px;
   margin: 0 auto;
   font-weight: 700;
   letter-spacing: 0.1em;
   line-height: 20px;
}

#lineup h2 img {
   padding-bottom: 10px;
}

#lineup .txt {
   padding-top: 60px;
}

#lineup ul {
   display: grid;
   grid-template-columns: repeat(4, 187px);
   justify-content: center;
   gap: 65px;
   padding-top: 35px;
}

#lineup figure {
   padding-top: 64px;
}

@media screen and (max-width: 1023px) {
   #lineup ul {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
   }
}

@media screen and (max-width: 767px) {
   #lineup {
      padding: 80px 0;
   }

   #lineup h2 {
      width: 200px;
   }

   #lineup .txt {
      padding-top: 30px;
   }

   #lineup ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }

   #lineup figure {
      padding-top: 40px;
   }
}

/*=============================================*
* システム開発
*=============================================*/
#strengths {
   position: relative;
   padding-bottom: 150px;
}

#strengths:before {
   content: '';
   width: 100%;
   background: url("../img/common/bg-img-1.jpg") no-repeat center top/cover;
   position: absolute;
   top: -50%;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#strengths h2 .h-42 {
   font-weight: 400;
}

#strengths .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding-top: 150px;
}

#strengths .box .col {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16);
   padding: 50px 35px;
   position: relative;
}

#strengths .box figcaption {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: linear-gradient(30deg, #0078F8, #43C5FF);
   color: #fff;
   position: absolute;
   top: -35px;
   left: 50%;
   transform: translateX(-50%);
   transition: all 0.3s;
   font-weight: 500;
}

#strengths .box h3 {
   padding-top: 30px;
}

#strengths .box .txt {
   padding-top: 40px;
}

@media screen and (max-width: 1023px) {
   #strengths {
      padding-top: 40px;
   }

   #strengths .box {
      grid-template-columns: 380px;
      justify-content: center;
      gap: 60px;
      padding-top: 60px;
   }
}

@media screen and (max-width: 767px) {
   #strengths {
      padding-bottom: 80px;
   }

   #strengths .box {
      grid-template-columns: 1fr;
   }
}

/* -- -- */
#works .row-1 {
   color: #fff;
   position: relative;
   padding: 90px 0 110px;
}

#works .row-1:before {
   content: '';
   width: 100%;
   height: 120%;
   background: url("../img/ai/bg_1.jpg") no-repeat center top/cover;
   position: absolute;
   top: 0;
   left: 0;
}

#works .row-1 .desc {
   padding-top: 28px;
}

#works .row-1 .slider {
   margin-top: 40px;
}

#works .row-1 .slider .slick-list {
   overflow: visible;
}

#works .row-1 .slider .slide-item {
   width: 230px;
   min-height: 236px;
   margin-right: 94px;
}

#works .row-1 .slider .slide-item figure {
   width: 208px;
   margin: 0 auto;
}

#works .row-1 .slider .slide-item figure img {
   vertical-align: bottom;
}

#works .row-1 .slider .slide-item h3 {
   padding-top: 15px;
}

#works .row-1 .slider .slide-item .txt {
   padding-top: 25px;
}

#works .row-1 .slider .slick-arrow {
   width: 47px;
   height: 47px;
   background: linear-gradient(30deg, #0078F8, #43C5FF);
   border: 1px solid #fff;
   top: 45%;
}

#works .row-1 .slider .slick-prev:before {
   background: url("../img/common/arrow-right-wh.png") no-repeat center/8px auto;
   transform: rotate(180deg);
}

#works .row-1 .slider .slick-next:before {
   background: url("../img/common/arrow-right-wh.png") no-repeat center/8px auto;
}

#works .row-2 {
   padding-bottom: 120px;
   position: relative;
}

#works .row-2:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/ai/bg_2.jpg") no-repeat center top/cover;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}

#works .row-2 .wrap {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16);
   padding: 0 100px 50px;
}

#works .row-2 h3 {
   position: relative;
   top: -20px;
}

#works .row-2 h3 span {
   display: inline-block;
   background: linear-gradient(100deg, #0078F8, #43C5FF);
   color: #fff;
   margin-bottom: 6px;
   padding: 2px 14px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

#works .row-2 h3 span:last-child {
   margin-bottom: 0;
}

#works .row-2 .desc {
   padding-top: 35px;
}

#works .row-2 .box {
   display: grid;
   grid-template-columns: 1fr 47px 1fr 47px 1fr;
   gap: 15px;
   padding-top: 20px;
}

#works .row-2 .box figure {
   padding-top: 14px;
}

#works .row-2 .box .txt {
   padding-top: 24px;
}

#works .row-2 .box .arrow {
   align-self: center;
}

#works .row-2 .box .arrow img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

@media screen and (max-width: 1200px) {
   #works .row-2 .wrap {
      padding: 0 50px 50px;
   }

   #works .row-2 .box h4 br.pc {
      display: none;
   }
}

@media screen and (max-width: 767px) {
   #works .row-1 {
      padding: 80px 0;
   }

   #works .row-1 .desc {
      padding-top: 20px;
   }

   #works .row-1 .slider .slick-arrow {
      top: 35vw;
   }

   #works .row-2 {
      padding: 0 10px 80px;
   }

   #works .row-2 .wrap {
      padding: 0 10px 40px;
   }

   #works .row-2 h3 {
      font-size: 18px;
   }

   #works .row-2 .desc {
      padding-top: 20px;
   }

   #works .row-2 .box {
      grid-template-columns: 1fr;
   }

   #works .row-2 .box .arrow {
      width: 40px;
      margin: 0 auto;
   }

   #works .row-2 .box .arrow img {
      transform: rotate(90deg);
   }
}

/*=============================================*
* DX導入支援
*=============================================*/
#support {
   position: relative;
   padding-bottom: 90px;
}

#support:before {
   content: '';
   width: 100%;
   background: url("../img/common/bg-img-1.jpg") no-repeat center top/cover;
   position: absolute;
   top: -50%;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#support h2 {
   line-height: 48px;
}

#support h2 .h-42 {
   font-weight: 500;
}

#support .desc {
   font-weight: 500;
   line-height: 45px;
   padding-top: 60px;
}

#support .block {
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 10px;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16);
   margin-top: 90px;
   padding: 25px 55px 45px;
}

#support .block .txt {
   font-weight: 500;
   padding-top: 15px;
}

#support .box {
   display: grid;
   grid-template-columns: 1fr 79px 1fr 79px 1fr;
   gap: 36px;
   padding-top: 48px;
}

#support .box .circle {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 156px;
   height: 156px;
   border-radius: 50%;
   background: linear-gradient(30deg, #0078F8, #43C5FF);
   color: #fff;
   text-align: center;
   margin: 0 auto;
}

#support .box h4 {
   font-weight: 700;
   line-height: 24px;
   padding-top: 30px;
}

#support .box .col-txt {
   padding-top: 15px;
}

#support .box .arrow {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

#support .box .arrow:before,
#support .box .arrow:after {
   content: "";
   border-left: 4px dotted #0078F8;
   flex: 1 0 0;
}

#support .box .arrow img {
   filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}

@media screen and (max-width: 1023px) {
   #support {
      padding-top: 40px;
   }

   #support .block {
      padding: 30px 20px;
   }

   #support .box {
      grid-template-columns: 1fr 40px 1fr 40px 1fr;
      gap: 15px;
   }
}

@media screen and (max-width: 767px) {
   #support {
      padding-bottom: 80px;
   }

   #support h2 {
      line-height: 40px;
   }

   #support .desc {
      padding-top: 30px;
   }

   #support .block {
      margin-top: 30px;
   }

   #support .box {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   #support .box .arrow {
      flex-direction: row;
   }

   #support .box .arrow:before,
   #support .box .arrow:after {
      border-top: 4px dotted #0078F8;
      border-left: 0;
   }

   #support .box .arrow img {
      max-width: 40px;
      transform: rotate(90deg);
   }
}

/* -- -- */
#application-areas {
   background: url("../img/ai/bg_1.jpg") no-repeat center/cover;
   padding: 100px 0 130px;
}

#application-areas h2 {
   color: #fff;
}

#application-areas .box {
   display: grid;
   grid-template-columns: 274px 1fr;
   min-height: 170px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16);
   margin-top: 80px;
}

#application-areas .box+.box {
   margin-top: 50px;
}

#application-areas .box figure {
   position: relative;
   bottom: 30px;
}

#application-areas .box .col {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 20px 90px 20px 0;
}

#application-areas .box .txt {
   padding-top: 15px;
}

@media screen and (max-width: 1023px) {
   #application-areas .box .col {
      padding: 20px 20px 20px 0;
   }
}

@media screen and (max-width: 767px) {
   #application-areas {
      padding: 80px 0;
   }

   #application-areas .box {
      grid-template-columns: 1fr;
      justify-content: center;
      margin-top: 60px;
   }

   #application-areas .box .col {
      padding: 0 20px 20px;
   }
}

/*=============================================*
* 会社情報
*=============================================*/
#greeting {
   overflow: hidden;
   position: relative;
   padding: 125px 0 180px;
}

#greeting:before {
   content: '';
   background-color: #F4F4F5;
   clip-path: polygon(0 0, 0% 100%, 100% 100%);
   width: 260px;
   height: 470px;
   position: absolute;
   bottom: 0;
   left: 0;
}

#greeting .deco {
   width: 610px;
   position: absolute;
   bottom: -50px;
   left: calc(50% + 190px);
}

#greeting .wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
}

#greeting .col {
   max-width: 600px;
}

#greeting h2 {
   line-height: 60px;
}

#greeting .txt {
   max-width: 540px;
   padding-top: 70px;
}

#greeting .txt p+p {
   padding-top: 35px;
}

#greeting .logo {
   width: 425px;
}

@media screen and (max-width: 1200px) {
   #greeting .logo {
      width: 320px;
   }
}

@media screen and (max-width: 1023px) {
   #greeting:before {
      width: 10.5vw;
      height: 18.6vw;
   }

   #greeting .deco {
      width: 50%;
      right: 0;
      left: auto;
   }

   #greeting .wrap {
      flex-direction: column;
      gap: 50px;
   }

   #greeting .col {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #greeting {
      padding: 35px 0 80px;
   }

   #greeting h2 {
      font-size: 23px;
      line-height: 1.8;
   }

   #greeting h2 br {
      display: none;
   }

   #greeting .txt {
      line-height: 20px;
      letter-spacing: 0.05em;
      padding-top: 20px;
   }

   #greeting .txt p+p {
      padding-top: 20px;
   }

   #greeting .deco {
      width: 152px;
      top: 140px;
      right: auto;
      bottom: auto;
      left: calc(50% + 80px);
   }
}

@media screen and (max-width: 429px) {
   #greeting h2 {
      font-size: 16px;
   }
}

/* -- -- */
#message {
   padding: 135px 0 105px;
}

#message h2 {
   border-bottom: 1px solid #DBDBDB;
   padding-bottom: 50px;
}

#message h2 .ttl-sub {
   padding-bottom: 20px;
}

#message .box {
   max-width: 850px;
   margin: 0 auto;
   padding-top: 70px;
}

#message figure img {
   border-radius: 5px;
}

#message .txt {
   padding-top: 70px;
}

#message .txt-name {
   font-weight: 700;
   text-align: right;
   padding-top: 64px;
}

#message .txt-name .ttl-sub {
   color: inherit;
   line-height: inherit;
}

@media screen and (max-width: 767px) {
   #message {
      padding: 50px 0 70px;
   }

   #message .txt {
      padding-top: 35px;
   }
}

/* -- -- */
#outline {
   padding: 0 30px 135px;
}

#outline .row {
   background-color: #fff;
   border-radius: 5px;
   padding: 100px 30px;
}

#outline .tb-style {
   padding-top: 48px;
}

@media screen and (max-width: 767px) {
   #outline {
      padding: 0 7.5vw 90px;
   }

   #outline .row {
      padding: 45px 0;
   }
}

/*=============================================*
* Mailform
*=============================================*/
#mailform {
   position: relative;
   padding: 120px 0;
}

#mailform .wrap {
   display: flex;
   justify-content: space-between;
   gap: 30px;
}

#mailform .col-l {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 461px;
}

#mailform .col-l .txt {
   font-weight: 500;
   line-height: 40px;
   letter-spacing: 0.02em;
   flex: 1 0 0;
}

#mailform .col-l figure {
   max-width: 450px;
}

#mailform .col-r {
   width: 620px;
   box-sizing: border-box;
   background-color: #F4F4F5;
   padding: 40px 60px;
}

#mailform .form-row {
   font-weight: 500;
   letter-spacing: 0.02em;
   padding-bottom: 15px;
}

#mailform .form-row .caption span {
   display: inline-block;
   vertical-align: super;
   font-size: 8px;
   line-height: 20px;
   padding-left: 5px;
}

#mailform .form-row .input {
   padding-top: 4px;
}

#mailform .result_txt {
   display: block;
   word-break: break-all;
   white-space: pre-wrap;
}

#mailform .form-btn {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding-top: 25px;
}

#mailform .form-btn p {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 240px;
   height: 60px;
   background-color: #2D5EE5;
   color: #fff;
   border: 0px solid #fff;
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0.02em;
   line-height: 36px;
   text-transform: uppercase;
   text-align: left;
   box-sizing: border-box;
   margin: 0;
   padding-right: 20px;
   position: relative;
   z-index: 1;
   border-radius: 50px;
   transition: all 0.3s linear;
}

#mailform .form-btn p:after {
   content: '';
   width: 26px;
   height: 26px;
   background: url("../img/common/arrow-right.png") no-repeat center/12px auto;
   background-color: #fff;
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translate(0, -50%);
   border-radius: 50%;
   transition: all 0.3s;
}

#mailform .form-btn p:hover {
   opacity: 1;
}

#mailform .form-btn p:hover:after {
   transform: translate(5px, -50%);
}

#mailform .form-btn input {
   height: 100%;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
}

#mailform .form-btn .btn-prev {
   justify-content: flex-end;
   background: #fff;
   color: #2D5EE5;
}

#mailform .form-btn .btn-prev:after {
   background-image: url("../img/common/arrow-right-wh.png");
   background-color: #2D5EE5;
   right: auto;
   left: 12px;
   transform: translate(0, -50%) rotate(180deg);
}

#mailform .form-btn .btn-prev:hover:after {
   transform: translate(-5px, -50%) rotate(180deg);
}

#mailform .wpcf7-spinner {
   display: none;
}

#mailform.confirm .form-row .caption {
   padding-top: 0;
}

@media screen and (max-width: 1200px) {
   #mailform .col-r {
      width: 470px;
      padding: 40px;
   }
}

@media screen and (max-width: 1023px) {
   #mailform .wrap {
      flex-direction: column;
      gap: 0px;
   }

   #mailform .col-l,
   #mailform .col-r {
      width: 100%;
   }

   #mailform .col-l figure {
      margin-left: auto;
      padding-top: 30px;
   }
}

@media screen and (max-width: 767px) {
   #mailform {
      padding: 70px 0;
   }

   #mailform .col-l .txt {
      line-height: 30px;
   }

   #mailform .col-l figure {
      width: 70%;
      padding-top: 0px;
   }

   #mailform .col-r {
      padding: 30px 20px;
   }
}

/* -- -- */
#mailform.thanks {
   text-align: center;
}

#mailform.thanks .col-r {
   width: 100%;
}

#mailform.thanks .txt p+p {
   padding-top: 30px;
}

#mailform.thanks .button {
   text-align: center;
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   #mailform.thanks {
      text-align: left;
      font-size: 12px;
   }

   #mailform.thanks .txt p+p {
      padding-top: 20px;
   }

   #mailform.thanks .button {
      padding-top: 20px;
   }
}

/*=============================================*
* Post type
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px;
   position: relative;
   padding-top: 120px;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   font-weight: 700;
   border-bottom: 1px solid transparent;
}

.wp-pagenavi a:hover {
   color: #2463EB;
   border-bottom-color: #2463EB;
}

.wp-pagenavi .current {
   pointer-events: none;
   color: #2463EB;
   border-bottom-color: #2463EB;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
   width: 35px;
   height: 35px;
   border: 1px solid #CECECE;
   border-radius: 50%;
   font-size: 0;
   position: relative;
}

.wp-pagenavi .previouspostslink:after,
.wp-pagenavi .nextpostslink:after {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
   position: absolute;
   top: 0;
   left: 0;
}

.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover {
   font-size: 0;
   border-bottom-color: #CECECE;
}

.wp-pagenavi .previouspostslink:after {
   transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      padding-top: 50px;
   }
}

/* -- -- */
.sidebar {
   width: 280px;
}

.sidebar .item {
   background-color: #F4F4F5;
   padding: 30px;
}

.sidebar .item:not(:last-child) {
   margin-bottom: 20px;
}

.sidebar h3 {
   font-weight: 700;
   border-bottom: 1px solid #D9D9D9;
   padding-bottom: 12px;
}

.sidebar ul {
   font-weight: 600;
   font-size: 14px;
   line-height: 26px;
   padding-top: 16px;
   color: #535353;
}

.sidebar .list-1 li a {
   display: block;
   background: url("../img/common/arrow-right.png") no-repeat center right/10px auto;
   padding-right: 15px;
}

.sidebar .list-1 li a:hover {
   transform: translateX(5px);
}

.sidebar .list-2 li+li {
   border-top: 1px dashed #D9D9D9;
   margin-top: 12px;
   padding-top: 10px;
}

.sidebar .list-2 a {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px 6px;
}

.sidebar .list-2 time {
   font-size: 16px;
}

.sidebar .list-2 .cat {
   background-color: #E1EBF8;
   color: #14232E;
   min-width: 60px;
   border-radius: 20px;
   font-weight: 700;
   font-size: 13px;
   line-height: 20px;
   padding: 0 5px;
   text-align: center;
}

.sidebar .list-2 .ttl {
   width: 100%;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   line-height: 23px;
   position: relative;
   background: url("../img/common/arrow-right.png") no-repeat bottom 10px right/10px auto;
   padding-right: 15px;
}

.sidebar .list-2 .ttl span {
   border-bottom: 1px solid;
   transition: all 0.3s;
}

.sidebar .list-2 a:hover .ttl span {
   border-bottom-color: transparent;
}

@media screen and (max-width: 767px) {
   .sidebar {
      width: 100%;
   }
}

/* -- -- */
.case-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 65px 45px;
}

.case-list .col {
   display: block;
   border-radius: 5px;
   border: 1px solid #E3E3E3;
   padding: 20px;
}

.case-list figure {
   width: 100%;
   padding-top: 67.3%;
   border-radius: 5px;
   overflow: hidden;
   position: relative;
}

.case-list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.case-list .tag {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 7px;
   padding-top: 20px;
   font-weight: 700;
   font-size: 13px;
   line-height: 20px;
   text-align: center;
}

.case-list .tag span {
   display: block;
   min-width: 50px;
   border: 1px solid #CECECE;
   border-radius: 30px;
   color: #8E8E8E;
   padding: 0 10px;
}

.case-list h3 {
   margin-top: 10px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.case-list .company {
   font-weight: 600;
   color: #8E8E8E;
   padding-top: 12px;
}

.case-list .txt {
   font-weight: 500;
   line-height: 25px;
   margin-top: 10px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   display: -webkit-box;
   overflow: hidden;
}

@media screen and (max-width: 1023px) {
   .case-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   .case-list {
      grid-template-columns: 1fr;
   }

   .case-list .col {
      padding: 15px;
   }

   .case-list .tag {
      gap: 6px;
      font-size: 11px;
      line-height: 16px;
      padding-top: 15px;
   }

   .case-list .tag span {
      padding: 0 5px;
   }

   .case-list h3 {
      font-size: 16px;
      padding-top: 15px;
   }

   .case-list .company {
      font-size: 13px;
   }
}

.news-list li+li {
   border-top: 1px solid #F0F0F0;
   margin-top: 30px;
   padding-top: 30px;
}

.news-list li a {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px 15px;
   padding: 0 90px 0 20px;
   position: relative;
}

.news-list li a:after {
   content: '';
   display: block;
   width: 32px;
   height: 32px;
   background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
   border: 1px solid #CECECE;
   border-radius: 50%;
   transition: all 0.3s;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translate(0, -50%);
}

.news-list li a:hover:after {
   transform: translate(5px, -50%);
}

.news-list time {
   color: #ADADAD;
   font-weight: 700;
}

.news-list .cat {
   background-color: #E1EBF8;
   min-width: 60px;
   border-radius: 30px;
   padding: 0 10px;
   font-weight: 700;
   font-size: 13px;
   line-height: 22px;
   text-align: center;
}

.news-list .ttl {
   width: 100%;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   font-weight: 500;
}

@media screen and (max-width: 767px) {
   .news-list li a {
      padding: 0;
   }

   .news-list li a:after {
      display: none;
   }

   .news-list .ttl {
      position: relative;
      padding-right: 50px;
   }

   .news-list .ttl:after {
      content: '';
      display: block;
      width: 32px;
      height: 32px;
      background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
      border: 1px solid #CECECE;
      border-radius: 50%;
      transition: all 0.3s;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
   }
}

/* -- -- */
.pt-case-study {
   position: relative;
   padding: 120px 0;
}

.pt-case-study .list-cate {
   font-weight: 700;
   font-size: 12px;
   line-height: 20px;
   text-align: center;
   padding-bottom: 60px;
}

.pt-case-study .list-cate ul {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
}

.pt-case-study .list-cate a {
   display: block;
   min-width: 95px;
   border: 1px solid #CECECE;
   border-radius: 20px;
   padding: 5px 10px;
}

.pt-case-study .list-cate a.current,
.pt-case-study .list-cate a:hover {
   background-color: #14232E;
   color: #fff;
}

@media screen and (max-width: 767px) {
   .pt-case-study {
      padding: 70px 0;
   }

   .pt-case-study .list-cate {
      padding-bottom: 30px;
   }

   .pt-case-study .list-cate a {
      min-width: 70px;
   }
}

/* -- -- */
.pt-news {
   padding: 120px 0;
}

.pt-news .wrap {
   display: flex;
   gap: 70px;
}

.pt-news .col-l {
   width: calc(100% - 350px);
}

@media screen and (max-width: 1023px) {
   .pt-news .wrap {
      flex-direction: column;
      align-items: center;
      gap: 120px;
   }

   .pt-news .col-l {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   .pt-news {
      padding: 70px 0;
   }

   .pt-news .wrap {
      flex-direction: column;
      align-items: center;
      gap: 50px;
   }

   .pt-news .col-l {
      width: 100%;
   }
}

/* -- -- */
#cpt-detail {
   padding: 120px 0;
}

#cpt-detail .cate,
#cpt-detail time {
   display: inline-block;
   vertical-align: middle;
   font-size: 12px;
   line-height: 22px;
}

#cpt-detail time {
   font-weight: 500;
}

#cpt-detail .the_title {
   padding-top: 60px;
}

#cpt-detail .thumbnail {
   padding-top: 60px;
}

#cpt-detail .the_content {
   font-weight: 500;
   padding-top: 60px;
}

#cpt-detail .the_content h2 {
   font-weight: 500;
   font-size: 26px;
   line-height: 36px;
   letter-spacing: 0;
   margin: 50px 0 30px;
   padding: 0px;
}

#cpt-detail .the_content h3 {
   font-weight: 500;
   font-size: 22px;
   letter-spacing: 0;
   border-bottom: 2px solid #0078F8;
   margin: 50px 0 30px;
   padding: 0 0 10px;
}

#cpt-detail .the_content h4 {
   font-weight: 500;
   font-size: 20px;
   letter-spacing: 0;
   border-left: 5px solid #0078F8;
   margin: 50px 0 30px;
   padding: 0 0 0 15px;
}

#cpt-detail .the_content h2:first-child,
#cpt-detail .the_content h3:first-child,
#cpt-detail .the_content h4:first-child {
   margin-top: 0;
}

#cpt-detail .the_content h2+h3,
#cpt-detail .the_content h2+h4,
#cpt-detail .the_content h2+h5,
#cpt-detail .the_content h3+h4,
#cpt-detail .the_content h3+h5,
#cpt-detail .the_content h4+h5 {
   margin-top: 0;
}

#cpt-detail .the_content ul {
   list-style: disc;
   padding-left: 30px;
}

#cpt-detail .the_content ol {
   list-style: decimal;
   padding-left: 30px;
}

#cpt-detail .the_content a {
   text-decoration: underline;
}

#cpt-detail .the_content a:hover {
   text-decoration: none;
}

#cpt-detail .the_content p img {
   display: inline-block;
   vertical-align: top;
   margin-right: 20px;
}

#cpt-detail .the_content p img.aligncenter {
   display: block;
   margin: 0 auto;
}

#cpt-detail .the_content p img.alignright {
   display: block;
   margin-left: auto;
}

#cpt-detail .the_content p img:last-child {
   margin-right: 0;
}

#cpt-detail .the_content pre {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: flex-start;
   gap: 20px 66px;
}

#cpt-detail .button {
   padding-top: 40px;
}

@media screen and (max-width: 1023px) {
   #cpt-detail .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img:last-child {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   #cpt-detail {
      padding: 70px 0;
   }

   #cpt-detail time {
      display: block;
   }

   #cpt-detail .the_title {
      padding-top: 30px;
   }

   #cpt-detail .the_content {
      padding-top: 30px;
   }

   #cpt-detail .the_content h2 {
      font-size: 22px;
   }

   #cpt-detail .the_content h3 {
      font-size: 20px;
   }

   #cpt-detail .the_content h4 {
      font-size: 18px;
   }

   #cpt-detail .the_content ul,
   #cpt-detail .the_content ol {
      padding-left: 15px;
   }

   #cpt-detail .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img.alignright {
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img:last-child {
      margin: 0 auto !important;
   }

   #cpt-detail .the_content pre {
      grid-template-columns: 1fr;
   }

   #cpt-detail .button {
      text-align: center;
   }
}

/* -- -- */
.pt-case-detail .wrap {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 30px 70px;
}

.pt-case-detail .head {
   width: 100%;
}

.pt-case-detail .col-l {
   width: calc(100% - 350px);
}

.pt-detail-case-cname {
   font-weight: 600;
}

.pt-detail-case-title {
   padding-top: 10px;
}

.pt-detail-case-cats {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 7px;
   padding-top: 20px;
   font-weight: 700;
   font-size: 13px;
   line-height: 20px;
   text-align: center;
   padding-top: 10px;
}

.pt-detail-case-cats a {
   display: block;
   min-width: 50px;
   border: 1px solid #CECECE;
   border-radius: 30px;
   color: #8E8E8E;
   padding: 0 10px;
}

.pt-detail-case-cats a:hover {
   background-color: #14232E;
   color: #fff;
   opacity: 1;
}

.pt-detail-case-thumb {
   text-align: center;
}

.pt-detail-case-thumb img {
   border-radius: 5px;
}

.pt-detail-case-content {
   line-height: 25px;
   padding-top: 60px;
}

.pt-detail-case-ba {
   padding-top: 50px;
}

.pt-detail-case-ba h3 {
   background-color: #0451A4;
   color: #fff;
   border-radius: 5px 5px 0 0;
   padding: 7px 20px;
}

.pt-detail-case-ba-row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 170px;
   background-color: #F4F4F5;
   border-radius: 0 0 5px 5px;
   padding: 45px 35px;
   position: relative;
}

.pt-detail-case-ba-row:before {
   content: '';
   width: 0;
   height: 0;
   border-width: 22px 0 22px 70px;
   border-color: transparent transparent transparent #E1EBF8;
   border-style: solid;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.pt-detail-case-ba-row h4 {
   font-weight: 700;
   font-size: 16px;
   text-align: center;
   border-radius: 50px;
   padding: 8px 0 7px;
}

.pt-detail-case-ba-row .content {
   font-weight: 500;
   padding: 20px 20px 0;
}

.pt-detail-case-ba-row .content p,
.pt-detail-case-ba-row .content li {
   position: relative;
   padding-left: 25px;
}

.pt-detail-case-ba-row .content p:before,
.pt-detail-case-ba-row .content li:before {
   content: '';
   width: 14px;
   height: 14px;
   border-radius: 50%;
   position: absolute;
   top: 9px;
   left: 0;
}

.pt-detail-case-ba-row .before h4 {
   background-color: #fff;
}

.pt-detail-case-ba-row .before .content p:before,
.pt-detail-case-ba-row .before .content li:before {
   background-color: #8E8E8E;
}

.pt-detail-case-ba-row .after h4 {
   background-color: #DBEAFF;
}

.pt-detail-case-ba-row .after .content p:before,
.pt-detail-case-ba-row .after .content li:before {
   background-color: #0451A4;
}

.pt-detail-case-point {
   padding-top: 50px;
}

.pt-detail-case-point h3 {
   border-left: 3px solid #2463EB;
   padding-left: 12px;
}

.pt-detail-case-point .content {
   border-top: 1px solid #E3E3E3;
   margin-top: 15px;
   padding-top: 25px;
   font-weight: 700;
}

.pt-detail-case-point .content li,
.pt-detail-case-point .content p {
   background: url("../img/common/icon-checked.png") no-repeat top 5px left/22px;
   position: relative;
   padding-left: 45px;
}

.pt-detail-case-point .content li:not(:last-child),
.pt-detail-case-point .content p:not(:last-child) {
   padding-bottom: 45px;
}

.pt-detail-case-botttom {
   width: calc(100% - 350px);
}

.pt-detail-case-hr {
   border-top-color: #E3E3E3;
   margin-top: 40px;
}

.pt-detail-nav {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 80px;
   padding-top: 60px;
}

.pt-detail-nav a,
.pt-detail-nav span {
   display: block;
}

.pt-detail-nav .cname {
   font-weight: 600;
}

.pt-detail-nav .title {
   font-weight: 700;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.pt-detail-nav .arrow {
   display: block;
   width: 32px;
   height: 32px;
   background: url("../img/common/arrow-right.png") no-repeat center/8px auto;
   border: 1px solid #CECECE;
   border-radius: 50%;
   transition: all 0.3s;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
}

.pt-detail-nav .prev a,
.pt-detail-nav .next a {
   border: 1px solid #E3E3E3;
   border-radius: 5px;
   padding: 20px 40px;
   position: relative;
}

.pt-detail-nav .prev a:hover,
.pt-detail-nav .next a:hover {
   background-color: rgba(0, 0, 0, 0.1);
   opacity: 1;
}

.pt-detail-nav .prev a {
   padding-left: 115px;
}

.pt-detail-nav .prev .arrow {
   left: 40px;
   transform: translate(0, -50%) rotate(180deg);
}

.pt-detail-nav .prev a:hover .arrow {
   transform: translate(-5px, -50%) rotate(180deg);
}

.pt-detail-nav .next a {
   padding-right: 115px;
}

.pt-detail-nav .next .arrow {
   right: 40px;
   transform: translate(0, -50%);
}

.pt-detail-nav .next a:hover .arrow {
   transform: translate(5px, -50%);
}

.pt-case-detail .col-r {
   width: 280px;
   background-color: #F4F4F5;
   box-sizing: border-box;
   padding: 35px;
   position: sticky;
   top: 80px;
}

.pt-case-detail .col-r h3 {
   font-weight: 700;
   border-bottom: 1px solid #D9D9D9;
   padding-bottom: 15px;
}

.pt-case-detail .col-r dl {
   line-height: 24px;
   padding-top: 15px;
}

.pt-case-detail .col-r dl+dl {
   border-top: 1px dashed #E3E3E3;
   margin-top: 15px;
}

.pt-case-detail .col-r dl dt {
   font-weight: 600;
   font-size: 14px;
}

.pt-case-detail .col-r dl dt img {
   display: none;
   max-width: 13px;
}

@media screen and (max-width: 1200px) {
   .pt-detail-case-ba-row {
      gap: 100px;
      padding: 30px;
   }

   .pt-detail-nav {
      gap: 40px;
      padding-top: 40px;
   }

   .pt-detail-nav .prev a,
   .pt-detail-nav .next a {
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
   }

   .pt-detail-nav .cname {
      display: none;
   }

   .pt-detail-nav .prev a {
      padding-left: 70px;
   }

   .pt-detail-nav .prev .arrow {
      left: 20px;
   }

   .pt-detail-nav .next a {
      padding-right: 70px;
   }

   .pt-detail-nav .next .arrow {
      right: 20px;
   }
}

@media screen and (max-width: 1023px) {
   .pt-case-detail .wrap {
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
   }

   .pt-case-detail .col-l {
      width: 100%;
   }

   .pt-case-detail .col-r {
      position: relative;
      top: 0;
   }
}

@media screen and (max-width: 767px) {
   .pt-news-detail-title {
      font-size: 26px;
   }

   .pt-detail-case-cats {
      font-size: 12px;
   }

   .pt-detail-case-ba h3 {
      padding: 16px 24px;
   }

   .pt-detail-case-ba-row {
      grid-template-columns: 1fr;
      gap: 100px;
      padding: 30px 24px;
   }

   .pt-detail-case-ba-row:before {
      border-width: 70px 22px 0 22px;
      border-color: #E1EBF8 transparent transparent transparent;
      top: 52%;
   }

   .pt-detail-case-ba-row .content {
      padding: 20px 0 0;
   }

   .pt-detail-case-point .content li,
   .pt-detail-case-point .content p {
      padding-left: 35px;
   }

   .pt-case-detail .col-r {
      width: 100%;
      margin-top: 15px;
      padding: 24px;
   }

   .pt-detail-case-hr {
      margin-top: 30px;
   }

   .pt-detail-nav {
      grid-template-columns: 1fr;
      gap: 15px;
      font-size: 14px;
      line-height: 20px;
   }

   .pt-detail-nav .arrow {
      width: 20px;
      height: 20px;
   }

   .pt-detail-nav .prev a,
   .pt-detail-nav .next a {
      padding: 5px 20px;
   }

   .pt-detail-nav .prev a {
      padding-left: 40px;
   }

   .pt-detail-nav .prev .arrow {
      left: 10px;
   }

   .pt-detail-nav .next a {
      padding-right: 40px;
   }

   .pt-detail-nav .next .arrow {
      right: 10px;
   }
}

.case-study-other {
   padding: 100px 0;
}

.case-study-other .case-list {
   padding-top: 60px;
}

.case-study-other .case-list a {
   background-color: #fff;
}

@media screen and (max-width: 767px) {
   .case-study-other {
      background-color: #fff;
      padding: 120px 0 60px;
      position: relative;
   }

   .case-study-other:before {
      content: '';
      width: 100%;
      height: 60px;
      background: #F4F4F5;
      position: absolute;
      top: 0;
      left: 0;
   }

   .case-study-other h2 {
      font-size: 28px;
   }
}

/* -- -- */
.pt-news-detail-time {
   display: flex;
   gap: 20px;
   font-weight: 700;
}

.pt-news-detail-title {
   border-left: 3px solid #2463EB;
   margin-top: 40px;
   padding-left: 30px;
}

#cpt-detail.pt-news .the_content {
   line-height: 40px;
}

@media screen and (max-width: 1200px) {
   #cpt-detail.pt-news .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail.pt-news .the_content p img:last-child {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   .pt-news-detail-time {
      gap: 10px;
   }

   .pt-news-detail-title {
      padding-left: 20px;
   }

   #cpt-detail.pt-news .the_content {
      line-height: 30px;
   }
}

/* -- -- */
#related-articles {
   padding: 112px 0;
}

#related-articles .wrap {
   background-color: #fff;
   padding: 80px 60px;
}

#related-articles .news-list {
   padding-top: 30px;
}

#related-articles .button {
   padding-top: 60px;
}

@media screen and (max-width: 767px) {
   #related-articles {
      padding: 40px 20px;
   }

   #related-articles .wrap {
      background-color: #fff;
      padding: 40px 20px;
   }

   #related-articles h2 {
      font-size: 28px;
   }

   #related-articles .news-list {
      padding-top: 20px;
   }

   #related-articles .button {
      padding-top: 30px;
   }
}

/*=============================================*
* DXシステム開発
*=============================================*/
#dx-lead {
   position: relative;
   padding: 100px 0 20px;
}

#dx-lead:before {
   content: '';
   background-color: #F4F4F5;
   clip-path: polygon(0 0, 0% 100%, 100% 100%);
   width: 260px;
   height: 470px;
   position: absolute;
   bottom: 0;
   left: 0;
}

#dx-lead .txt {
   padding-top: 60px;
}

#dx-lead .infiniteslide_wrap {
   padding-top: 20px;
}

#dx-lead .infiniteslide {
   display: flex;
}

#dx-lead .infiniteslide figure {
   width: 1522px;
   margin-right: 50px;
}

@media screen and (max-width: 1023px) {
   #dx-lead:before {
      width: 10.5vw;
      height: 18.6vw;
   }
}

@media screen and (max-width: 767px) {
   #dx-lead {
      padding: 40px 0;
   }

   #dx-lead .infiniteslide figure {
      width: 93vw;
      margin-right: 20px;
   }

   #dx-lead .txt {
      padding-top: 20px;
   }
}

#dx-dev-style {
   padding: 145px 0 160px;
}

#dx-dev-style .ttl-sub {
   padding-bottom: 20px;
}

#dx-dev-style .desc {
   padding-top: 35px;
}

#dx-dev-style .box {
   padding-top: 60px;
}

#dx-dev-style .box .item {
   display: grid;
   grid-template-columns: 1fr 350px;
   align-items: center;
   background-color: #fff;
   position: relative;
   padding: 24px;
}

#dx-dev-style .box .item:not(:last-child) {
   margin-bottom: 36px;
}

#dx-dev-style .box .item:before {
   content: '';
   width: 48px;
   height: 55px;
   background: url("../img/common/dx_line.png") no-repeat center top/cover;
   position: absolute;
   top: -7px;
   left: 32px;
}

#dx-dev-style .box .col {
   max-width: 628px;
   padding: 36px;
}

#dx-dev-style .box .txt {
   padding-top: 35px;
}

@media screen and (max-width: 1023px) {
   #dx-dev-style .box .item {
      grid-template-columns: repeat(2, 1fr);
   }

   #dx-dev-style .box .col {
      padding-left: 0;
   }
}

@media screen and (max-width: 767px) {
   #dx-dev-style {
      padding: 100px 0 80px;
   }

   #dx-dev-style .box {
      padding-top: 40px;
   }

   #dx-dev-style .box .item {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 70px 30px 40px;
   }

   #dx-dev-style .box .item:before {
      top: -10px;
      left: 24px;
   }

   #dx-dev-style .box .item:not(:last-child) {
      margin-bottom: 45px;
   }

   #dx-dev-style .box .col {
      padding: 0;
   }

   #dx-dev-style .box .txt {
      padding-top: 16px;
   }
}

#dx-platform-custom {
   padding: 0 30px 90px;
}

#dx-platform-custom .row {
   background-color: #fff;
   padding: 130px 30px 160px;
}

#dx-platform-custom h2 {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   padding-top: 20px;
}

#dx-platform-custom h2 img {
   max-width: 25px;
}

#dx-platform-custom .txt {
   padding-top: 30px;
}

#dx-platform-custom figure {
   padding-top: 75px;
}

@media screen and (max-width: 767px) {
   #dx-platform-custom {
      padding: 0 0 80px;
   }

   #dx-platform-custom .row {
      padding: 80px 0 65px;
   }

   #dx-platform-custom .wrap {
      padding: 0 3.5vw;
   }

   #dx-platform-custom h2 {
      flex-direction: column;
      gap: 14px;
      font-size: 26px;
   }

   #dx-platform-custom .txt {
      padding-top: 25px;
   }

   #dx-platform-custom figure {
      padding-top: 45px;
   }
}

#dx-howto {
   padding: 145px 0 190px;
}

#dx-howto .ttl-sub {
   padding-bottom: 10px;
}

#dx-howto .txt {
   padding-top: 40px;
}

#dx-howto figure {
   padding-top: 60px;
}

@media screen and (max-width: 767px) {
   #dx-howto {
      padding: 70px 0 64px;
   }

   #dx-howto .txt {
      padding-top: 30px;
   }

   #dx-howto figure {
      margin: 0 -3.5vw;
      padding-top: 30px;
   }
}

#dx-flow {
   padding: 170px 0 200px;
}

#dx-flow .desc {
   font-weight: 500;
   padding-top: 50px;
}

#dx-flow .box {
   padding-top: 95px;
}

#dx-flow .box .item {
   display: grid;
   grid-template-columns: 150px 1fr;
   align-items: center;
   gap: 5px;
   background-color: #fff;
   position: relative;
   padding: 40px 90px 40px 60px;
}

#dx-flow .box .item:not(:last-child) {
   margin-bottom: 60px;
}

#dx-flow .box .item:not(:last-child):before {
   content: '';
   width: 0;
   height: 60px;
   border-left: 10px solid #E1EBF8;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
}

#dx-flow .box .col {
   border-left: 1px solid #DBDBDB;
   padding-left: 40px;
}

#dx-flow .box .txt {
   padding-top: 20px;
}

@media screen and (max-width: 767px) {
   #dx-flow {
      padding: 105px 0;
   }

   #dx-flow .desc {
      padding-top: 60px;
   }

   #dx-flow .box .item {
      display: block;
      position: relative;
      padding: 35px 25px;
   }

   #dx-flow .box .item:not(:last-child) {
      margin-bottom: 35px;
   }

   #dx-flow .box .item:not(:last-child):before {
      height: 35px;
   }

   #dx-flow .box figure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 125px;
      height: 82px;
      position: absolute;
      top: 35px;
      left: 25px;
      box-sizing: border-box;
      text-align: center;
   }

   #dx-flow .box figure img {
      max-width: 110px;
   }

   #dx-flow .box .col {
      border-left: 0;
      padding-left: 0;
   }

   #dx-flow .box h3 {
      display: flex;
      align-items: center;
      min-height: 82px;
      border-left: 1px solid #DBDBDB;
      margin-left: 125px;
      padding-left: 20px;
      font-size: 20px;
   }

   #dx-flow .box .txt {
      padding-top: 20px;
   }
}

#dx-case {
   padding: 150px 0;
}

#dx-case .ttl-sub {
   border-bottom: 1px solid #E3E3E3;
   padding-bottom: 30px;
}

#dx-case h2 {
   padding-top: 30px;
}

#dx-case .case-list {
   padding-top: 60px;
}

#dx-case .button {
   padding-top: 75px;
}

@media screen and (max-width: 1023px) {
   #dx-case .case-list {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   #dx-case {
      padding: 75px 0 105px;
   }
}

#dx-price {
   background-color: #EFF3F8;
   padding: 160px 0 180px;
}

#dx-price .desc {
   font-weight: 500;
   padding-top: 50px;
}

#dx-price h3 {
   width: 120px;
   text-align: center;
   margin: 100px auto 0;
   padding: 9px 0;
   color: #fff;
}

#dx-price h3.cl1 {
   background-color: #2463EB;
}

#dx-price h3.cl2 {
   background-color: #004EA2;
}

#dx-price .box-1 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 100px;
   margin-top: 75px;
}

#dx-price .box-1 .col {
   position: relative;
   padding: 85px 60px 70px;
}

#dx-price .box-1 .col:nth-child(1) {
   background-color: #fff;
}

#dx-price .box-1 .col:nth-child(1) ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
   line-height: 24px;
}

#dx-price .box-1 .col:nth-child(1) ul li {
   position: relative;
   padding-left: 25px;
}

#dx-price .box-1 .col:nth-child(1) ul li:before {
   content: '';
   width: 12px;
   height: 12px;
   background-color: #2463EB;
   border-radius: 50%;
   position: absolute;
   top: 6px;
   left: 0;
}

#dx-price .box-1 .col:nth-child(2) {
   background-color: #2463EB;
   color: #fff;
}

#dx-price .box-1 .col:nth-child(2) ul {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   max-width: 390px;
   font-size: 15px;
   color: #767676;
   margin: 0 auto;
}

#dx-price .box-1 .col:nth-child(2) ul li {
   width: 120px;
   background-color: #fff;
   border-radius: 30px;
   text-align: center;
   padding: 3px 0;
}

#dx-price .box-1 figure {
   width: 74px;
   position: absolute;
   top: -28px;
   left: 50%;
   transform: translateX(-50%);
}

#dx-price .box-1 .txt {
   font-weight: 500;
   line-height: 25px;
   padding-top: 35px;
}

#dx-price .box-1 ul {
   padding-top: 40px;
   font-weight: 700;
}

#dx-price .box-2 {
   background-color: #004EA2;
   color: #fff;
   margin-top: 75px;
   padding: 85px 30px;
   position: relative;
}

#dx-price .box-2 figure {
   width: 74px;
   position: absolute;
   top: -28px;
   left: 50%;
   transform: translateX(-50%);
}

#dx-price .box-2 .txt {
   font-weight: 500;
   line-height: 25px;
   padding-top: 20px;
}

#dx-price .box-2 ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   max-width: 770px;
   margin: 0 auto;
   padding-top: 40px;
   text-align: left;
}

#dx-price .box-2 ul li {
   display: grid;
   grid-template-columns: 17px 105px 1fr;
   align-items: center;
   gap: 10px;
   align-items: center;
}

#dx-price .box-2 ul li strong {
   font-weight: 800;
}

@media screen and (max-width: 1200px) {
   #dx-price .box-1 {
      gap: 40px;
   }

   #dx-price .box-1 .col {
      padding: 85px 20px 50px;
   }
}

@media screen and (max-width: 1023px) {
   #dx-price .box-1 {
      grid-template-columns: 1fr;
      gap: 100px;
   }
}

@media screen and (max-width: 767px) {
   #dx-price {
      padding: 100px 0;
   }

   #dx-price h3 {
      margin-top: 80px;
   }

   #dx-price .box-1 {
      margin-top: 64px;
      gap: 48px;
   }

   #dx-price .box-1 .col {
      padding: 75px 30px 30px;
   }

   #dx-price .box-1 .txt {
      padding-top: 30px;
   }

   #dx-price .box-1 ul {
      padding-top: 20px;
   }

   #dx-price .box-1 .col:nth-child(1) ul {
      grid-template-columns: 1fr;
   }

   #dx-price .box-1 .col:nth-child(2) ul {
      font-size: 12px;
   }

   #dx-price .box-2 {
      margin-top: 64px;
      padding: 75px 30px 30px;
   }

   #dx-price .box-2 .txt {
      text-align: justify;
      padding-top: 30px;
   }

   #dx-price .box-2 ul {
      grid-template-columns: 1fr;
      padding-top: 20px;
   }

   #dx-price .box-2 ul li {
      grid-template-columns: 15px 100px 1fr;
      gap: 5px;
   }
}

@media screen and (max-width: 429px) {
   #dx-price .box-1 .col {
      padding: 75px 20px 30px;
   }

   #dx-price .box-2 {
      padding: 75px 20px 30px;
   }

   #dx-price .box-2 ul li {
      grid-template-columns: 15px 90px 1fr;
      font-size: 13px;
   }

   #dx-price .box-2 ul li strong {
      font-size: 14px;
   }
}

/* =============================================
* privacy policy
* ============================================= */
.privacy-policy {
   line-height: 25px;
}

/* =============================================
* システム活用支援
* ============================================= */
.page-id-365 #dx-lead .infiniteslide figure {
   width: 970px;
}

#deliverables {
   padding: 125px 0 205px;
   position: relative;
}

#deliverables:before {
   content: '';
   width: 100%;
   height: 75px;
   background-color: #F4F4F5;
   position: absolute;
   bottom: 0;
   left: 0;
}

#deliverables h2 .ttl-sub {
   padding-bottom: 25px;
}

#deliverables figure {
   padding-top: 80px;
}

#deliverables .button {
   padding-top: 70px;
}

#deliverables .button a {
   justify-content: center;
   gap: 30px;
   width: 343px;
   height: 84px;
   background-color: #2D5EE5;
   color: #fff;
   font-weight: 800;
   font-size: 20px;
   letter-spacing: 0.02em;
   border-radius: 50px;
}

#deliverables .button a img {
   max-width: 44px;
}

#deliverables .button a:after {
   background-image: url(../img/common/arrow-right-wh.png);
   border-color: #fff;
}

@media screen and (max-width: 767px) {
   #deliverables {
      padding: 80px 0 100px;
   }

   #deliverables:before {
      height: 20px;
   }

   #deliverables figure {
      padding-top: 30px;
   }

   #deliverables .button {
      padding-top: 30px;
   }

   #deliverables .button a {
      gap: 20px;
      width: 100%;
      height: 70px;
      font-size: 18px;
   }

   #deliverables .button a img {
      max-width: 32px;
   }
}

#howto {
   background-color: #F4F4F5;
   padding: 165px 0 175px;
}

#howto h2 .ttl-sub {
   padding-bottom: 25px;
}

#howto .desc {
   padding-top: 35px;
   padding-bottom: 100px;
}

#howto .box {
   display: grid;
   grid-template-columns: 1fr 448px;
   align-items: flex-end;
   gap: 44px;
   background-color: #fff;
   border-radius: 5px;
   padding: 40px;
}

#howto .box:not(:last-child) {
   margin-bottom: 35px;
}

#howto .box .ttl-sub {}

#howto .box h3 {
   max-width: max-content;
   border-bottom: 3px solid #E3E3E3;
   position: relative;
   padding: 2px 0 10px;
}

#howto .box h3:after {
   content: '';
   width: 70px;
   height: 3px;
   background-image: linear-gradient(135deg, #3071B9, #029DD0, #00A0D2, #1689C6, #3071B9, #0996CC, #004EA2);
   position: absolute;
   top: 100%;
   left: 0;
}

#howto .box .txt {
   padding-top: 20px;
}

#howto .box table {
   width: 100%;
   margin-top: 20px;
}

#howto .box table th,
#howto .box table td {
   font-size: 14px;
   line-height: 20px;
   padding-left: 10px;
}

#howto .box table th {
   color: #2463EB;
   font-weight: 700;
   text-align: left;
}

#howto .box table th.fnt-poppins {
   font-size: 16px;
   padding-left: 0;
}

#howto .box table th:nth-child(1) {
   width: 30px;
}

#howto .box table th:nth-child(2) {
   width: 154px;
}

#howto .box table td {
   color: #535353;
   font-weight: 500;
}

#howto .box table tr:not(:last-child) th,
#howto .box table tr:not(:last-child) td {
   border-bottom: 1px solid #E3E3E3;
   padding-top: 12px;
   padding-bottom: 12px;
}

#howto .box table tr:last-child th,
#howto .box table tr:last-child td {
   padding-top: 12px;
}

@media screen and (max-width: 1023px) {
   #howto .box {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   #howto {
      padding: 80px 0;
   }

   #howto h2 .ttl-sub {
      padding-bottom: 15px;
   }

   #howto .desc {
      padding-top: 20px;
      padding-bottom: 50px;
   }

   #howto .box {
      padding: 30px 20px;
   }

   #howto .box table tr {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }

   #howto .box table th,
   #howto .box table td {
      display: block;
      padding: 0;
   }

   #howto .box table th {}

   #howto .box table td {
      padding-left: 0;
   }

   #howto .box table tr:not(:last-child) th,
   #howto .box table tr:not(:last-child) td {
      padding-top: 0;
      padding-bottom: 0;
      border-bottom: 0;
   }

   #howto .box table tr:last-child th,
   #howto .box table tr:last-child td {
      padding-top: 0;
   }

   #howto .box table tr:not(:last-child) {
      border-bottom: 1px solid #E3E3E3;
      margin-bottom: 12px;
      padding-bottom: 12px;
   }
}

/* =============================================
* 資料請求
* ============================================= */
#mailform.download-form .col-l {
   width: 550px;
}

#mailform.download-form .col-l figure,
#mailform.download-form .col-l h3 {
   margin-top: 10px;
}

#mailform.download-form .col-l figure {
   margin-left: 0;
   padding-top: 0;
}

#mailform.download-form .col-l h3 {
   border-left: 3px solid #2463EB;
   padding-left: 12px;
}

#mailform.download-form .col-l ul {
   font-weight: 700;
   line-height: 24px;
   border-top: 1px solid #E3E3E3;
   padding-top: 20px;
}

#mailform.download-form .col-l ul li {
   background: url('../img/common/icon-checked.png') no-repeat top 3px left / 22px auto;
   padding-left: 45px;
}

#mailform.download-form .col-l ul li:not(:last-child) {
   padding-bottom: 16px;
}

#mailform.download-form .col-r h3 {
   padding-bottom: 30px;
}

#mailform.download-form .form-pp {
   font-size: 10px;
   line-height: 20px;
   letter-spacing: 0.015em;
   color: #8E8E8E;
}

#mailform.download-form .form-pp p:not(:last-child) {
   padding-bottom: 5px;
}

#mailform.download-form .form-pp .check {
   font-size: 12px;
   letter-spacing: 0.03em;
   color: #000;
}

#mailform.download-form .form-pp .wpcf7-checkbox {
   line-height: 20px;
}

#mailform.download-form .form-pp a {
   color: #2463EB;
   text-decoration: underline;
}

#mailform.download-form .form-pp a:hover {
   text-decoration: none;
}

@media screen and (max-width: 1023px) {
   #mailform.download-form .wrap {
      gap: 50px;
   }

   #mailform.download-form .col-l {
      width: 100%;
   }

   #mailform.download-form h2 {
      text-align: center;
   }

   #mailform.download-form .col-l figure {
      max-width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #mailform.download-form .h-20 {
      font-size: 20px;
   }

   #mailform.download-form .col-l figure {
      width: 100%;
   }

   #mailform.download-form .col-l ul li {
      padding-left: 35px;
   }
}