@charset "UTF-8";

/* MV */
.p-mv {
    margin-bottom: calc((100vw / var(--vw-large))*150);

    @media(max-width:768px) {
        margin-bottom: calc((100vw / var(--vw-small))*33);
    }
}

.p-textbook {
    position: relative;

    .p-textbook__text {

        img {
            position: absolute;
            width: calc((100vw / var(--vw-large))*101);
            right: calc((100vw / var(--vw-large))*100);

            @media(max-width:768px) {
                width: calc((100vw / var(--vw-small))*53);
                right: calc((100vw / var(--vw-small))*4);
                top: calc((100vw / var(--vw-small))*290);
                z-index: -1;
            }
        }
    }

    /* --- 導入セクション --- */
    .p-textbook__intro {
        text-align: center;
        width: calc((100vw / var(--vw-large))*804);
        margin: 0 auto calc((100vw / var(--vw-large)) * 40);

        @media(max-width:768px) {
            width: calc((100vw / var(--vw-small))*350);
            margin: 0 auto calc((100vw / var(--vw-small))*24);
        }

        .p-textbook__intro__header {
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*50);

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*24);
            }

            .en {
                font-size: calc((100vw / var(--vw-large))*15);
                font-family: var(--font-en);
                color: var(--color-primary-light);
                font-weight: bold;
                margin-bottom: calc((100vw / var(--vw-large))*10);
                font-style: italic;

                @media(max-width:768px) {
                    font-size: calc((100vw / var(--vw-small))*15);
                    margin-bottom: calc((100vw / var(--vw-small))*10);
                }
            }

            h2 {
                font-size: calc((100vw / var(--vw-large))*30);
                font-weight: 900;
                text-align: left;

                @media(max-width:768px) {
                    font-size: calc((100vw / var(--vw-small))*30);
                }
            }

            .c-section-title-underline {
                display: block;
                width: calc((100vw / var(--vw-large)) * 158);
                /* 線の長さ */
                height: 3px;
                /* 線の太さ */
                /* 修正箇所: グラデーションで2色を半分ずつ表現 */
                background: linear-gradient(to right, #00A310 50%, #93D500 50%);
                margin-top: calc((100vw / var(--vw-large)) * 10);

                @media(max-width:768px) {
                    width: calc((100vw / var(--vw-small))*82);
                    margin-top: calc((100vw / var(--vw-small))*10);
                }
            }
        }

        p {
            text-align: left;
            letter-spacing: 0;
        }
    }

    .p-textbook__body {
        width: calc((100vw / var(--vw-large))*854);
        margin: 0 auto calc((100vw / var(--vw-large))*76);
        gap: calc((100vw / var(--vw-large))*64) calc((100vw / var(--vw-large))*34);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        @media(max-width:768px) {
            width: calc((100vw / var(--vw-small))*328);
            gap: calc((100vw / var(--vw-small))*16) calc((100vw / var(--vw-small))*18);
            margin: 0 auto calc((100vw / var(--vw-small))*80);
        }

        li {
            width: calc((100vw / var(--vw-large))*280);

            @media(max-width:768px) {

                width: calc((100vw / var(--vw-small))*140);
            }

            a {
                text-decoration: none;
                color: var(--color-text-body);

                img {
                    margin-bottom: calc((100vw / var(--vw-large))*16);

                    @media(max-width:768px) {
                        margin-bottom: calc((100vw / var(--vw-small))*16);
                    }
                }

                span {
                    letter-spacing: 0;

                    @media(max-width:768px) {
                        line-height: normal;
                    }
                }
            }
        }
    }
}