@media screen and (max-width:1000px) {
    
    /* Introduction */
    
    .introduction {
        padding: 80px 20px;
    }
    
    /* Benefits */
    .benefits__bonus-item {
        padding: 50px 20px;
    }

    .benefits__image-wrap .benefits__img {
        width: 48%;
    }
    
    .benefits__image-wrap {
        gap: 25px;
    }
    
    .benefits__point-card {
        padding: 20px 15px;
    }
    
    .benefits__point-ttl {
        font-size: 16px;
    }
    
    .benefits__features-inner {
        padding: 30px 50px;
    }
    
    .bubble.b1 {
        left: 5%;
    }
    
    .bubble.b2 {
        right: 6%;
    }
    
    .bubble.b3 {
        left: 1%;
    }
    
    .bubble.b4 {
        right: 2%;
    }
    
    .faq {
        padding: 80px 20px;
    }
    
}


@media screen and (max-width:800px) {

    .benefits__other-ttl .ttl-icon {
        display: none;
    }

    .case-center-img {
    height: 150px;
    }

    .bubble {
    font-size: 12px;
    }

    .family-item {
    flex: unset;
    width: 48%;
    }

    .family-grid {
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 20px 10px;
    gap: 10px;
    }

    .family-item .text-cont {
        padding: 10px 5px;
    }

    /* Introduction */

    .introduction {
        padding: 30px 0;
    }

    .introduction__benefits-grid {  
        gap: 25px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .introduction__benefit-box {
        flex: unset;
        width: 35%;
        justify-content: center;
    }

    .introduction__highlight-title {
        line-height: 1.2;
        font-size: 32px;
    }

    /* Benefits */
    .benefits__points {
        flex-wrap: wrap;
    }

    .benefits__point-card {
        flex: unset;
        width: 35%;
    }

    .benefits__features-box {
        padding: 30px 50px;
    }

    .benefits__course-grid {
        flex-wrap: wrap;
        justify-content: center;
    }

    .benefits__course-card {
        flex: unset;
        width: 40%;
    }
}

@media screen and (max-width:600px) {
    .layout--small.sp-p20 {
        box-sizing: border-box;
    }
    .sp-p20 {
        padding: 0 20px;
    }

     /* Introduction */

    .introduction__sub-txt {
        font-size: 24px;
    }

    .introduction__main-txt {
        font-size: 40px;
    }

    .introduction__benefit-name {
        font-size: 22px;
    }

    .introduction__benefits-grid {
        margin-bottom: 15px;
    }

    .introduction__disclaimer {
        text-align: left;
    }

    .introduction__benefit-box {
        width: 100%;
    }

    .introduction__benefits-grid {
        gap: 20px;
    }

    .introduction__comparison {
        padding: 30px 20px;
        margin-bottom: 50px;
    }

    .introduction__total-note {
        text-align: left;
    }
    .introduction__case-main-ttl {
        font-size: 24px;
    }

    .introduction__case-header {
    padding: 15px 20px;
    align-items: start;
    gap: 10px;
    flex-direction: column;
    }

    .case-label {
    font-weight: 600;
    line-height: 1;
    }

    .bubble {
    left: 0;
    right: 0;
    display: block;
    text-align: center;
    position:static;
    font-size: 16px;
    }

    .case-bubbles {
    margin: 10px auto;
    width: max-content;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    .case-center-img {
    transform: none;
    margin: 0 auto;
    display: block;
    position: static;
    }

    .introduction__case-body.case-1 {
    height: auto;
    }

    .introduction__case-card {
    border: 4px solid #1DB37E;
    }

    /* Benefits */

    .benefits__bonus-item {
        padding: 30px 15px;
    }

    .benefits__point-card {
        padding: 20px 30px;
    }


    .benefits__point-card {
        width: 100%;
    }


    .benefits__label {
        margin-bottom: 10px;
    }

    .benefits__logo {
        margin-top: 10px;
    }

    .benefits__header {
        margin-bottom: 10px;
    }

    .benefits__description {
        text-align: left;
        margin-bottom: 30px;
        line-height: 1.25;
    }

    .benefits {
        padding: 50px 20px;
        box-sizing: border-box;
    }

    .benefits__title {
        line-height: 1.2;
    }

    .benefits__points {
        gap: 20px;
    }

    .benefits__book-list {
        gap: 10px;
        flex-wrap: wrap;
    }

    .benefits__book-img {
        width: 31%;
    }

    .benefits__lineup-label {
        margin-bottom: 20px;
    }

    .benefits__lineup-note {
        text-align: center;
        margin-top: 10px;
    }

    .benefits__lineup {
        margin-bottom: 30px;
    }

    .benefits__usage {
        margin: 0 auto;
    }

    .benefits__container {
        gap: 50px;
    }

    .benefits__recommend-bar span {
        display: block;
        margin-right: 0;
    }

    .benefits__recommend-content {
        gap: 15px;
        flex-direction: column;
    }

    .benefits__recommend {
        margin: 0;
    }

    .benefits__features-inner .benefits__features-ttl {
        font-size: 16px;
    }

    .benefits__features-list li {
        line-height: 1.25;
        font-weight: normal;
    }

    .benefits__features-box {
        margin-bottom: 40px;
    }

    .benefits__sub-ttl {
        margin: 40px 0 20px;
    }

    .benefits__target-list {
        grid-template-columns: none;
        gap: 10px;
    }

    .benefits__other-ttl {
        margin-bottom: 10px;
    }

    .benefits__course-text {
        line-height: 1.25;
    }

    .benefits__course-grid {
        gap: 10px;
    }

    .benefits__link {
        text-align: left;
        margin: 20px 0 30px;
    }


    .benefits__features-box {
        padding: 20px;
    }

    .benefits__course-card {
        width: 100%;
    }



    .benefits__features-inner {
        padding: 20px 15px;
    }

    .benefits__image-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .benefits__image-wrap .benefits__img {
        width: 100%;
    }

    .benefits__bonus-item.item-2 {
        padding: 30px 0;
    }
    
    .benefits__bonus-item.item-2 .benefits__description, 
    .benefits__bonus-item.item-2 .benefits__recommend-left,
    .benefits__bonus-item.item-2 .benefits__recommend-right,
    .benefits__bonus-item.item-2 .benefits__shikaku-footer {
        padding: 0 20px;
    }

    /* FAQ */

    .faq__question {
        padding: 25px 40px 25px 25px;
    }

    .faq__icon {
        right: -20px;
    }
}