section.feature{
    padding: 4rem 0;
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;
}
section.feature h2{
    margin: 0 auto 4rem;
    width: 16rem;
}
.concept{
    width: clamp(39rem, 100%, 48rem);
    margin: 1.5rem auto 4rem;
    text-align: center;
}

section.feature h3{
    font-size: 1.5rem;
    text-align: center;
    font-weight: normal;
    border-bottom: 2px solid;
    border-image:var(--main-gradation) 1;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
section.feature h4{
    font-size: 1.3rem;
    text-align: center;
    margin: 2rem auto;
    padding: 1rem;
    background: var(--main-gradation-opacity);
}

.learning h3 span{
    font-size: 2rem;
    color: var(--main-color);
}
.learning__contents{
    display: grid;
    grid-template-columns: auto 30rem;

    ul{
        margin: 2rem auto 0;
    }
    li{
        margin-bottom: 3rem;
    }
    li:last-of-type{
        margin-bottom: 1rem;
    }
    h5{
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    h5 span{
        background: var(--main-color);
        color: var(--clear-color);
        font-size: 1.5rem;
        margin-right: 1rem;
        padding: .5rem 1rem;
        border-radius: 1rem;
    }
}
.learning__contents--text{
    margin-bottom: 3rem;
}

.learning__merit{
    display: grid;
    grid-template-columns: 15rem auto;
    gap: 2rem;
    align-items: center;
}
.learning__merit li{
    display: grid;
    grid-template-columns: 1rem auto;
    gap: .5rem;
}
.learning__merit li::before{
    content: "";
    transform: translateY(.3rem);
    width: 1rem;
    height: 1rem;
    background: linear-gradient(45deg, rgba(255,182,193,1) 0%, rgba(255,182,193,1) 50%, rgba(173,216,230,1) 50%, rgba(173,216,230,1) 100%);
}
.learning__merit h5{
    margin: 3rem auto 1rem;
    font-size: 1.25rem;
}
.learning__merit dl{
    display: grid;
    gap: 2rem;
    grid-template-columns: 6rem auto;
    align-items: center;
}
.learning__merit dt{
    grid-column: 1;
    background: var(--main-color);
    color: var(--clear-color);
    padding: .5rem 0;
    text-align: center;
    border-radius: 1rem;
}
.learning__merit dd{
    grid-column: 2;
    font-size: 1.1rem;
}
.learning__merit dd span{
    font-size: 1rem;
    padding-left: 1rem;
}
@media (max-width: 767px){
    section.feature{
        width: 90%;
    }
    .concept{
        width: 100%;
    }
    section.feature h3{
        font-size: 1.25rem;
    }
    section.feature h4{
        font-size: 1.1rem;
    }
    
    .learning h3 span{
        font-size: 1.5rem;
    }
    .learning__contents{
        display: block;
        margin-bottom: 3rem;
    }
    .learning__contents ul{
        margin: 2rem auto;
    }
    .learning__contents h5{
        font-size: 1.1rem;
    }
    .learning__contents h5 span{
        font-size: 1rem;
        display: block;
        width: 6rem;
        text-align: center;
        margin-bottom: .5rem;
    }
    .learning__merit{
        display: block;
    }
    .learning__merit figure{
        width: 60%;
        margin: 0 auto;
    }
    .learning__merit dl{
        display: block;
    }
    .learning__merit dt{
        width: 6rem;
    }
    .learning__merit dd{
        margin: .5rem auto 1rem;
    }
    .learning__merit dd span{
        display: block;
    }
}

.friday{
    background-color: var(--clear-color);
    background-image:radial-gradient(rgba(220,239,244,.5) 30%, transparent 30%);
    background-size: 12px 12px;
    padding: 4rem 0;
}
.friday__contents{
    width: clamp(48rem, 90%, 68.75rem);
    margin: 0 auto;

    h2{
        width: 44rem;
        margin: 0 auto;
    }
    h3{
        margin: 2rem auto 3rem; 
        text-align: center;
    }
    h4{
        font-size: 1.75rem;
        text-align: center;
        font-weight: normal;
        border-bottom: 2px solid;
        border-image:var(--main-gradation) 1;
        padding-bottom: .5rem;
        margin-bottom: 1rem;
    }
    h5{
        text-align: center;
        margin: .5rem auto 2rem;
        font-size: 1.25rem;
    }
    ul{
        display: grid;
        grid-template-columns: repeat(2,auto);
        gap: 1rem 4rem;
    
        li{
            display: grid;
            grid-template-columns: 1.2rem auto;
            gap: .5rem;
            font-size: 1.2rem;
        }
        li::before{
            content: "";
            transform: translateY(.3rem);
            width: 1.2rem;
            height: 1.2rem;
            background: linear-gradient(45deg, rgba(255,182,193,1) 0%, rgba(255,182,193,1) 50%, rgba(173,216,230,1) 50%, rgba(173,216,230,1) 100%);
        }
    }
}
.friday__explanation{
    display: grid;
    grid-template-columns: auto 25rem;
    gap: 2rem;
    margin-bottom: 3rem;

    span{
        font-size: 1.3rem;
        border-bottom: 5px dotted var(--accent-color);
        padding-bottom: .5rem;
        line-height: 2.5;
    }
}

.friday__btn{
    width: clamp(39rem, 100%, 48rem);
    margin: 4rem auto 0;
    border: 5px solid;
    border-image:var(--main-gradation) 1;
    text-align: center;
    font-size: 1.5rem;

    a{
        color: var(--text-color);
        padding: 1rem;
        transition: 1s;
    }
    a:hover{
        background: var(--main-gradation);
    }
}

@media (max-width: 767px){
    .friday__contents{
        width: 90%;

        h2{
            width: 90%;
        }
        h4{
            font-size: 1.35rem;
        }
        ul{
            display: block;

            li{
                font-size: 1rem;
            }
            li::before{
                width: 1rem;
                height: 1rem;
            }
        }
    }

    .friday__explanation{
        grid-template-columns: 1fr;

        span{
            font-size: 1.1rem;
        }
    }

    .friday__btn{
        width: 100%;
        font-size: 1.1rem;
    }
}