@charset "UTF-8";

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

.p-textbook {
    position: relative;

    .p-textbook__text {

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

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

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

            .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;
            }

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

            .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);
            }
        }

        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;

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

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

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

                span {
                    letter-spacing: 0;
                }
            }
        }
    }
}