@charset "UTF-8";

section {
    padding-top: 0;
}

.video-box {
    width: 100%;
    height: min-content;
    display: flex;
    align-items: center;
    gap: 32px;

    video {
        width: 25%;
        clip-path: inset(6% 0 40px 0);
        /* 上20px、下20pxカット */
    }
}

.video-pr-text {
    width: 95%;
    padding: 40px 32px;

    h3 {
        margin-bottom: var(--margin-bottom-l);
    }

    div {
        margin-bottom: var(--margin-bottom-m);
    }
}

#pr-mainvisual {
    height: 100vh;
    width: 100%;
    padding-top: 100px;
    display: grid;
    position: sticky;
    top: 0;
    z-index: -1;

    .pr-mainvisual-container {
        max-width: 65%;
        margin: auto;
        display: grid;
        place-items: center;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);

        .div1 {
            grid-row: span 2 / span 2;
        }

        .div3 {
            grid-column-start: 3;
            grid-row-start: 1;
        }

        .div4 {
            grid-column: span 2 / span 2;
            grid-column-start: 2;
            grid-row-start: 2;
            padding: 0 4%;
            display: grid;
            place-items: center;
            font-size: var(--font-size-m);
            text-align: center;
        }
    }
}

#pr {
    .circle {
        display: flex;
        align-items: center;
        margin-bottom: var(--margin-bottom-l);

        .text {
            width: 50%;
        }

        .img {
            width: 50%;
        }
    }

    .pr-method {
        div {
            margin-bottom: var(--margin-bottom-m);

            &:nth-of-type(odd) {
                margin-left: auto;
            }
        }
    }

    .ad-method {
        display: grid;
    }
}

#service {
    p {
        margin-bottom: var(--margin-bottom-m);
    }

    ol {
        li {
            list-style: decimal;
            list-style-position: inside;
        }
    }

    ul {
        li {
            list-style: none;
        }
    }

    .flow-tab {
        background: #fbe8e6;
    }
}

#plan {
    .wrapper {
        h3 {
            text-align: center;
            margin-bottom: var(--margin-bottom-m);
        }
    }

    .red {
        padding-bottom: var(--margin-bottom-l);
    }

}

#support {
    h4 {
        margin-bottom: var(--margin-bottom-m);
    }

    div>p {
        padding-bottom: 32px;
    }
}

@media (width <=960px) {
    .video-box {
        width: 100%;
        height: min-content;
        margin-bottom: var(--margin-bottom-m);
        display: flex;
        align-items: center;
        gap: 16px;

        video {
            width: 25%;
            clip-path: inset(6% 0 40px 0);
            /* 上20px、下20pxカット */
        }
    }

    .video-pr-text {
        width: 100%;
        padding: 0;

        div {
            margin-bottom: var(--margin-bottom-s);
        }
    }

    #pr-mainvisual {
        padding-top: 100px;

        .pr-mainvisual-container {
            max-width: 100%;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr) auto;

            .div1 {
                grid-row: span 2 / span 2;
            }

            .div3 {
                grid-column-start: 2;
            }

            .div4 {
                grid-column: span 2 / span 2;
                grid-row-start: 3;
                padding: 34px 4%;
                display: grid;
                place-items: center;
                font-size: var(--font-size-m);
                text-align: center;
            }
        }
    }

    #pr {
        .circle {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: var(--margin-bottom-l);

            .text {
                width: 100%;
            }

            .img {
                width: 60%;
            }
        }

        .pr-method {
            margin-bottom: var(--margin-bottom-l);

            div {
                margin-bottom: var(--margin-bottom-s);
            }
        }
    }
}

@media (width <=430px) {
    #pr-mainvisual {
        .pr-mainvisual-container {
            max-width: 100%;
            margin: auto;
            display: grid;
            place-items: center;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);

            .div1 {
                grid-row: span 2 / span 2;
            }

            .div3 {
                grid-column-start: 2;
            }

            .div4 {
                grid-column: span 2 / span 2;
                grid-row-start: 3;
                padding: 0 4%;
                display: grid;
                place-items: center;
                font-size: var(--font-size-m);
                text-align: center;
            }
        }
    }
}