:root {
    --white: #fff;
    --black: #333;
    --brown: #6D3D18;
    --blue: #004bb1;
    --font-weight-bold: 600;
    --font-point: "M PLUS Rounded 1c", sans-serif;
}
.l-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.practical .c-mv {
    margin-bottom: 30px;
}
.practical .l-mv-bgimg .c-center {
    margin-bottom: 40px;
}
.practical .l-content-point h2,
.practical .l-content-point h3 {
    color: #009393;
}
.practical .step-list h3 {
    text-align: center;
}
.practical .step-list p {
    margin-top: 8px;
}
.practical .l-content-point,
.practical .l-content-point__2,
.practical .l-content-point__3 {
    border: 3px solid #009393;
}
.practical .l-content-point__2::before {
    background: url(../img/subject/pratical-point1-title.png) no-repeat;
    background-size: cover;
}
.practical .l-content-point__3::before {
    background: url(../img/subject/pratical-point2-title.png) no-repeat;
    background-size: cover;
}
.practical .l-content-point__3 dl dt {
    color: #009393;;
}
.c-mv__logo img:nth-of-type(2){
    padding: 20px;
}
.c-mv__logo p.practical-text {
    background: #9ED6D6;
}
.c-mv .c-mv-book img {
    width: 150px;
    margin: 0 20px 0;
    box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.1);
}
p.c-mv-text {
    text-align: center;
    margin-bottom: 40px;
    font-size: 14px;
}

.wrapper.japanese {
    background: url(../img/subject/japanese-bg.png) repeat;
}
.wrapper.mathmatics {
    background: url(../img/subject/mathmatics-bg.png) repeat;
}
.wrapper.social {
    background: url(../img/subject/social-bg.png) repeat;
}
.wrapper.science {
    background: url(../img/subject/science-bg.png) repeat;
}
.wrapper.english {
    background: url(../img/subject/english-bg.png) repeat;
}
.wrapper.practical {
    background: url(../img/subject/practical-bg.png) repeat;
}


.l-content-point__1 ul {
    width: 40%;
    min-width: 310px;
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
}
.l-content-point__1 ul::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 35px;
    background: url(../img/subject/point01-arrow.svg) top center / contain no-repeat;
}
.math .l-content-point__1 ul::after {
    background: url(../img/subject/math-point01-arrow.svg) top center / contain no-repeat;
}
.science .l-content-point__1 ul::after {
    background: url(../img/subject/science-point01-arrow.svg) top center / contain no-repeat;
}
.social .l-content-point__1 ul::after {
    background: url(../img/subject/social-point01-arrow.svg) top center / contain no-repeat;
}
.english .l-content-point__1 ul::after {
    background: url(../img/subject/english-point01-arrow.svg) top center / contain no-repeat;
}
.practical .l-content-point__1 ul::after {
    background: url(../img/subject/practical-point01-arrow.svg) top center / contain no-repeat;
}
.l-content-point__1 ul li {
    display: flex;
    gap: 8px;
}
.l-content-point__1 ul li::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/subject/icon-check.png) top center / contain no-repeat;
}
.c-point01 {
    width: 80%;
    max-width: 500px;
    display: flex;
    gap: 20px;
    font-size: 14px;
}
.c-point01 p {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
}

.l-content-point__3 dl dd img {
    width: auto;
    max-height: 420px;
}
.l-content-point__3 ul li {
    min-height: 300px;
    font-size: 14px;
    padding: 30px;
}
.l-content-point__3 ul li img {
    width: 100%;
    height: auto;
}
.l-content-point__3 ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.l-content-point__3 ul li span span {
    display: inline-block;
    font-size: 12px;
    color: var(--white);
    padding: 2px 3px;
    border-radius: 3px;
    margin: 0;
}
.japanese .l-content-point__3 ul li span span {
    background: #DD2492;
}
.math .l-content-point__3 ul li span,
.social .l-content-point__3 ul li span,
.english .l-content-point__3 ul li span {
    flex-direction: column;
    gap: 0;
}
.math .l-content-point__3 ul li span span {
    background: #0D81C9;
}
.social .l-content-point__3 ul li span span {
    background: #EE832B;
}
.english .l-content-point__3 ul li span span {
    background: #8D4B95;
}

.l-content-detailbg.japanese-bg {
    background: #f7e8ea url(../img/subject/japanese-bg.png) repeat;
}
.l-content-detailbg.math-bg {
    background: #e8f0f7 url(../img/subject/mathmatics-bg.png) repeat;
}
.l-content-detailbg.science-bg {
    background: #e8f7e8 url(../img/subject/science-bg.png) repeat;
}
.l-content-detailbg.social-bg {
    background: #f5e8dd url(../img/subject/social-bg.png) repeat;
}
.l-content-detailbg.english-bg {
    background: #f0e8f7 url(../img/subject/english-bg.png) repeat;
}
.l-content-detailbg.practical-bg {
    background: #e8f6f7 url(../img/subject/practical-bg.png) repeat;
}
.l-content-detailbg {
    padding: 70px 0 40px;
}
.other h2 {
    font-size: 20px;
}
.other ul {
    max-width: 1000px;
    display: flex;
    gap: 22px;
}
.other .c-button a {
    font-size: 14px;
    padding: 7px 0;
    box-shadow: 0 0.3rem #BA7A4F;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.other .c-button a::after {
    width: 8px;
    height: 8px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}

@media screen and (max-width: 768px) {
    .other ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 18px
    }
    .other ul li {
        width: calc(100% / 3 - 25px);
    }
    .other .c-button a {
        font-size: 13px;
    }
    .other .c-button a::after {
        right: 11px;
    }
}