.site-header__nav-link.is-active{

    color:var(--color-primary);

    font-weight:400;

}

.service-intro-divider{

    border:none;
    border-top:1px solid #d8d8d8;

}

.service-brand{

    padding:80px 0 150px;

}

.service-brand__title{

    display:inline-block;

    padding:12px 20px;

    background:#333;

    color:#fff;

    border-radius:4px;

    font-size:26px;

    font-weight:700;

    margin-bottom:44px;

}


.service-brand__row{

    display:grid;

    grid-template-columns:180px 1fr;

    column-gap:80px;

    padding:30px 0;

}

.service-brand__left{

}

.service-brand__line{

    display:block;

    width:150px;

    height:1px;

    background:#222;

    margin-bottom:24px;

}

.service-brand__left h3{

    font-size:28px;

    font-weight:700;

    line-height:1.3;

}

.service-brand__right{

    border-top:1px solid #ddd;

    padding-top:18px;

}


.service-brand__right ul{

    margin:0;

    padding:0;

    list-style:none;

}


.service-brand__right li{

    min-height:40px;

    display:flex;

    align-items:center;

    border-bottom:1px solid #fff;

    font-size:20px;

    color:#666;


}


/* ==========================================
   Business Area
========================================== */

.about-intro__title{

    margin-bottom:32px;

}

.about-intro__text{

    margin-bottom:40px;

}


.service-intro{

    padding:100px 0 40px;

}

.service-intro__title{

    font-size:35px;
    font-weight:700;
    color:#222;

    margin-bottom:32px;

}

.service-intro__text{

    font-size:22px;
    line-height:1.7;
    color:#666;

    margin-bottom:40px;

}

/* ==========================================
   Creative Process
========================================== */

.service-process{

    padding:0px 0 40px;

}

.service-process__title{

    font-size:35px;
    font-weight:700;
    color:#222;

    margin-bottom:30px;

}

.service-process__text{

    font-size:22px;
    line-height:1.7;
    color:#666;

    margin-bottom:30px;

}

.service-process__divider{

    border:none;
    border-top:1px solid #d8d8d8;

}



/* ==========================================
   Creative Process Flow
========================================== */

.service-process-flow{

    padding:60px 0 150px;

}

.service-process-flow__list{

   display: flex;
    justify-content: center;

    align-items: flex-start;

    gap: 24px;

}

.service-process-flow__item{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.service-process-flow__icon{

    width:72px;

    height:72px;

    object-fit:contain;

    margin-bottom:24px;

}

.service-process-flow__box{

  width:140px;
    height:64px;

    border:1px solid #444;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-size:16px;

    font-weight:700;

    line-height:1.3;

}

.service-process-flow__arrow{

    
    flex-shrink: 0;

    font-size: 28px;

    color: #555;

    margin-top: 115px;

}



/* ==========================================
   Scroll Animation
========================================== */
/*
.service-intro,
.service-brand,
.service-process,
.service-process-flow {

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.service-intro.is-visible,
.service-brand.is-visible,
.service-process.is-visible,
.service-process-flow.is-visible {

    opacity: 1;

    transform: translateY(0);
}
*/
.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);
}