body {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
    &.individual  {
        /* .mainimage {
            h1 {
                color: #6C0B80;
                text-shadow: none;
                font-size: clamp(0px, 2.7vw, 42px);
                top: auto;
                bottom: 26%;
                font-weight: bold;
            }
            &::after {
                content: url(/ir/individual/img/idx_img05_pink2.png)!important;
            }
        } */
        .mainimage {
            background: #FBE6EF;
            h1 {
                color: #6C0B80;
                text-shadow: none;
                /* font-size: clamp(0px, 2.7vw, 42px); */
                font-size: 40px;
                top: auto;
                bottom: 22%;
                font-weight: bold;
                line-height: 1.3;
            }
            img {
                margin: 0 auto;
                background: #FBE6EF;
                max-width: 950px;
            }
            p {
                background: #893c9c;
                padding: 0 0 2px;
                
            }
            &::after {
                /* content: url(/ir/individual/img/idx_img05_pink2.png)!important;
                bottom: -26.5px!important; */
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                border-top: 20px solid #893c9c;
                border-right: 40px solid transparent;
                border-left: 40px solid transparent;
            }
        }
    }
    #main {
        background-image: url(../img/data_back_purple.jpg);
        .secsns {
            margin-bottom: 34px;
        }
        .contentIn {
            padding-top: 2.5%;
            section {
                float: left;
                width: 44%;
                position: relative;
                
            }
            .num-item {
                .ellipce{
                    background-repeat: no-repeat;
                    background-size: 100%;
                    height: 470px;
                    padding-right: 3%;
                    .txts-sub {
                        font-weight: bold;
                        margin: 0 auto;
                        display: block;
                        text-align: center;
                        padding-top: 24%;
                        font-size: 190%;
                        position: relative;
                        &::before {
                            content: "";
                            position: absolute;
                            background-image: url(../img/data_balloon01.png);
                            background-repeat: no-repeat;
                            background-size: 100%;
                            width: 22%;
                            height: 39%;
                            left: 3%;
                            top: 59%;
                        }
                    }

                    .txts-main {
                         font-size: 80px;
                         display: block;
                        font-family: 'Noto Sans Javanese', sans-serif;
                        font-weight: bold;
                        line-height: 1;
                        text-align: center;
                        position: relative;
                        margin: 0 auto;
                        margin-right: 14%;
                        color: #E7336E;
                        font-size: 500%;
                        margin-top: 8%;
                        letter-spacing: 0;
                        .txts-min {
                            display: inline-block;
                            line-height: 1;
                            position: absolute;
                            white-space: nowrap;
                            color: #4d4d4d;
                            bottom: 11%;
                            font-size: 40%;
                            bottom: 26%;
                        }
                    }

                    .txts-small {
                        width: auto;
                        text-align: right;
                        float: right;
                        font-size: 113%;
                        margin-top: -3%;
                        margin-right: 19%;
                    }
                    &.purple  {
                        background-image: url(../img/ellipse_purple.png);
                    }
                    &.orange  {
                        background-image: url(../img/ellipse_orange.png);
                    }
                    &.small {
                        background-size: 93%;
                        margin-left: 6%;
                    }
                }

                .dotbox {
                    position: absolute;
                    top: 70%;
                    background: white;
                    border-width: 3px;
                    border-style: dashed !important;
                    border-radius: 70px !important;
                    border-color: #822E87;
                    width: 95%;
                    &.add {
                        &::before {
                            content: "";
                            background-image: url("../img/num_dot.png");
                            position: absolute;
                            top: -5%;
                            width: 2.5%;
                            height: 5%;
                            background-size: 100%;
                            left: 48%;
                            background-repeat: no-repeat;
                        }
                    }
                    .dotbox_item {
                        pointer-events: none;
                        width: 88%;
                        margin: 0 auto;
                        margin-top: 11%;
                        margin-bottom: 6%;
                        img {
                            margin-bottom: 4%;
                        }
                    }
                }
                &.type_b {
                    float: right;
                    margin-top: 14%;
                    .ellipce {
                        .txts-sub {
                            &::before {
                                background-image: url(../img/data_balloon02.png);
                                background-size: 100%;
                                width: 80%;
                                height: 103%;
                                left: -2%;
                                top: -43%;
                            }
                        }
                        .txts-main {
                            color: #802077;
                            .txts-min {
                            }
                        }
                    }
                    .dotbox {
                        top: 65%;
                    }
                }
                &.type_c { 
                    margin-top: 41%;
                    .ellipce {
                        height: 406px;
                        .txts-sub {
                            padding-top: 16%;
                            &::before {
                                background-image: url(../img/num_prise_logo.png);
                                background-size: 100%;
                                width: 36%;
                                height: 255%;
                                left: -13%;
                                top: -6%;
                            }
                            &.img_none {
                                &::before {
                                    position: absolute;
                                    opacity: 0;
                                    pointer-events: none;
                                }
                            }
                        }
                        .num_e {
                            width: 44%;
                            display: block;
                            margin: 0 auto;
                            pointer-events: none;
                        }
                        .num_f {
                            margin-left: 17.5%;
                            padding-top: 28%;
                            width: 56%;
                            pointer-events: none;
                        }
                        .num_g {
                            width: 84%;
                            margin-left: 3%;
                            margin-top: 8%;
                        }
                        .txts-small {
                            font-size: 80%;
                            text-align: left;
                            margin-top: 7%;
                        }
                    }
                }
                &.type_d {
                    float: right;
                    margin-top: 40%;
                    .ellipce {
                        .txts-sub {
                            &::before {
                                background-image: url(../img/data_balloon02.png);
                                background-size: 100%;
                                width: 80%;
                                height: 103%;
                                left: -2%;
                                top: -43%;
                            }
                        }
                        .txts-main {
                            color: #802077;
                            font-size: 440%;
                        }
                        .txts-small {
                            font-size: 80%;
                            &.center {
                                text-align: left;
                                width: 61%;
                                margin-top: 1%;
                            }
                        }
                    }
                    .dotbox {
                        top: 80%;
                        .dotbox_item {
                            width: 60%;
                            .num_h {
                                margin-bottom: 26%;
                            }
                            .num_i {
                                margin-bottom: 10%;
                            }
                        }
                        &::before {
                            top: -8%;
                            height: 7%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1000px) and (min-width:769px) {
    body {
        &.individual  {
            .mainimage {
                h1 {
                    font-size: 4vw;
                    /* bottom: 9vw; */
                }
            }
        }
        #main {
            .contentIn {
                #topic03, #topic04 {
                    .txts-small {
                        font-size: 1.4vw;
                    }
                }
                #topic03 {
                    .txts-sub {
                        &::before {
                            width: 33%; 
                            left: -3%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
body {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    &.individual  {
        .mainimage {
            h1 {
                font-size: 6vw;
                bottom: 11vw;
            }
            &::after {
            }
        }
    }
    #main {
        .secsns {
            margin-bottom: 0;
            .contentIn {
                /* display: flex; */
                margin: 0 auto !important;
                width: 100%;
                margin-left: 7.2vw; */
            }
        }
        .contentIn {
            margin-left: 12.3vw;
            width: 79%;
            padding-top: 8vw;
            padding-bottom: 6vw;
            section {
                width: 100%;
                height: 155vw;
                margin-bottom: 21vw !important;
            }
            #topic02 {
                .dotbox {
                    top: 55vw !important;
                }
            }
            #topic03_ex {
                height: 84vw !important;
                margin-top: 10vw;
            }
            #topic04 {
                margin-top: 21vw;
                height: 124vw!important;
                margin-bottom: 8vw !important;
                .ellipce {
                    background-size: 104%;
                    margin-left: -3vw;
                }
                .dotbox {
                    top: 70vw !important;
                    &::before {
                        top: -8%;
                        width: 2.5%;
                        height: 7%;
                    }
                }
            }
            .num-item {
                .ellipce{
                    height: 90vw;
                    padding-right: 5vw;
                    .txts-sub {
                        letter-spacing: -0.05rem;
                        padding-top: 15vw!important;
                        font-size: 6vw;
                    }
                    .txts-main {
                        letter-spacing: -0.05rem;
                        font-size: 16vw!important;
                        margin-right: 10vw;
                        margin-top: 6vw;
                        .txts-min {
                            font-size: 6vw;
                            bottom: 4vw;
                        }
                    }
                    .txts-small {
                        font-size: 3vw !important;
                        margin-top: -2.7vw !important;
                        margin-right: 7vw !important;
                        &.center {
                            font-size: 2.2vw !important;
                            margin-top: 1vw !important;
                            margin-right: 12vw !important;
                        }
                    }
                }
                .dotbox {
                    border-radius: 12vw !important;
                    top: 58vw!important;
                }
                &.type_b {
                    margin-top: 0vw;
                    height: 129vw!important;
                    margin-bottom: 26vw !important;
                    .txts-sub {
                        &::before {
                            height: 26vw;
                        }
                    }
                }
                &.type_c {
                    margin-top: 0vw;
                    margin-bottom: 0vw !important;
                    height: 67vw!important;
                    .ellipce {
                        height: 72vw;
                        .num_f {
                            width: 62%;
                            padding-top: 21vw!important;
                        }
                        .num_g {
                            margin-left: 6vw!important;
                            margin-top: 6vw;
                        }
                        &.small {
                            background-size: 100%;
                            margin-left: 1%;
                        }
                        .txts-small {
                            font-size: 2vw !important;
                            margin-top: 3.3vw !important;
                            margin-right: 15vw !important;
                        }
                        .dotbox {
                            top: 55vw !important;
                        }
                    }
                 
                }
                &.type_b {
                    
                }
            }
        }
    }
}
 
}