#our_service .service_body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gutter-8x, 64px) var(--gutter-5x, 40px);
	background: var(--Mono-smoke, #F4F3F1);
	width: 1100px;
    margin: 0 auto 40px;
    gap: 0 32px;
	flex-direction: row-reverse;
}

#our_service .service_body.last {
    margin-bottom: var(--gutter-9x, 72px);
}

#our_service .service_left {
	flex-shrink: 1;
    width: 60%;
}

#our_service .service_right {
	width: 40%;
    display: block;
    text-align: right;
}

#our_service .service_intro {
    margin-bottom: 30px;
}

#our_service .service_intro .tag {
    display: inline-block;
    border: 1px solid #333;
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 15px;
}

#our_service .service_intro .ttl_box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#our_service .service_intro .num {
    font-size: 55px;
    font-weight: bold;
    line-height: 1em;
}

#our_service .service_intro .name {
    font-size: 24px;
    font-weight: bold;
    margin: 0.3em 0;
}

#our_service .service_intro .en {
    font-size: 12px;
    color: #999;
    padding-left: 0.5em;
    letter-spacing: 0.1em;
}

#our_service .totalCreative .service_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
#our_service .totalCreative .service_list li {
    width: calc(50% - 20px);
}

#our_service .service_list li {
    border-bottom: 1px solid #ddd;
}

#our_service .service_list li:first-child,
#our_service .totalCreative .service_list li:nth-child(2) {
    border-top: 1px solid #ddd;
}

#our_service .service_list li a {
    display: flex;
    align-items: center;
    padding: 20px 30px 20px 15px;
    text-decoration: none;
    color: #333;
    position: relative;
}

#our_service .service_list li a::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../common/img/arrow_red.svg') no-repeat center center;
    background-size: contain;
    position: absolute;
    right: 10px;
}

#our_service .service_list li a:hover::after {
    background: url('../../common/img/arrow_white.svg') no-repeat center center;
    background-size: contain;
}

#our_service .service_list li a .num {
    font-size: 16px;
    margin-right: 20px;
}

#our_service .service_list li a .text {
    font-size: 14px;
}

#our_service .service_right .img_box img {
    width: 100%;
}

#our_service .service_right .text_box h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

#our_service .service_right .text_box p {
    font-size: 16px;
    line-height: 1.8;
}

@media screen and (max-width: 1200px) {
    #our_service .service_head{
        width: 100%;
        padding: 30px 5%;
        box-sizing: border-box;
    }
    #our_service .service_body {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #our_service{
        background: none;
    }

    #our_service .bg_text_service{
        display: none;
    }

    #our_service .service_head{
        display: block;
        padding: 5.33% 5%;
        box-sizing: border-box;
        border-bottom: 1px solid #919191;
    }

    #our_service .service_head p.en{
        font-size: 2.4vw;
    }

    #our_service .service_head h2.jp_title{
        font-size: 5.07vw;
    }

    #our_service .our_service_wrapper .side-scroll {
        width: 100%;
        height: auto;
        align-items: flex-start;
    }

    #our_service .our_service_wrapper .side-scroll .scroll_inner{
        padding: 0;
        background: none;
    }

    #our_service .our_service_wrapper .side-scroll.side-scroll-02 .scroll_inner,
    #our_service .our_service_wrapper .side-scroll.side-scroll-03 .scroll_inner{
        padding-top: 0;
    }

    #our_service .service_body {
        padding-left: 0;
        flex-direction: column-reverse;
        gap: 32px 0;
    }

    #our_service .service_left{
        width: 100%;
    }

    #our_service .service_body{
        width: calc(100% - 4rem);
        padding: 10% 5.33% 5.33%;
        gap:0;
    }

    #our_service .service_body .service_left .service_img{
        width: 100%;
        height: auto;
        padding: 0 5%;
        box-sizing: border-box;
    }
    #our_service .service_body .service_left .service_img img{
        width: 100%;
        height: auto;
    }

    #our_service .service_intro {
        box-sizing: border-box;
    }

    #our_service .service_intro .ttl_box{
        padding: 5.33% 0;
    }

    #our_service .service_intro .tag{
        margin-bottom: 0;
    }

    #our_service .service_intro .ttl_box .num{
        font-size: 10.67vw;
    }

    #our_service .service_intro .ttl_box .ttl .name{
        font-size: 4.67vw;
    }

    #our_service .service_intro .ttl_box .ttl .en{
        font-size: 2.4vw;
    }

    #our_service .service_list{
        padding: 0;
        box-sizing: border-box;
    }

    #our_service .totalCreative .service_list li {
        width: 100%;
    }

    #our_service .totalCreative .service_list li:nth-child(2) {
        border-top: none;
    }
    #our_service .service_list li a {
        padding: 0.8em 1em;
    }

    #our_service .service_list li a .num{
        font-size: 4vw;
    }

    #our_service .service_list li a .text{
        font-size: 4vw;
    }
    
    #our_service .service_list li a::after {
        width: 4vw;
        height: 4vw;
        right: 1em;
    }
    #our_service .service_right {
        width: 100%;
    }

}

/*  ========================
    *********  benner  *********
=============================================  */
.banner_area {
    text-align: center;
}
.banner_area .flex {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0 var(--gutter-2x, 16px);
    align-self: stretch;
    flex-wrap: nowrap;
    margin: var(--gutter-7x, 56px) auto;
}
@media screen and (min-width: 1100px) { 
    .banner_area .flex {
        width: 1100px;
    }
}
@media screen and (max-width: 1100px) { 
    .banner_area .flex {
        padding: 0 2rem;
    }
}
@media screen and (max-width: 768px) { 
    .banner_area .flex {
        width: 100%;
        flex-direction: column;
        gap: var(--gutter-2x, 16px) 0;
        padding: 0 4rem;
    }
    .banner_area .flex div {
	    width: 100%;
		display: block;
		position: relative;
    }
    .banner_area .flex div img {
        width: 100%;
        height: auto;
        display: block;
    }
}