body {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
    &.individual  {
        .mainimage {
            background: #FBE6EF;
            h1 {
                color: #6C0B80;
                text-shadow: none;
                /* font-size: clamp(0px, 2.7vw, 42px); */
                font-size: 40px;
                top: auto;
                bottom: 26%;
                font-weight: bold;
            }
            img {
                margin: 0 auto;
                background: #FBE6EF;
                max-width: 950px;
            }
            p {
                background: #893c9c;
                padding: 0 0 2px;
                
            }
            &::after {
                /* content: url(/ir/individual/img/idx_img05_pink.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 {
        section {
            h2 {
                background-image: url("../img/indv_h2_a.png");
                background-repeat: no-repeat;
                background-size: 100%;
                height: 165px; 
                padding-top: 3.8%; 
                padding-left: 9%;
                margin: 0 auto;
                width: 60%;
                color: black;
                margin-bottom: 1%;
                font-size: clamp(1vw, 2.6vw, 160%);
                &.type_b {
                    background-image: url("../img/indv_h2_b.png");
                }
                &.type_c {
                    background-image: url("../img/indv_h2_c.png");
                    height: 157px!important;
                    margin-bottom: 2.2% !important;
                }
            }
            &.pink {
                padding-top: 3%;
                padding-bottom: 5%;
                margin-bottom: 0;
                /* background-color: #FBE6EF!important; */
                background-image: linear-gradient(#fbe6ef, #fdf5f9);
                .link-btns {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 5%;
                    max-width: 750px;
                    margin: 0 auto;
                    li {
                        width: 30%;
                        text-align: center;
                        a {
                            display: inline-block;
                            text-decoration: none;
                            img {

                            }
                        }
                    }
                }
            }
            &.gray {
                padding-top: 3%;
                padding-bottom: 2%;
                margin-bottom: 0;
                .qa {
                    .qa_list {
                        /* border-top: solid 2px #a2a2a2; */
                        /* padding-top: 4%; */
                        margin-bottom: 1.5%;
                        .details {
                            &:last-of-type {
                            }
                        }
                        .details-summary {
                            position: relative;
                            display: block;
                            padding: 3%;
                            color: #282828;
                            font-size: 150%;
                            font-weight: bold;
                            text-align: center;
                            background-color: #DDA3D7;
                            border-radius: 100px;
                            text-align: left;
                            padding-left: 13%;
                            margin-bottom: 3%;
                            &:hover {
                                cursor: pointer;
                                /* opacity: 0.8; */
                            }
                            .q_icon {
                                position: absolute;
                                width: 6.5%;
                                left: 2.6%;
                                top: 16%;
                            }
                            .btn {
                                position: absolute;
                                left: auto;
                                right: 3%;
                                top: 26%;
                                width: 4%;
                                height: 4%;
                                transform-origin: center center;
                                transition-duration: 0.2s;

                                &:before,
                                &:after {
                                    content: "";
                                    background-color: black;
                                    border-radius: 10px;
                                    width: 40px;
                                    height: 4px;
                                    position: absolute;
                                    top: 17px;
                                    left: 0;
                                    transform-origin: center center;
                                    transition: all 0.2s ease-out;
                                }
                                &:before {
                                    width: 4px;
                                    height: 40px;
                                    top: 0;
                                    left: 18px;
                                }
                                &:after {
                                    opacity: 1;
                                }
                            }
                            &.is-active {
                                .btn {
                                    &:before {
                                        opacity: 0;
                                        transform-origin: center;
                                        transform: rotate(180deg);
                                    }
                                    &:after {
                                        transform-origin: center;
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }

                        .details-summary::-webkit-details-marker {
                            display: none;
                        }

                        .details-content {
                            display: flow-root;
                            border-top: solid 2px #a2a2a2;
                            padding-top: 1.8%;
                            overflow-anchor: none;
                            .ttl_box {
                                display: inline-block;
                                width: 100%;
                                .a_icon {
                                    width: 9%;
                                    display: inline-block;
                                    padding-left: 2.4%;
                                    float: left;
                                }
                                .a_txt {
                                    display: inline-block;
                                    margin-left: 3%;
                                    color: #802077;
                                    font-weight: bold;
                                    font-size: 130%;
                                    width: 80%;
                                    line-height: 1.6;
                                    margin-top: 1.4%;
                                    float: left;
                                }
                            }
                            .item_box {
                                float: left;
                                margin-left: 12%;
                                width: 81%;
                                margin-top: 2%;
                                .item_main_txt {
                                    .large {
                                        font-weight: bold;
                                    }
                                }
                                img {
                                    margin-bottom: 4%;
                                }
                                .item_btn_list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 5%;
                                    li {
                                        width: 30%;
                                        text-align: center;
                                        /* padding: 2.1% 2%;
                                        border-radius: 50px;
                                        background: #FFD800; */
                                        position: relative;
                                        &::after {
                                            content:"";
                                            position: absolute;
                                        }
                                        a {
                                            display: inline-block;
                                            text-decoration: none;
                                            .item_btn_txt {
                                                font-size: 140%;
                                                font-weight: bold;
                                                color: #282828;
                                                line-height: 1;
                                            }
                                            .arrow {
                                                position: absolute;
                                                display: inline-block;
                                                width: 40.2px;
                                                height: 42.5px;
                                                height: auto;
                                                top: 49%;
                                                right: 7%;
                                            }
                                            .arrow::before,
                                            .arrow::after {
                                            content: "";
                                            position: absolute;
                                            top: calc(50% - 1px);
                                            right: 0;
                                            width: 22px;
                                            height: 2px;
                                            border-radius: 9999px;
                                            background-color: #000000;
                                            transform-origin: calc(100% - 1px) 50%;
                                            }
                                            .arrow::before {
                                                transform: rotate(28deg);
                                            }

                                            .arrow::after {
                                                transform: rotate(-28deg);
                                            }
                                        }
                                    }
                                }
                            }
                            .inner-list {
                                .inner-list-item {
                                    display: inline-block;
                                    margin-bottom: 2%;
                                    width: 100%;
                                    border-bottom: solid 2px #a2a2a2;
                                    .inner-list-ttl {
                                        width: 100%;
                                        margin-bottom: 2%;
                                        position: relative;
                                        .btn {
                                            position: absolute;
                                            left: auto;
                                            right: 2.3%;
                                            top: 24%;
                                            width: 4%;
                                            height: 4%;
                                            transform-origin: center center;
                                            transition-duration: 0.2s;
                                            &:before,
                                            &:after {
                                                content: "";
                                                background-color: black;
                                                border-radius: 10px;
                                                width: 32px;
                                                height: 4px;
                                                position: absolute;
                                                top: 14px;
                                                left: 0;
                                                transform-origin: center center;
                                                transition: all 0.2s ease-out;
                                            }
                                            &:before {
                                                width: 4px;
                                                height: 32px;
                                                top: 0;
                                                left: 14px;
                                            }
                                            &:after {
                                                opacity: 1;
                                            }
                                        }
                                        &.is-active {
                                            .btn {
                                                &:before {
                                                    opacity: 0;
                                                    transform-origin: center;
                                                    transform: rotate(180deg);
                                                }
                                                &:after {
                                                    transform-origin: center;
                                                    transform: rotate(180deg);
                                                }
                                            }
                                        }
                                    }
                                    .q_icon_p {
                                        width: 9%;
                                        padding-left: 2.5%;
                                    }
                                    span {
                                        display: inline-block;
                                        margin-bottom: 2%;
                                        margin-left: 4.5%;
                                        font-size: 120%;
                                        font-weight: bold;
                                    }
                                    .inner-list-content {
                                        overflow-anchor: none;
                                        .a_icon {
                                            width: 9%;
                                            padding-left: 2.5%;
                                            float: left;
                                        }
                                        p {
                                            float: left;
                                            margin-left: 4.5%;
                                            width: 77%;
                                        }
                                        .item_btn_list {
                                            float: right;
                                            width: 88%;
                                            display: flex;
                                            flex-wrap: wrap;
                                            gap: 5%;
                                            padding-bottom: 4%;
                                            li {
                                                width: 30%;
                                                text-align: center;
                                                display: inline-block;
                                                a {
                                                    img {

                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &:first-child {
                            border-top: none;
                            padding-top: 0;
                        }
                        &:last-child {
                            margin-bottom: 2%;
                        }
                    }
                }
            }
            &.rainbow {
                background-image: url("../img/indv_back_rainbow.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                padding-top: 4%;
                h2 {
                    margin-bottom: 4%;
                    padding-left: 8%;
                }
                .more-link-btns {
                     display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 36px;
                    li {
                        flex: 0 0 calc((100% - 36px) / 2);
                    }
                }
                .illust {
                    margin: 0 auto;
                    width: 72%;
                    margin-top: 2%;
                    padding-bottom: 6%;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
body {
    .pc {
        display: none;
    }
    .sp {
        display: inline-block;
    }
    &.individual  {
        .mainimage {
            padding-top: 62px;
            h1 {
                font-size: 6vw;
                bottom: 14vw;
            }
            &::after {
                /* bottom: -24px!important; */
            }
        }
    }
    #main {
        .secsns {
            margin-top: 0vw;
            margin-bottom: 0;
            padding: 10vw 0;
            .contentIn {
            }
        }
        section {
            h2 {
                height: 25vw;
                width: 100%;
                font-size: 4.2vw;
                margin-left: 0;
                padding-left: 14vw;
                text-align: left;
                padding-top: 5.5vw;
                &.type_b {
                }
                &.type_c {
                    height: 26.2vw !important;
                }
            }
            &.pink {
                padding-top: 10vw;
                padding-bottom: 11vw;
                .link-btns {
                    display: block;
                    li {
                        width: 100%;
                        margin-bottom: 4vw;
                        a {
                            display: inline-block;
                            text-decoration: none;
                            img {

                            }
                        }
                    }
                }
            }
            &.gray {
                padding-top: 8vw;
                padding-bottom: 5vw;
                h2 {
                    margin-bottom: 9vw;
                }
                .qa {
                    .qa_list {
                        margin-bottom: 2vw;
                        border-top: none;
                        padding-top: 1vw;
                        .details {
                            &:last-of-type {
                            }
                        }
                        .details-summary {
                            line-height: 1.1;
                            padding-left: 16vw;
                            padding: 6vw;
                            padding-left: 6vw;
                            padding-left: 19vw;
                            font-size: 4.5vw;
                            letter-spacing: 0.02rem;
                            &:hover {
                            }
                            .q_icon {
                                width: 12vw;
                                left: 3.5vw;
                                top: 5.1vw;
                            }
                            .btn {
                                right: 6vw;
                                top: 6.4vw;
                                width: 8vw;
                                height: 8vw;

                                &:before,
                                &:after {
                                    width: 8vw;
                                    height: 1vw;
                                    top: 3.5vw;
                                }
                                &:before {
                                    width: 1vw;
                                    height: 8vw;
                                    top: 0;
                                    left: 3.7vw;
                                }
                                &:after {
                                    opacity: 1;
                                }
                            }
                            &.is-active {
                                .btn {
                                    &:before {
                                        opacity: 0;
                                        transform-origin: center;
                                        transform: rotate(180deg);
                                    }
                                    &:after {
                                        transform-origin: center;
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }

                        .details-summary::-webkit-details-marker {
                            display: none;
                        }

                        .details-content {
                            padding-top: 3vw;
                            .ttl_box {
                                display: inline-block;
                                width: 100%;
                                .a_icon {
                                    width: 11vw;
                                    padding-left: 2vw;
                                    float: left;
                                }
                                .a_txt {
                                    margin-bottom: 2%;
                                    margin-left: 2vw;
                                    width: 78%;
                                    font-size: 4vw;
                                    margin-top: 2vw;
                                }
                            }
                            .item_box {
                                font-size: 3.5vw;
                                .item_main_txt {
                                    margin-bottom: 1vw;
                                    .large {
                                        font-weight: bold;
                                    }
                                }
                                img {
                                    margin-bottom: 2.5vw;
                                }
                                .item_btn_list {
                                    display: inline-block;
                                    margin-top: 4vw;
                                    li {
                                        width: 100%;
                                        &::after {
                                            content:"";
                                            position: absolute;
                                        }
                                        a {
                                            display: inline-block;
                                            text-decoration: none;
                                            .item_btn_txt {
                                                font-size: 140%;
                                                font-weight: bold;
                                                color: #282828;
                                                line-height: 1;
                                            }
                                            .arrow {
                                                position: absolute;
                                                display: inline-block;
                                                width: 40.2px;
                                                height: 42.5px;
                                                height: auto;
                                                top: 49%;
                                                right: 7%;
                                            }
                                            .arrow::before,
                                            .arrow::after {
                                            content: "";
                                            position: absolute;
                                            top: calc(50% - 1px);
                                            right: 0;
                                            width: 22px;
                                            height: 2px;
                                            border-radius: 9999px;
                                            background-color: #000000;
                                            transform-origin: calc(100% - 1px) 50%;
                                            }
                                            .arrow::before {
                                                transform: rotate(28deg);
                                            }

                                            .arrow::after {
                                                transform: rotate(-28deg);
                                            }
                                        }
                                    }
                                }
                            }
                            .inner-list {
                                .inner-list-item {
                                    display: inline-block;
                                    margin-bottom: 2%;
                                    width: 100%;
                                    border-bottom: solid 2px #a2a2a2;
                                    .inner-list-ttl {
                                        margin-bottom: 3vw;
                                        .btn {
                                            right: 6vw;
                                            top: -0.6vw;
                                            width: 8vw;
                                            height: 8vw;

                                            &:before,
                                            &:after {
                                                width: 7vw;
                                                height: 1vw;
                                                top: 3vw;
                                            }
                                            &:before {
                                                width: 1vw;
                                                height: 7vw;
                                                top: 0;
                                                left: 3.3vw;
                                            }
                                            &:after {
                                                opacity: 1;
                                            }
                                        }
                                        &.is-active {
                                            .btn {
                                                &:before {
                                                    opacity: 0;
                                                    transform-origin: center;
                                                    transform: rotate(180deg);
                                                }
                                                &:after {
                                                    transform-origin: center;
                                                    transform: rotate(180deg);
                                                }
                                            }
                                        }
                                    }
                                    .q_icon_p {
                                        width: 11vw;
                                        padding-left: 2vw;
                                        float: left;
                                    }
                                    span {
                                        margin-top: 2vw;
                                        font-size: 3.5vw;
                                        margin-bottom: 2vw;
                                        margin-left: 4vw;
                                    }
                                    .inner-list-content {
                                        overflow-anchor: none;
                                        .a_icon {
                                            width: 11vw;
                                            padding-left: 2vw;
                                        }
                                        p {
                                            float: left;
                                            margin-left: 4.5%;
                                            width: 77%;
                                        }
                                        .item_btn_list {
                                            display: block;
                                            width: 77%;
                                            float: left;
                                            margin-left: 15vw;
                                            li {
                                                width: 100%;
                                                a {
                                                    img {

                                                    }
                                                }
                                            }
                                        }
                                    }
                                    &.double {
                                        .inner-list-ttl {
                                            margin-bottom: 2vw;
                                            .btn {
                                                top: 1.4vw;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &.faq {
                            details {
                                .details-summary {
                                    padding: 8.2vw;
                                    padding-left: 19vw;
                                }
                            }
                        }
                        &:first-child {
                            border-top: none;
                            padding-top: 0;
                        }
                        &:last-child {
                            margin-bottom: 2%;
                        }
                    }
                }
            }
            &.rainbow {
                margin-bottom: 0;
                h2 {
                    margin-bottom: 4%;
                    padding-left: 12.8vw;
                }
                .more-link-btns {
                    margin-bottom: 9vw;
                    display: block;
                    width: 100%;
                    li {
                        margin-bottom: 5vw;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
                .illust {
                    width: 100%;
                    margin-left: 1vw;
                    padding-bottom: 17vw;
                }
            }
        }
    }
}
 
}