/*************************************************************

トップMVエリア
#mv-top

*************************************************************/
#mv-top .title-area {
    padding: 120px 0;
    position: relative;
    text-align: center;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    #mv-top .title-area {
        padding: 80px 20px;
    }
}

#mv-top .title-area .diagonal-line {
    width: 120%;
    height: 1px;
    background: var(--balisys-black);
    display: block;
    position: absolute;
    top: 58%;
    left: -10%;
    transform: translate(0%, 0) rotate(-12deg) scaleX(0);
    transition: transform 0.6s;
}

@media screen and (max-width: 767px) {
    #mv-top .title-area .diagonal-line {
        top: 43%;
    }
}

#mv-top .title-area.is-active .diagonal-line {
    transform: translate(0%, 0) rotate(-12deg) scaleX(1);
}

#mv-top .title-area .text-svg {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 1.5s ease,
        transform 1s ease;
    transition-delay: 0.4s;
}

@media screen and (max-width: 767px) {
    #mv-top .title-area .text-svg {
        transform: translateY(0px);
    }
}

#mv-top .title-area.is-active .text-svg {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 767px) {
    #mv-top .title-area.is-active .text-svg {
        transform: translateY(-15px);
    }
}

#mv-top .text-svg img {
}

@media screen and (max-width: 767px) {
    #mv-top .text-svg img {
        width: 100%;
        max-width: 600px;
    }
}

#mv-top .title-area h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 50%;
    position: absolute;
    left: 50%;
    top: 60%;
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    transition-delay: 0.8s;
}

@media screen and (max-width: 767px) {
    #mv-top h1 {
        width: 100%;
        font-size: 17px;
        position: relative;
        left: 50%;
        top: 0;
        transform: translate(-50%, 20px);
    }
}

#mv-top .title-area.is-active h1 {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 767px) {
    #mv-top .title-area.is-active h1 {
        transform: translate(-50%, 0);
    }
}

#mv-top .message {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

@media screen and (max-width: 767px) {
    #mv-top .message {
        padding: 0 20px;
        display: block;
    }
}

#mv-top .message .pic {
    flex: 1;
}

@media screen and (max-width: 767px) {
    #mv-top .message .pic {
        margin-bottom: 20px;
    }
}

#mv-top .message .pic img {
    border-radius: 10px;
}

#mv-top .message .text {
    flex: 1;
}

#mv-top .message .text h2 {
    font-size: 22px;
    margin-bottom: 15px;
}

/*************************************************************

トップ サービス
#service-top

*************************************************************/
/*-----
イントロエリア
-----*/
#service-top .intro {
    max-width: 570px;
    margin: 0 auto 80px;
}

#service-top .intro h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

#service-top .intro p {
    text-align: center;
    margin-bottom: 50px;
}

#service-top .intro .pic {
    text-align: center;
}

/*-----
サービスリスト
-----*/
#service-top .service-list {
    margin-bottom: 25px;
}

#service-top .service-list ul {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

#service-top .service-list ul > li {
    flex: 0 1 calc(100% / 3 - 48px);
}

@media screen and (max-width: 767px) {
    #service-top .service-list ul > li {
        flex: 0 1 100%;
    }
}

#service-top .service-list .pic {
    background: #eeeef3;
    position: relative;
    padding: 15px 130px 130px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    #service-top .service-list .pic {
        padding: 15px 15px 130px 15px;
    }
}

#service-top .service-list .pic h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

#service-top .service-list .pic img {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/*************************************************************

トップ サポートエリア
#support-areas-top

*************************************************************/

#support-areas-top .one-step-solution {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution {
        flex-wrap: wrap;
    }
}

/*-----
.solution-list
-----*/
#support-areas-top .one-step-solution .solution-list {
    max-width: 500px;
    padding-bottom: 100px;
    flex: 0 1 auto;
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution .solution-list {
        flex: 0 1 100%;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
    }
}

#support-areas-top .one-step-solution .solution-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#support-areas-top .one-step-solution .solution-list ul > li {
    flex: 0 1 calc(100% / 2);
    margin-bottom: 3px;
    clip-path: polygon(25% 0%, 75% 0%, 102% 57%, 76% 102%, 24% 102%, -2% 57%);
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution .solution-list ul > li:nth-child(odd) {
        transform: translate(20px, 0);
    }
}

@media screen and (max-width: 400px) {
    #support-areas-top .one-step-solution .solution-list ul > li:nth-child(odd) {
        transform: translate(10px, 0);
    }
}

#support-areas-top .one-step-solution .solution-list ul > li:nth-child(even) {
    transform: translate(-50px, 50%);
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution .solution-list ul > li:nth-child(even) {
        transform: translate(-20px, 50%);
    }
}

@media screen and (max-width: 400px) {
    #support-areas-top .one-step-solution .solution-list ul > li:nth-child(even) {
        transform: translate(-10px, 50%);
    }
}

/*-----
.solution-description
-----*/
#support-areas-top .one-step-solution .solution-description {
    max-width: 450px;
    flex: 0 1 auto;
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution .solution-description {
        flex: 0 1 100%;
    }
}

#support-areas-top .one-step-solution .solution-description h3 {
    font-size: clamp(65px, 11vw, 75px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    #support-areas-top .one-step-solution .solution-description h3 {
        font-size: clamp(55px, 11vw, 75px);
        letter-spacing: 6%;
    }
}

/*************************************************************

トップ ワークスエリア
#works-top

*************************************************************/
#works-top {
}

/*----------------------------
実績数+タグエリア
----------------------------*/
#works-top .works-data {
    max-width: 970px;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    #works-top .works-data {
        margin-bottom: 40px;
    }
}

/*-----
実績数
-----*/
#works-top .works-data .data-list {
    flex: 0 1 380px;
}

@media screen and (max-width: 767px) {
    #works-top .works-data .data-list {
        flex: 0 1 100%;
    }
}

#works-top .works-data .data-list dl > div {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    border-bottom: solid 1px #8d8d8d;
    padding: 15px 10px;
}

#works-top .works-data .data-list dl > div dt {
    flex: 0 1 160px;
}

@media screen and (max-width: 767px) {
    #works-top .works-data .data-list dl > div dt {
        flex: 0 1 150px;
    }
}

#works-top .works-data .data-list dl > div dd {
    flex: 0 1 calc(100% - 160px);
    font-size: clamp(35px, 10vw, 60px);
    font-weight: 700;
    color: #5fbcf6;
}

@media screen and (max-width: 767px) {
    #works-top .works-data .data-list dl > div dd {
        flex: 0 1 calc(100% - 150px);
    }
}

#works-top .works-data .data-list dl > div dd span {
    font-size: 35px;
}

@media screen and (max-width: 767px) {
    #works-top .works-data .data-list dl > div dd span {
        font-size: clamp(15px, 5vw, 35px);
    }
}

/*-----
タグエリア
-----*/

#works-top .works-data .tag-list {
    flex: 0 1 calc(100% - 405px);
    background: #f9f9fb;
    padding: 25px 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    #works-top .works-data .tag-list {
        flex: 0 1 100%;
        padding: 10px;
    }
}

#works-top .works-data .tag-list ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

#works-top .works-data .tag-list ul > li {
    flex: 0 1 auto;
    padding: 2px 0;
}

/*-----
業界ごとに異なる商流や・・・
-----*/

#works-top .text {
    text-align: center;
    margin-bottom: 30px;
}

#works-top .text p {
    text-align: center;
}

@media screen and (max-width: 400px) {
    #works-top .text p {
        text-align: justify;
    }

    #works-top .text p br {
        display: none;
    }
}

/*----------------------------
swiper設定
----------------------------*/

#works-top .works-slide {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
}

#works-top .swiper-slide-top {
    width: 100%;
    overflow: visible;
}

#works-top .swiper-slide-top .swiper-bt-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
    padding: 0 20px;
}

#works-top .swiper-slide-top .swiper-prev,
#works-top .swiper-slide-top .swiper-next {
    width: 63px;
    height: 12px;
    cursor: pointer;
    transition: 0.3s;
}

#works-top .swiper-slide-top .swiper-prev {
    background: url(../img/top2/swiper-prev.svg) no-repeat center;
}
#works-top .swiper-slide-top .swiper-next {
    background: url(../img/top2/swiper-next.svg) no-repeat center;
}

#works-top .swiper-slide-top .swiper-prev:hover,
#works-top .swiper-slide-top .swiper-next:hover {
    opacity: 0.5;
}

/*************************************************************

トップ アバウトエリア
#about-top

*************************************************************/
#about-top .inner {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 40px;
}

#about-top .inner .text {
    flex: 0 1 calc(100% / 2 - 25px);
}

@media screen and (max-width: 767px) {
    #about-top .inner .text {
        flex: 0 1 100%;
    }
}

#about-top .inner .text h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

#about-top .inner .text p {
    margin-bottom: 1em;
}

#about-top .inner .text p strong {
    font-weight: 700;
}

#about-top .inner .pic {
    padding-top: 40px;
    flex: 0 1 calc(100% / 2 - 25px);
}

@media screen and (max-width: 767px) {
    #about-top .inner .pic {
        flex: 0 1 100%;
        padding-top: 0;
    }
}

/*************************************************************

トップ ブログエリア
#blog-top

*************************************************************/
#blog-top {
}

#blog-top .title-area .text-svg {
    transform: translate(0, 10px);
}

/*----------------------------
swiper設定
----------------------------*/

#blog-top .blog-slide {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
}

#blog-top .swiper-slide-top {
    width: 100%;
    overflow: visible;
}

#blog-top .swiper-slide-top .swiper-bt-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
    padding: 0 20px;
}

#blog-top .swiper-slide-top .swiper-prev,
#blog-top .swiper-slide-top .swiper-next {
    width: 63px;
    height: 12px;
    cursor: pointer;
    transition: 0.3s;
}

#blog-top .swiper-slide-top .swiper-prev {
    background: url(../img/top2/swiper-prev.svg) no-repeat center;
}
#blog-top .swiper-slide-top .swiper-next {
    background: url(../img/top2/swiper-next.svg) no-repeat center;
}

#blog-top .swiper-slide-top .swiper-prev:hover,
#blog-top .swiper-slide-top .swiper-next:hover {
    opacity: 0.5;
}

/*-----
ブログ記事リスト
-----*/
#blog-top .blog-slide {
    padding-bottom: 15px;
}

#blog-top .blog-slide .blog-list {
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#blog-top .blog-slide .blog-list .blog-tmb {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 213px;
}

#blog-top .blog-slide .blog-list .blog-tmb img {
    max-height: 213px;
}

#blog-top .blog-slide .blog-list .blog-info {
    padding: 15px;
}

/* 投稿者　+　日付 */
#blog-top .blog-slide .blog-list .blog-info .posted-and-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    #blog-top .blog-slide .blog-list .blog-info .posted-and-date {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

#blog-top .blog-slide .blog-list .blog-info .posted-and-date .posted {
    flex: 0 1 auto;
}

@media screen and (max-width: 767px) {
    #blog-top .blog-slide .blog-list .blog-info .posted-and-date .posted {
        flex: 0 1 100%;
        order: 1;
    }
}

#blog-top .blog-slide .blog-list .blog-info .posted-and-date .posted ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

#blog-top .blog-slide .blog-list .blog-info .posted-and-date .posted ul .tmb {
    flex: 0 1 40px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
}

#blog-top .blog-slide .blog-list .blog-info .posted-and-date .date {
    flex: 0 1 auto;
}

@media screen and (max-width: 767px) {
    #blog-top .blog-slide .blog-list .blog-info .posted-and-date .date {
        flex: 0 1 100%;
        margin-bottom: 10px;
    }
}

/* ブログ記事タイトル */
#blog-top .blog-slide .blog-list .blog-info p {
    font-weight: 700;
}

/*************************************************************

トップ NEWSエリア
#news-top

*************************************************************/
#news-top {
    margin-bottom: 260px;
}

#news-top .title-area .text-svg {
    transform: translate(0, -7px);
}

#news-top .inner {
    position: relative;
    z-index: 1;
    margin-bottom: 45px;
}

#news-top .news-list {
    border-top: solid 1px #969696;
}

#news-top .news-list ul {
    list-style: none;
}

#news-top .news-list > li {
    border-bottom: solid 1px #969696;
    /* 以下はニュースにリンク先がついた場合は削除してください。 */
    padding: 25px 50px;
}

/* ニュースにリンク先がついたらアクティブにしてください。
#news-top .news-list > li a {
    padding: 25px 50px;
    display: block;
}

@media screen and (max-width: 400px) {
    #news-top .news-list > li a {
        padding: 20px 10px;
        display: block;
    }
}
*/

#news-top .news-list .date-and-category ul {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

#news-top .news-list .date-and-category ul .category {
    color: #5fbcf6;
    font-weight: 500;
}

/*************************************************************

トップ リクルートエリア
#recruit-top

*************************************************************/
#recruit-top {
    background: url(../img/top2/recruit-bg.jpg) no-repeat center;
    background-size: cover;
    padding-bottom: 50px;
}

#recruit-top .title-area {
    margin-bottom: 10px;
}

#recruit-top .title-area .diagonal-line {
    background: #fff;
}

#recruit-top .title-area .text-svg {
    transform: translate(0, -5px);
}

#recruit-top .title-area h2 {
    color: #fff;
}

#recruit-top .message {
    margin-bottom: 120px;
}

#recruit-top .message p {
    font-size: clamp(16px, 4.5vw, 20px);
    color: #fff;
    font-weight: 500;
    text-align: center;
}

#recruit-top .more-bt a {
    background: #fff;
    color: var(--balisys-black);
}

/*************************************************************

トップ コンタクトエリア
#contact-top

*************************************************************/
#contact-top {
    margin-bottom: 170px;
}

@media screen and (max-width: 767px) {
    #contact-top {
    }
}

#contact-top .inner {
}

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

#contact-top .mail-and-phone {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: auto;
    padding: 55px 85px 75px;
    border-radius: 10px;
    background: #f9f9fb;
}

@media screen and (max-width: 767px) {
    #contact-top .mail-and-phone {
        padding: 55px 20px;
    }
}

#contact-top .inner ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
}

#contact-top .inner ul > li {
    flex: 0 1 calc(100% / 2 - 25px);
}

@media screen and (max-width: 767px) {
    #contact-top .inner ul > li {
        flex: 0 1 100%;
    }
}

#contact-top ul > li p {
    text-align: center;
    font-weight: 700;
}

/*-----
メールボタン
-----*/
#contact-top ul > li.mail .bt a {
    background: #2bcf9b;
    color: #fff;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    padding: 5px 20px;
    border-radius: 50px;
    border: solid 2px #2bcf9b;
    font-weight: 500;
    font-size: clamp(15px, 4vw, 20px);
    text-decoration: none;
}

#contact-top ul > li.mail .bt a img {
    vertical-align: middle;
}

/*-----
電話ボタン
-----*/
#contact-top ul > li.phone .bt a {
    background: #fff;
    color: #2bcf9b;
    border: solid 2px #2bcf9b;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 500;
    font-size: clamp(15px, 4vw, 20px);
    text-decoration: none;
}

#contact-top ul > li.phone .bt a img {
    vertical-align: middle;
}

#contact-top ul > li.phone p.time {
    font-weight: 300;
}