@charset "utf-8";

/* Asset */
    .section1,
    .service-list-wrap,
    .service-icon-wrap ul {
      width: 83.3vw;
      margin: 0 auto !important;
    }

    .service-list {
      width: 83.3vw;
      margin: auto;
    }

    section h3 {
      margin: 0;
    }

    /* Section1 */
    .service-list-wrap {
      padding-top: 0;
    }

    .container_840 {
      max-width: 58.3vw;
      margin: auto;
    }

    .section1 h3,
    .airdam-h2 {
      font-size: 2.5vw !important;
      font-weight: bold;
      color: #0071B3;
      margin-bottom: 2.2vw;
      text-align: center;
    }

    .section1 p {
      text-align: center;
      text-shadow: none;
    }

    .section1 .caption {
      font-size: 1.1vw;
      text-align: center;
      color: #8D8D8D;
    }

    /* Section2 */
    .service-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2.2vw;
      margin-bottom: 3.9vw !important;
    }

    .reverse {
      flex-direction: row-reverse;
    }

    .service-box h3 {
      font-size: 2.2vw;
      color: #0071B3;
      font-weight: bold;
    }

    .service-box .Audiowide {
      color: #0071B3;
      font-size: 1.1vw;
      margin-bottom: 1.1vw;
    }

    .service-box img {
      width: 40.6vw;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
    }

    .service-box p:nth-of-type(2) {
      margin-bottom: 1.1vw;
    }

    .service-box:last-child {
      margin-bottom: 0;
    }

    /* Section3 */
    video {
      width: 100%;
      max-width: 840px;
      margin: auto;
      display: block;
    }

    /* Workflow */
    .steps-list {
      position: relative;
    }

    .steps-list::before {
      content: "";
      width: 3px;
      height: 80%;
      position: absolute;
      top: 45px;
      left: 30px;
      background-color: #0071B3;
      z-index: -1;
    }

    .steps-list li {
      padding-bottom: 48px;
      display: flex;
    }

    .steps-list li:last-child {
      padding-bottom: 0;
    }

    .steps-list li h3 {
      color: #0071B3;
      font-weight: bold;
      font-size: 1.7vw;
      margin-bottom: 5px;
    }

    .step-number {
      position: relative;
      color: #0071B3;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 20px;
      margin-right: 2.4vw;
    }

    .step-number span {
      display: block;
      font-size: 36px;
      font-family: Audiowide, sans-serif;
      font-style: normal;
      font-weight: 400;
    }

    .step-number::before {
      content: "";
      width: 94px;
      height: 94px;
      background-color: #fff;
      display: block;
      border-radius: 100px;
      border: 2px solid #0071B3;
      position: absolute;
      z-index: -1;
    }

    .service-list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 2.2vw 0;
    }

    .service-list li {
      flex-basis: 25%;
      text-align: center;
    }

    .service-list li img {
      display: block;
      width: 15.6vw !important;
      margin: 0 auto 1.1vw !important;
    }

    .service-list li span {
      font-size: 24px;
      line-height: 1.2;
      font-weight: bold;
      margin-top: 16px;
      transition: .5s;
    }

    .service-list li a:hover {
      opacity: .8;
      color: #0071B3;
    }

    .btn {
      width: 400px;
    }

    .tb_only {
      display: none;
    }

    .sp_only2 {
      display: none;
    }

    /* Slide */
    .slide-wrap {
      padding-bottom: 0;
    }

    .slick-slider {
      width: 100%;
      height: 100%;
    }

    .slick-slide {
      border: 1px solid #0071B3;
      background: #fff;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slide-box {
      width: 73.6vw;
      padding: 4.4vw 6.9vw;
      margin: 0 4vw;
    }

    .slide-box img {
      width: 58.3vw;
    }

    .slide-box h3 {
      font-size: 1.7vw;
      color: #0071B3;
      font-weight: bold;
      margin: 24px auto;
      text-align: center;
    }

    .air-dam .slide-box h3 {
      margin: 0 auto 3.2vw;
    }

    .slick-dots li button:before {
      color: #0071B3;
    }

    .slick-dots li.slick-active button:before {
      opacity: .75;
      color: #0071B3;
    }

    .slick-prev,
    .slick-next {
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }

    .slick-prev {
      left: 8.5vw;
    }

    .slick-next {
      right: 8.5vw;
    }

    .slick-prev:before,
    .slick-next:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 40px;
      color: #0071B3;
    }

    .slick-prev:before {
      content: "\f0a8";
    }

    .slick-next:before {
      content: "\f0a9";
    }

    /* Promotion/WEB */
    .promotion-img {
      width: 58.3vw;
      margin: auto;
      display: block;
    }

    .web-wrap {
      width: 83.3vw;
      margin: 0 auto 4.8vw;
      display: flex;
      gap: 2.2vw;
    }

    .web-wrap div {
      flex-basis: 25%;
    }

    .web-wrap h3 {
      font-size: 1.5vw;
      text-align: center;
      color: #0071B3;
      font-weight: bold;
      margin-bottom: 1.1vw;
    }

    .web-wrap img {
      margin-bottom: 1.1vw;
    }

    .web-list-wrap h3 {
      background-color: #0071B3;
      color: #fff;
      font-size: 1.7vw;
      text-align: center;
      padding: 16px 0;
      margin-bottom: 0;
    }

    .web-list-wrap div {
      background-color: #fff;
      padding: 34px;
      display: flex;
      justify-content: space-evenly;
      font-size: 1.4vw;
      box-shadow: 0 10px 10px -5px rgba(0, 0, 0, .2);
    }

    .web-list-wrap li {
      margin-bottom: 0.7vw;
      font-weight: bold;
    }

    .web-list-wrap li::before {
      content: "\f14a";
      font-family: "Font Awesome 6 Free";
      color: #0071B3;
      margin-right: 8px;
      font-weight: normal;
    }

    .web.steps-list::before {
      height: 90%;
    }

    /* CRM */
    .crm-img {
      width: 83.3vw;
      display: block;
      margin: 0 auto 32px;
    }

    .crm-txt {
      text-align: center;
    }

    .crm.steps-list::before {
      height: 90%;
    }

    /* Analytics */
    .analytics-wrap h3 {
      margin-bottom: 1.1vw;
    }

    p.analytics-bold-p {
      font-size: 1.7vw;
      font-weight: bold;
      line-height: 1.6;
    }

    .not-flex {
      display: block;
    }

    .not-flex img {
      width: 100%;
      margin-bottom: 32px;
    }

    .not-flex .analytics-bold-p,
    .not-flex h3 {
      text-align: center;
    }

    .analytics .steps-list::before {
      top: 60px;
      height: 85%;
    }

    /*Event*/
    .event-list {
      width: 83.3vw;
      margin-bottom: 4.4vw;
    }

    .event-list h3 {
      margin-bottom: 24px;
    }

    .event-list img {
      box-shadow: none;
    }

    .event-list p {
      text-align: center;
    }

    /*Air-dam*/
    .air-dam .section1 {
      padding-bottom: 0;
    }

    .airdam-logo {
      display: block;
      width: 18.6vw;
      margin: auto;
    }

    .airdam-img {
      width: 100%;
      margin: 32px auto;
    }

    .airdam-movie {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin-top: 64px !important;
    }

    .air-dam .slick-container {
      padding-top: 2.4vw;
    }

    .air-dam a.btn {
      margin: 10px auto 0 !important;
    }

    .slide-flex {
      display: flex;
      align-items: center;
    }

    .air-dam .slide-box img {
      width: 100%;
    }

    .slide-flex picture {
      flex-basis: 30%;
    }

    .slide-flex p {
      flex-basis: 70%;
      padding: 0 3.8vw;
    }

    .air-dam .slide-wrap {
      padding-bottom: 4.4vw;
    }

    /*------------tablet size--------------*/
    @media screen and (max-width: 960px) {
      .tb_only {
        display: block;
      }

      .sp_only2 {
        display: none;
      }

      .background_wrap .btn {
        margin: 0 auto !important;
      }

      .section1 {
        padding-top: 56px;
      }

      section {
        margin: 0 auto;
        padding: 56px 16px;
      }

      .section1,
      .section2 {
        width: 100%;
      }

      .container_840 {
        max-width: 100%;
      }

      .section1 h3,
      .airdam-h2 {
        font-size: 24px !important;
      }

      .service-box,
      .reverse {
        width: 100%;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 48px;
      }

      .service-box img {
        width: 585px;
      }

      .service-box h3 {
        font-size: 32px;
        text-align: center;
      }

      .service-box .Audiowide {
        font-size: 16px;
        text-align: center;
      }

      .service-box p {
        text-align: left;
        padding: 0 16px;
      }

      .background_wrap .btn {
        margin: auto;
        height: 64px;
        font-size: 24px;
      }

      /* Section3 */
      video {
        max-width: 630px;
      }

      /* Workflow */
      .step-number {
        font-size: 14px;
        margin-left: 10px;
      }

      .step-number span {
        font-size: 24px;
        margin-top: -4px;
      }

      .step-number::before {
        width: 64px;
        height: 64px;
      }

      .steps-list li h3 {
        font-size: 20px;
      }

      .steps-list::before {
        height: 80%;
        left: 30px;
        top: 10%;
      }

      /* Service icon */
      .service-icon-wrap ul {
        width: 100%;
      }

      .service-list {
        gap: 24px 0;
        width: 100%;
      }

      .service-list li {
        flex-basis: 33.3%;
      }

      .service-list li img {
        width: 190px !important;
      }

      .service-list li span {
        font-size: 18px;
      }

      /* Slide */
      .slide-box {
        width: 640px;
        padding: 48px 40px;
      }

      .slide-box img {
        width: 100%;
      }

      .slick-prev {
        left: 0;
      }

      .slick-next {
        right: 0;
      }

      .promotion-img {
        width: 100%;
      }

      .slide-box h3 {
        font-size: 24px;
      }

      .air-dam .slide-box h3 {
        margin: 24px auto;
      }

      /* Web */
      .web-wrap {
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .web-wrap div {
        flex-basis: 48%;
      }

      .web-wrap h3 {
        font-size: 21px;
        margin-bottom: 16px;
      }

      .web-list-wrap {
        margin: 0 16px;
      }

      .web-list-wrap h3 {
        font-size: 24px;
      }

      .web-list-wrap li {
        font-size: 20px;
      }

      .web.steps-list::before {
        height: 80%;
      }

      /* CRM */
      .crm.steps-list::before {
        height: 80%;
      }

      .section1 .caption {
        font-size: 16px;
      }

      /* Analytics */
      .analytics-wrap h3 {
        margin-bottom: 24px;
      }

      p.analytics-bold-p {
        font-size: 24px;
        text-align: center;
      }

      .analytics-wrap img {
        margin: 0 auto 24px;
        width: 426px;
      }

      .not-flex img {
        width: 100%;
        padding: 0 16px;
        box-shadow: none;
      }

      /*Event*/
      .event-list {
        width: 96%;
        margin: 0 auto 56px;
      }

      .event-list img {
        padding: 0;
        margin-bottom: 24px;
      }

      .event-list p {
        text-align: center;
      }

      /*Air-dam*/
      .airdam-logo {
        width: 268px;
      }

      .airdam-img {
        width: 531px;
        display: block;
      }

      .airdam-movie {
        margin: 48px 16px 0 !important;
        width: 96%;
      }

      .air-dam .slide-box {
        padding: 16px 24px 32px;
      }

      .slide-flex p {
        padding: 0 1vw;
        line-height: 1.8;
      }

      .slide-flex picture {
        flex-basis: 50%;
        margin: 16px;
      }
    }

    /*------------SP size--------------*/
    @media screen and (max-width: 640px) {
      .tb_only {
        display: none;
      }

      .sp_only2 {
        display: block;
      }

      section {
        padding: 32px 16px;
      }

      .section1 {
        padding-top: 32px;
      }

      .service-box img {
        width: 100%;
      }

      .section1 h3,
      .airdam-h2 {
        font-size: 16px !important;
      }

      p.section1-txt {
        text-align: left;
      }

      .background_wrap .btn {
        font-size: 20px;
        height: 60px;
        width: 91.2vw;
      }

      .service-box,
      .reverse {
        gap: 20px;
        margin-bottom: 32px;
      }

      .service-box h3 {
        font-size: 20px;
      }

      .service-box .Audiowide {
        font-size: 14px;
        margin-bottom: 16px;
      }

      .service-box p:nth-of-type(2) {
        padding: 0;
        margin-bottom: 16px;
      }

      /* Workflow */
      .steps-list::before {
        height: 70%;
        left: 11px;
        top: 1%;
      }

      .steps-list li {
        padding-bottom: 16px;
        align-items: flex-start;
      }

      .steps-list li h3 {
        font-size: 16px;
      }

      .step-number::before {
        width: 36px;
        height: 36px;
      }

      .step-number {
        font-size: 8px;
        margin: 8px 16px 0 0;
      }

      .step-number span {
        font-size: 14px;
      }

      /* Service icon */
      .service-list li {
        flex-basis: 50%;
      }

      .service-list li img {
        width: 145px !important;
      }

      /* Slide */
      .slide-box {
        width: 90vw;
        height: 500px;
        padding: 32px 16px;
      }

      .slide-box img {
        width: 100%;
      }

      .slide-box h3 {
        font-size: 16px;
        margin: 16px 0;
      }

      .slick-prev,
      .slick-next {
        top: inherit;
        bottom: -40px;
      }

      .slick-prev {
        left: 80px;
      }

      .slick-next {
        right: 80px;
      }

      .slick-prev:before,
      .slick-next:before {
        font-size: 24px;
      }

      .slick-dots {
        bottom: -30px;
      }

      .slick-dots li {
        margin: 0;
      }

      /* Promotion */
      .promotion-img {
        width: 100%;
      }

      .promotion.steps-list::before {
        height: 80%;
      }

      /* Web */
      .web-wrap {
        width: 100%;
        display: block;
        margin-bottom: 32px;
      }

      .web-wrap>div {
        margin-bottom: 24px;
      }

      .web-list-wrap {
        margin: 0;
      }

      .web-wrap h3,
      .web-list-wrap h3 {
        font-size: 18px;
        margin-bottom: 8px;
      }

      .web-list-wrap {
        margin: 0;
      }

      .web-list-wrap li {
        font-size: 16px;
        margin-bottom: 8px;
        margin-left: 24px;
      }

      .web-list-wrap div {
        flex-direction: column;
      }

      .web.steps-list::before {
        height: 90%;
      }

      /* CRM */
      .crm.steps-list::before {
        height: 86%;
      }

      .section1 .caption {
        font-size: 14px;
        text-align: left;
      }

      p.crm-txt {
        font-size: 12px;
        text-align: left;
      }

      /* Analytics */
      .analytics-wrap h3 {
        margin-bottom: 16px;
      }

      p.analytics-bold-p {
        font-size: 14px;
      }

      .service-box img {
        padding: 0;
      }

      .analytics.steps-list::before {
        height: 83%;
      }

      /*Event*/
      .event-h2 {
        font-size: 8.2vw;
      }

      .event-list {
        width: 100%;
        margin-bottom: 32px;
      }

      .event-list h3 {
        font-size: 18px;
        margin-bottom: 16px;
      }

      .event-list img {
        margin-bottom: 26px;
      }

      .event-list p {
        padding: 0;
        text-align: left;
      }

      /*Air-dam*/
      .airdam-logo {
        width: 240px;
      }

      .airdam-img {
        width: 100%;
        margin: 16px 0;
      }

      .airdam-movie {
        margin: 32px 0 0 !important;
        width: 100%;
      }

      .air-dam .slide-flex {
        flex-direction: column;
      }

      .air-dam .slide-box {
        padding: 14px;
        height: 530px;
      }

      .air-dam .slide-box img {
        width: 70%;
        margin: auto;
      }

      .air-dam .slide-box .sp-bigimg {
        width: 80%;
      }

      .air-dam .slick-dotted.slick-slider {
        margin-bottom: 50px;
      }

      .air-dam a.btn {
        margin: 10px auto 20px !important;
      }
    }


    /* ---- reset ---- */
    body {
      margin: 0;
      font: normal 75% Arial, Helvetica, sans-serif;
    }

    canvas {
      display: block;
      vertical-align: bottom;
    }

    /* Reset box-model */
    /* ============================================ */

    .background_wrap * {
      box-sizing: border-box;
    }

    .background_wrap ::before,
    .background_wrap ::after {
      box-sizing: inherit;
    }

    /* Document */
    /* ============================================ */

    /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

    .background_wrap html {
      line-height: 1.15;
      /* 1 */
      -webkit-text-size-adjust: 100%;
      /* 2 */
      -webkit-tap-highlight-color: transparent;
      /* 3*/
    }

    /* Sections */
    /* ============================================ */

    /**
 * Remove the margin in all browsers.
 */

    .background_wrap body {
      margin: 0;
    }

    /**
 * Render the `main` element consistently in IE.
 */

    .background_wrap main {
      display: block;
    }

    /* Vertical rhythm */
    /* ============================================ */

    .background_wrap p,
    .background_wrap table,
    .background_wrap blockquote,
    .background_wrap address,
    .background_wrap pre,
    .background_wrap iframe,
    .background_wrap form,
    .background_wrap figure,
    .background_wrap dl {
      margin: 0;
    }


    /* Lists (enumeration)
/* ============================================ */

    .background_wrap ul,
    .background_wrap ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* Lists (definition) */
    /* ============================================ */

    .background_wrap dt {
      font-weight: bold;
    }

    .background_wrap dd {
      margin-left: 0;
    }


    /* Text-level semantics */
    /* ============================================ */

    /**
 * Remove the gray background on active links in IE 10.
 */

    .background_wrap a {
      background-color: transparent;
      text-decoration: none;
      color: inherit;
    }


    /* Embedded content */
    /* ============================================ */

    /**
 * Remove the border on images inside links in IE 10.
 */

    .background_wrap img {
      border-style: none;
      vertical-align: bottom;
    }

    .background_wrap embed,
    .background_wrap object,
    .background_wrap iframe {
      border: 0;
      vertical-align: bottom;
    }



    /* ---- particles.js container ---- */

    .content-bread_wrap,
    .content-title_wrap {
      position: relative;
      z-index: 111;
    }

    .background_wrap {
      position: relative;
      height: fit-content;
      left: 0;
      width: 100%;
      z-index: 1;
    }

    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
      background-image: url();
      background-repeat: repeat;
      background-size: contain;
      background-position: 50% 50%;
      z-index: -1;
      top: 0;
    }

    /*-------asset-------*/
    .pc_only {
      display: block;
    }

    .sp_only {
      display: none;
    }

    #main-content {
      padding-bottom: 0;
    }

    .background_wrap p {
      color: #222;
      font-size: 1.1vw;
      font-weight: normal;
      line-height: 2;
    }

    .align_center {
      text-align: center;
    }

    .align_right {
      text-align: right;
    }

    .background_wrap .Audiowide {
      font-family: Audiowide, sans-serif;
      font-style: normal;
      font-weight: 400;
    }

    section {
      margin: 0 auto;
      padding: 4.4vw 0;
    }

    .section4 {
      background: none;
    }

    .section5 {
      height: auto;
    }

    .bg_white {
      background-color: #fff;
    }

    section h2 {
      color: #0071b3;
      font-size: 3.3vw;
      margin: 0;
      text-align: center;
      text-orientation: ;
    }

    p.h2_ja {
      color: #0071b3;
      font-size: 1.1vw;
      margin: 0 0 3.3vw 0;
      text-align: center;
      font-family: Noto Sans JP, sans-serif;
      font-weight: 700;
    }

    .section3 {
      height: auto !important;
    }

    /*btn*/
    .background_wrap .btn {
      align-items: center;
      background: #0071b3;
      border: 2px solid #fff;
      color: #fff;
      display: flex;
      justify-content: center;
      margin: 0;
      font-size: 1.7vw;
      font-weight: 800;
      height: 4.5vw;
      width: 33.5vw;
      transition: .5s;
    }

    .background_wrap .btn i {
      margin-left: 1vw;
    }

    .background_wrap .btn:hover {
      background: #fff;
      border: 2px solid #0071b3;
      color: #0071b3;
    }

    /*------------tablet size--------------*/
    @media screen and (max-width: 960px) {

      /*-------asset-------*/
      .pc_only {
        display: none;
      }

      .sp_only {
        display: block;
      }

      .background_wrap p {
        font-size: 16px;
      }

      section {
        margin: 0 auto;
        padding: 48px 16px;
      }

      section h2 {
        font-size: 40px;
      }

      p.h2_ja {
        font-size: 16px;
        margin: 0 0 48px 0;
      }

      /*btn*/
      .background_wrap .btn {
        font-size: 20px;
        height: 45px;
        width: 480px;
      }

    }

    /*------------sp size--------------*/
    @media screen and (max-width: 640px) {

      /*-------asset-------*/
      .pc_only {
        display: none;
      }

      .sp_only {
        display: block;
      }

      .background_wrap p {
        font-size: 14px;
        line-height: 1.6;
      }

      section {
        margin: 0 auto;
        padding: 32px 16px;
      }

      section h2 {
        font-size: 32px;
      }

      p.h2_ja {
        font-size: 14px;
        margin: 0 0 24px 0;
      }

      /*btn*/
      .background_wrap .btn {
        font-size: 20px;
        height: 60px;
        width: 91.2vw;
      }
    }


    .background_wrap.air-dam {
      padding-top: 4.4vw;

    }

    /* Slide */


      .air-dam .slick-dots li button:before {
      color: #0071B3;
    }

    .air-dam .slick-dots li.slick-active button:before {
      opacity: .75;
      color: #0071B3;
    }

    .air-dam .slick-prev,
    .air-dam .slick-next {
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }

    .air-dam .slick-prev {
      left: 8.5vw;
    }

    .air-dam .slick-next {
      right: 8.5vw;
    }

    .air-dam .slick-prev:before,
    .air-dam .slick-next:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 40px;
      color: #0071B3;
    }

    .air-dam .slick-prev:before {
      content: "\f0a8";
    }

    .air-dam .slick-next:before {
      content: "\f0a9";
    }



    /*------------tablet size--------------*/
    @media screen and (max-width: 960px) {



      /* Slide */
  

      .air-dam .slick-prev {
        left: 0;
      }

      .air-dam .slick-next {
        right: 0;
      }

    }

    /*------------SP size--------------*/
    @media screen and (max-width: 640px) {


      /* Slide */
  

      .air-dam .slick-prev,
      .air-dam .slick-next {
        top: inherit;
        bottom: -40px;
      }

      .air-dam .slick-prev {
        left: 80px;
      }

      .air-dam .slick-next {
        right: 80px;
      }

      .air-dam .slick-prev:before,
      .air-dam .slick-next:before {
        font-size: 24px;
      }

      .air-dam .slick-dots {
        bottom: -30px;
      }

      .air-dam .slick-dots li {
        margin: 0;
      }



    }