@charset "UTF-8";

/*--------------------------------------------------------------------

    .wordpress-point

--------------------------------------------------------------------*/

.wordpress-point {
    position: relative;

    .wrap {
        box-sizing: border-box;

        header {
            h2 {
                color: var(--color-blue-02);
                text-align: center;
            }
        }

        .article {
            .point-01 {
                .carousel {
                    ul {
                        display: flex;
                        list-style: none;
                        padding: 0;

                        li {
                            p {
                                background-color: var(--color-blue-10);
                                color: var(--color-blue-02);
                                display: flex;
                                flex-direction: column;
                                font-weight: bold;
                                justify-content: center;
                                text-align: center;
                            }

                            figure {
                                img {
                                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .decoration {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        width: 100%;

        .bar {
            display: flex;

            span {
                background: linear-gradient(to bottom,  rgba(240,245,248,0) 0%,rgba(240,245,248,1) 25%,rgba(240,245,248,1) 80%,rgba(240,245,248,0) 100%);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .wordpress-point {
        padding: 100px 0 0;

        .wrap {
            padding: 0 15px 50px;

            header {
                margin-bottom: 40px;

                h2 {
                    font-size: 20px;
                }
            }

            .article {
                .point-01 {
                    > p {
                        font-size: 14px;
                        margin-bottom: 30px;
                    }

                    .carousel {
                        margin: 0 -15px;
                        
                        ul {
                            li {
                                p {
                                    font-size: 14px;
                                    height: 30px;
                                    margin-bottom: 15px;
                                }
                            }
                        }
                    }
                }

                .point-02 {
                    margin-top: 50px;

                    h3 {
                        font-size: 15px;
                        margin-bottom: 20px;
                    }
                }
            }
        }

        .decoration {
            .bar {
                display: flex;

                span {
                    height: 100px;
                    width: 40px;
                }
            }
        }
    }
}

@media screen and (min-width: 769px) {
    .wordpress-point {
        padding: 160px 0 0;

        .wrap {
            margin: 0 auto;
            max-width: 1100px;
            padding: 0 50px 50px;

            header {
                margin-bottom: 50px;

                h2 {
                    font-size: 34px;
                }
            }

            .article {
                .point-01 {
                    > p {
                        margin-bottom: 50px;
                        text-align: center;
                    }

                    .carousel {
                        ul {
                            gap: 50px;

                            li {
                                p {
                                    font-size: 20px;
                                    height: 42px;
                                    margin-bottom: 20px;
                                }
                            }
                        }
                    }
                }

                .point-02 {
                    margin-top: 100px;

                    h3 {
                        font-size: 28px;
                        margin-bottom: 50px;
                        text-align: center;
                    }
                }
            }
        }

        .decoration {
            .bar {
                span {
                    height: 150px;
                    width: 100px;
                }
            }
        }
    }
}