
.dot {
    opacity:0.6;
    position:absolute;
}
.dot01{left:60px;top:180px;opacity:0.8;}
.dot02{right:3.125%;top:190px;opacity:0.8;}
.dot03{right:calc(31.979% - 100px);bottom:220px;opacity:0.8;}
.dot04{right:18.75%;bottom:50px;opacity:0.8;}
.dot05{left:15.1041%;bottom:0;opacity:0.8;}

.dot06{right:50px;top:50px;}
.dot07 {right:10.416%;top:520px;}
.dot08{left:10.9375%;top:570px;}
.dot09{left:calc(10.9375% - 100px);top:620px;}
.dot10{left:36.979%;bottom:50px;}
.dot11{right:60px;bottom:0;}

.dot12{right:31.25%;top:140px;}
.dot13{right:60px;top:200px;}
.dot14{left:110px;bottom:240px;}

.dot15{left:0;top:0;}
.dot16{left:36.45%;top:560px;}
.dot17{right:60px;bottom:240px;}

.dot18{right:10.416%;top:220px;}
.dot19{left:0;top:270px;}
.dot20{left:calc(var(--innergap) + var(--outergap) - 100px);top:320px;}
.dot21{left:34.375%;bottom:100px;}
.dot22{left:0;bottom:50px;}

.dot23{left:0;top:500px;}
.dot24{right:0;top:200px;}
.dot25{right:0;bottom:30px;}

#intro {
    padding-bottom:190px;
}
#intro .img_box{
    margin-top:80px;
    width:min(81.25%,1024px);
    margin-left:auto;
    margin-right:auto;
}

.service_introduction_cont {
      margin-top: 80px;
}
.service_introduction_cont .inner { 
    width: min(81.25%, 1024px);
    margin-left: auto;
    margin-right: auto;
}
.service_introduction_cont .inner p {
    line-height: 2.25;
}
.service_introduction_cont .inner p + p{
    margin-top:1em;
}
@media (max-width:1024px) {
.dot01{left:0;top:75px;}
.dot02{right:10px;top:150px;}
.dot03{right:210px;bottom:220px;}
.dot04{right:110px;bottom:50px;}
.dot05{left:110px;bottom:0;}
.dot06 {right: 60px;top: 30px;}
.dot08 {top: 70px;}
}
@media (max-width:768px)  {
    #intro .img_box {
        width: 100%;
        overflow: auto;
    }
    #intro .img_box img {
        max-width: none;
        width:100%;
        min-width:480px;
    }
}
@media (max-width:499px) {

}


.service_box {
    border-radius: 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding:5.2vw 8.3% 6.25vw;
    gap:4vw;
    position:relative;
}
.service_box:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    mix-blend-mode: hard-light;
}

.header_service_box {
    display: flex;
    justify-content: space-between;
    position:relative;
}
.header_service_box .tit_service_box h4 .num{
    display: block;
    font-size:4em;
    line-height: 1.2;
}
.header_service_box .tit_service_box  h4 .en{
    font-size:3em;
}
.header_service_box .tit_service_box h5 {
    font-weight:500;
    font-size:1.25em;
}
.header_service_box figure {
    width:min(11.2%,150px);

}
.main_service_box {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap:20px;
    position:relative;
}
.main_service_box .txt_box {
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.main_service_box .img_box {
    grid-column: 7 / 11;   
}
.main_service_box .img_box figure {
    border-radius: 48px;
    overflow: hidden;
    background-color: white;
}

@media (min-width:1025px) {
   .main_service_box .txt_box .btn_more02 {
        min-width:250px;
    } 
}

#Wellness,#AI,#marketing,#creative{
    padding-bottom:80px;
}
#Wellness .service_box:before{
    background: #6BA505;
}
#AI .service_box:before{
    background: #f4718b;
}
#marketing .service_box:before{
    background:#57b9e7
}
#creative .service_box:before{
    background:rgba(177, 95, 234, 0.5);
}

#Wellness h4 {
    color:#87C022;
}
#AI h4 {
    color:#E34498;
}
#marketing h4 {
    color:#2CA6E0;
}
#creative h4 {
    color:#B15FEA;
}

@media (max-width:1024px) {

}
@media (max-width:768px)  {
    .service_box {
        border-radius: 24px;
        padding: var(--size40) 7.25% var(--size50);
        gap: var(--size30);
    }
    .header_service_box {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-flow: column-reverse; 
    }
    .header_service_box figure {
        width: min(60%, 150px);
    }
    .tit_service_box * {
        text-align: center;
    }
    .main_service_box {
        display: flex;
        gap: 20px;
        flex-flow: column-reverse;
        align-items: center;
    }
    .main_service_box .btn_more02 {
        margin-left:auto;
        margin-right:auto;
    }
    
}