@charset "utf-8";
/* CSS Document */

/* ==============================
 content-title
============================== */
.content_title-wrap {
    min-height: 33.722vw;
}
.content_title-wrap .title-item h3 {
    font-size: min(6.111vw, 11rem);
    line-height: 0.98;
}
.content_title-wrap .title-item {
    width: 43%; /* 760px */
}
.content_title-wrap .title-item .lead {
    font-size: min(1.111vw,2rem);
    line-height: 2;
    margin-top: 3.6vw; /* 88px */
    width: 100%; /* 760px */
}
.content_title-wrap .title-img {
    width: 35%; /* 630px */
    top: 31.03px; /* 31.03px */
    right: 31.03px; /* 29.81px */
}

.content_title-wrap .title-img::after {
    width: 90.32%; /* 569px */
    height: 95%; /* 523px */
    top: -31.03px; /* 31.03px */
    right: -31.03px; /* 29.81px */
}


@media print, screen and (max-width: 768px) {
    .content_title-wrap {
        min-height: auto;
    }
    .content_title-wrap .title-item h3 {
        font-size: 13.333vw;
        margin-top: 2.533vw;
    }
    .content_title-wrap span {
        font-size: 3.2vw;
        font-weight: bold;
        color: #0053FF;
        margin-top: 2.533vw;
    }
    .content_title-wrap .title-item {
        width: 94.667vw;
    }
    .content_title-wrap .title-item .lead {
        font-size: 3.733vw;
        font-weight: 500;
        line-height: 2;
        margin-top: 5.067vw;
        width: 100%;
    }
    .content_title-wrap .title-img {
        width: 80.547vw;
        position: relative;
        top: 0;
        right: 0;
        margin-top: 13.467vw;
        margin-right: 3.045vw;
        margin-left: auto;
    }
    .content_title-wrap .title-img::after {
        width: 72.8vw;
        height: 66.933vw;
        top: -3.045vw;
        right: -3.045vw;
    }
}


/* ==============================
  UGC領域に戦略が必要な理由
============================== */
#reason {
    margin-top: 9.84%; /* 126px */
}

#reason .sec-content {
    width: 89.06%; /* 1140px */
    max-width: 1140px;
    margin: 0 auto;
}
#reason .column-wrap {
    display: flex;
    align-items: center;
    gap: 8.77%; /* 100px */
}
#reason .column-wrap .img-wrap {
    width: 34.375vw; /* 440px */
    max-width: 440px;
}
#reason .column-wrap .sec-title .title {
    font-size: min(3.125vw, 4rem);
    font-weight: bold;
}
#reason .column-wrap .text-wrap {
    margin-top: 2.34%; /* 30px */
}
#reason .column-wrap .text {
    font-size: min(1.406vw,1.8rem);
    font-weight: 500;
    line-height: 1.88;
}

#reason .column-wrap + .img-wrap {
    margin-top: 10%; /* 128px */
}
@media print, screen and (max-width: 768px) {
    #reason {
        margin-top: 34.267vw;
    }

    #reason .sec-content {
        width: 94.6vw;
        max-width: none;
    }
    #reason .column-wrap {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        gap: 6.667vw;
    }
    #reason .column-wrap .img-wrap {
        width: auto;
        max-width: auto;
    }
    #reason .column-wrap .sec-title .title {
        font-size: 7.467vw;
        line-height: 1.5;
    }
    #reason .column-wrap .text-wrap {
        margin-top: 6.667vw;
    }
    #reason .column-wrap .text {
        font-size: 3.467vw;
        font-weight: 400;
        line-height: 2;
    }

    #reason .column-wrap + .img-wrap {
        margin-top: 6.667vw;
    }
}
/* ==============================
  ページ共通
============================== */
.service-item .sec-content {
    width: 89.06%; /* 1140px */
    max-width: 1140px;
    margin: 0 auto;
    padding: 12.89% 0 0;
    /*padding: 165px 0 0;*/
}

.service-item .sec-title span {
    font-size: min(1.563vw,2rem);
    font-weight: bold;
    color: #0053FF;
}

.service-item .sec-title .title {
    font-size: min(3.438vw, 4.4rem);
    font-weight: bold;

    margin-top: 0.86%; /* 11px */
}

.service-item .sec-title .text {
    font-size: min(1.406vw, 1.8rem);
    line-height: 1.8;

    margin-top: 2.34%; /* 30px */
}
@media screen and (min-width: 1280px) {
    .service-item .sec-content {
        padding: 165px 0 0;
    }
}
@media print, screen and (max-width: 768px) {
    .service-item .sec-content {
        width: 94.667vw;
        max-width: none;
        padding: 20.933vw 0 0;
    }

    .service-item .sec-title span {
        font-size: 5.333vw;
    }

    .service-item .sec-title .title {
        font-size: 7.467vw;
        line-height: 1.55;

        margin-top: 4vw;
    }

    .service-item .sec-title .text {
        font-size: 3.467vw;
        line-height: 2;

        margin-top: 6.667vw;
    }

}
/* ==============================
  OUTLINE
============================== */
#outline .img-wrap {
    margin-top: 3.13%; /* 40px */
}

@media print, screen and (max-width: 768px) {
    #outline .img-wrap {
        margin-top: 6.667vw;
    }
}

/* ==============================
  SOLUTIONS
============================== */
#solutions .column-wrap {
    width: 97.54%; /* 1112px */
    max-width: 1112px;
    margin-top: 5.08%; /* 65px */
    margin-right: 0;
    margin-left: auto;

    display: flex;
    gap: 10.18%; /* 116px */
}

#solutions .column-wrap .img-wrap {
    width: 20.703vw; /* 265px */
    max-width: 265px;
}
#solutions .column-wrap .title-wrap span {
    font-size: min(1.875vw, 2.4rem);
    font-weight: bold;
    color: #0053FF;
}
#solutions .column-wrap .title-wrap .title {
    font-size: min(2.188vw, 2.8rem);
    font-weight: bold;
    margin-top: 20px;
}
#solutions .column-wrap .text {
    font-size: min(1.406vw, 1.8rem);
    line-height: 1.88;
    margin-top: 3.13%; /* 40px */
}

#solutions .ex-box {
    background: #EDEDED;
    padding: 3.56%; /* 26px */
    margin-top: 3.13%; /* 40px */
}
#solutions .ex-box span {
    font-size: min(1.25vw, 1.6rem);
    line-height: 1.75;
    color: #0053FF;
}
#solutions .ex-box .text {
    font-size: min(1.25vw, 1.6rem);
    line-height: 1.75;
    margin-top: 0;
}
#solutions .btn {
    width: 183.5px;
    margin-top: 3.13%; /* 40px */
}

#solutions .solution04 .column-item:last-child .flow-wrap {
    width: auto;
    margin-left: -4.11%; /* -30px */
    margin-top: 5.48%; /* 40px */
}

@media print, screen and (max-width: 768px) {
    #solutions .column-wrap {
        width: auto;
        max-width: none;
        margin-top: 18.667vw;
        margin-right: 0;
        margin-left: auto;

        display: block;
    }
    #solutions .column-wrap .img-wrap {
        width: 72vw;
        max-width: none;
        margin: 8.667vw auto 0;
    }
    #solutions .column-wrap .title-wrap span {
        font-size: 4vw;
    }
    #solutions .column-wrap .title-wrap .title {
        font-size: 6.533vw;
        margin-top: 4vw;
    }
    #solutions .column-wrap .text {
        font-size: 3.467vw;
        line-height: 2;
        margin-top: 6.533vw;
    }
    #solutions .ex-box {
        padding: 3.867vw 3.467vw 7.333vw;
        margin-top: 8vw;
    }
    #solutions .ex-box span {
        font-size: 3.733vw;
        font-weight: 500;
        line-height: 2;
    }
    #solutions .ex-box .text {
        font-size: 3.2vw;
        line-height: 1.375;
        margin-top: 1.333vw;
    }
    #solutions .btn {
        width: 40.4vw;
        margin-top: 6.667vw;
    }

    #solutions .solution04 .column-item:last-child .flow-wrap {
        width: auto;
        margin-left: 0;
        margin-top: 7.067vw;
    }
}


/* ==============================
  SERVICE
============================== */
#service .service-list {
    margin-top: 5.23%; /* 67px */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 19px;
    grid-row-gap: 20px;

    position: relative;
}

#service .service-list .service-box {
    border: 1px solid #0053FF;
    padding: 3.33% 4.07%; /* 9px 11px */
    display: flex;
    align-items: center;
    gap: 10%; /* 28px */
    background: #FFFFFF;
}
#service .service-list .icon-wrap {
    width: 4.844vw;
    height: 4.844vw;
}

#service .service-list .service-box .text {
    font-size: min(1.25vw, 1.6rem);
    font-weight: 600;
}
#service .service-list .text-more {
    font-size: min(1.25vw, 1.6rem);
    font-weight: 600;
    position: absolute;
    bottom: 1.406vw; /* 18px */
    right: 0;
}
@media screen and (min-width: 1280px) {
    #service .service-list .icon-wrap {
        width: 62px;
        height: 62px;
    }
}
@media print, screen and (max-width: 768px) {
    #service .service-list {
        margin-top: 6.619vw;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 3.185vw;
        grid-row-gap: 3.333vw;
    }
    #service .service-list .service-box {
        padding: 1.507vw 1.841vw;
        gap: 3.353vw;
        background: #FFFFFF;
    }
    #service .service-list .service-box .icon-wrap {
        width: 10.373vw;
        height: 10.373vw;
    }
    #service .service-list .service-box .text {
        font-size: 3.2vw;
    }
    #service .service-list .text-more {
        font-size: 3.2vw;
        font-weight: 600;
        position: absolute;
        bottom: -10vw;
        left: 0;
        right: 0;
        text-align: center;
    }
}


/* ==============================
  特徴バナー
============================== */
#about {
    margin: 12.89% auto 0; /* 165px auto 0 */
    width: 88.91%; /* 1138px */
    max-width: 1138px;
}
#about a {
    text-decoration: none;

    background-color: #000000;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    transition: all 0.2s;
}
#about a:hover {
    opacity: .7;
}
#about .img-wrap {
    width: 35.15%; /* 400px */
}
#about .title-wrap {
    color: #FFFFFF;
    margin-left: 7.64%; /* 87px */
}
#about .title-wrap span {
    font-size: min(1.563vw, 2rem);
}
#about .title-wrap .title {
    font-size: min(2.813vw, 3.6rem);
    font-weight: bold;
    margin-top: 1.016vw; /* 13px */
}

@media print, screen and (max-width: 768px) {
    #about {
        margin: 33.68vw auto 0;
        width: 86.667vw;
        max-width: none;
    }
    #about a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #about .img-wrap {
        width: auto;
    }
    #about .title-wrap {
        margin-top: 5.867vw;
        margin-left: 4.8vw;
        margin-bottom: 1.867vw;
    }
    #about .title-wrap span {
        font-size: 2.667vw;
    }
    #about .title-wrap .title {
        font-size: 4.8vw;
        margin-top: 0;
    }
}