@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))*80);
    }
}

.p-user {

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

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

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

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

            .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-user__body {
        width: calc((100vw / var(--vw-large))*1000);
        margin: 0 auto calc((100vw / var(--vw-large))*53);

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

        .p-user__inn_body {
            gap: calc((100vw / var(--vw-large))*40) calc((100vw / var(--vw-large))*25);
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            @media(max-width:768px) {
                flex-direction: column;
                gap: calc((100vw / var(--vw-small))*30);
                justify-content: center;
            }

            .contents {
                width: calc((100vw / var(--vw-large))*316);

                @media(max-width:768px) {
                    width: 100%;
                }

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

                    .thumb {

                        img {
                            margin-bottom: calc((100vw / var(--vw-large))*16);
                            object-fit: cover;
                            width: 100%;
                            height: calc((100vw / var(--vw-large))*229);
                            object-position: top;

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

                            }
                        }
                    }

                    .body {
                        text-align: left;

                        .meta {
                            font-weight: bold;
                            padding-bottom: calc((100vw / var(--vw-large))*10);
                            margin-bottom: calc((100vw / var(--vw-large))*10);
                            border-bottom: 1px solid #D9D9D9;

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

                        .title {
                            font-weight: 400;
                        }
                    }

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

    .wp-pagenavi {
        margin: calc((100vw / var(--vw-large))*60) auto;

        @media screen and (max-width: 768px) {
            margin: calc((100vw / var(--vw-small))*60) auto;
        }

        a {
            color: var(--color-text-body);
        }
    }

    .wp-pagenavi .page {
        display: inline-block;
        text-align: center;
        width: calc((100vw / var(--vw-large))*40);
        line-height: calc((100vw / var(--vw-large))*40);
        border: solid calc((100vw / var(--vw-large))*1) #212121;
        margin: auto calc((100vw / var(--vw-large))*5);
        text-decoration: none;
        transition: 0.3s ease-out;
        color: var(--color-text-body);

        @media(max-width:768px) {
            width: calc((100vw / var(--vw-small))*40);
            height: calc((100vw / var(--vw-small))*40);
            border: solid calc((100vw / var(--vw-small))*1) #212121;
            margin: auto calc((100vw / var(--vw-small))*5);
            font-size: calc((100vw / var(--vw-small))*14);
            line-height: calc((100vw / var(--vw-small))*40);
        }
    }


    .wp-pagenavi .page:hover {
        background: #212121;
        color: #fff;
        border: solid calc((100vw / var(--vw-large))*1) #212121;

        @media(max-width:768px) {
            border: solid calc((100vw / var(--vw-small))*1) #212121;

        }
    }

    .wp-pagenavi .current {
        display: inline-block;
        width: calc((100vw / var(--vw-large))*40);
        line-height: calc((100vw / var(--vw-large))*40);
        border: solid calc((100vw / var(--vw-large))*1) #212121;
        margin: auto calc((100vw / var(--vw-large))*5);
        color: #fff;
        background: #212121;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*40);
            line-height: calc((100vw / var(--vw-small))*40);
            border: solid calc((100vw / var(--vw-large))*1) #524D38;
            margin: auto calc((100vw / var(--vw-small))*5);
            font-size: calc((100vw / var(--vw-small))*14);
        }
    }

    .wp-pagenavi .previouspostslink,
    .wp-pagenavi .nextpostslink,
    .wp-pagenavi .extend,
    .wp-pagenavi .first,
    .wp-pagenavi .last {
        line-height: calc((100vw / var(--vw-large))*40);
        margin: auto calc((100vw / var(--vw-large))*6);
        transition: 0.3s ease-out;

        @media(max-width:768px) {
            line-height: calc((100vw / var(--vw-small))*40);
            margin: auto calc((100vw / var(--vw-small))*6);
        }
    }

    .wp-pagenavi .previouspostslink:hover,
    .wp-pagenavi .nextpostslink:hover,
    .wp-pagenavi .first:hover,
    .wp-pagenavi .last:hover {
        color: #212121;
        color: #fff;
    }
}

.p-voice {

    /* --- 導入セクション --- */
    .p-voice__intro {
        text-align: center;
        width: calc((100vw / var(--vw-large))*800);
        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))*40);
        }

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

                @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-voice__contents {
        .voice-content {
            margin-bottom: calc((100vw / var(--vw-large))*44);
            font-size: calc((100vw / var(--vw-large))*18);

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

        .voice-acf-content {
            width: calc((100vw / var(--vw-large))*697);
            margin: 0 auto;

            @media(max-width:768px) {
                width: 100%;
            }
        }

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

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

            .name {
                font-size: calc((100vw / var(--vw-large))*22);

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

        .opening {
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: calc((100vw / var(--vw-large))*80);

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

        .voice-image-block {
            width: calc((100vw / var(--vw-large))*264);

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

        .voice-qa-section {
            width: calc((100vw / var(--vw-large))*417);

            @media(max-width:768px) {
                width: 100%;
            }
        }

        dl {
            display: flex;
            flex-wrap: wrap;
            text-align: left;

            @media(max-width:768px) {}

            dt {
                width: calc((100vw / var(--vw-large))*118);
                /* 用語幅 */
                font-weight: bold;
                background-color: #489850;
                color: #fff;
                padding: calc((100vw / var(--vw-large))*5) 0;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                letter-spacing: 0;
                border-bottom: 1px solid #D3D3D3;

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

            dd {
                width: calc((100vw / var(--vw-large))*280);
                background-color: #F2F8F3;
                padding: calc((100vw / var(--vw-large))*5) 0 calc((100vw / var(--vw-large))*5) calc((100vw / var(--vw-large))*10);
                display: flex;
                align-items: center;
                letter-spacing: 0;
                line-height: 1.5;
                border-bottom: 1px solid #D3D3D3;

                @media(max-width:768px) {
                    width: calc((100vw / var(--vw-small))*240);
                    padding: calc((100vw / var(--vw-small))*5) 0 calc((100vw / var(--vw-small))*5) calc((100vw / var(--vw-small))*10);
                    font-size: calc((100vw / var(--vw-small))*14);
                }
            }
        }

        .qa-section {
            .qa-wrap {
                .qa-item {
                    margin-bottom: calc((100vw / var(--vw-large))*80);

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

                    h4 {
                        text-align: left;
                        font-weight: bold;
                        font-size: calc((100vw / var(--vw-large))*18);
                        padding-bottom: calc((100vw / var(--vw-large))*10);
                        border-bottom: #00A310 2px dashed;
                        margin-bottom: calc((100vw / var(--vw-large))*20);
                        justify-content: flex-start;
                        align-items: flex-start;
                        line-height: 1.5;

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

                        span {
                            color: #489850;
                            font-weight: black;
                            margin-right: calc((100vw / var(--vw-large))*9);

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

                    .inn__img {
                        margin-bottom: calc((100vw / var(--vw-large))*20);

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

                    p {
                        font-size: calc((100vw / var(--vw-large))*18);
                        text-align: left;

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

}