@charset "utf-8";

.page-installation-reallyturf {
    .titlewrap {
    	background:url(../img/method/really-turf/mv.jpg) no-repeat center center/cover;
    }
}
.page-installation-vistafolia {
    .titlewrap {
    	background:url(../img/method/vistafolia/mv.jpg) no-repeat center center/cover;
    }
}

#page_link {
    .wrap {
        padding-bottom:60px;
        .contents {
            ul {
                display:flex;
                flex-wrap:wrap;
                column-gap:2%;
                row-gap:.66em;
                /* margin-bottom:50px; */
                li {
                    flex-grow:1;
                    a {
                        border:1px solid #707070;
                        display:grid;
                        grid-template-columns:1fr 1em;
                        align-items:center;
                        height:3em;
                        grid-column-gap:.5em;
                        text-align:center;
                        padding:.5em 1em;
                        font-size:min(1.9vw,1.6rem);
                    }
                }
            }
            .img {
                max-width:600px;
            }
        }
    }
}

section {
    .wrap {
        .contents {
            .flow {
                display:grid;
                grid-row-gap:50px;
                &:not(:last-child) {
                    margin-bottom:50px;
                }
                .flow_box {
                    border:1px solid #707070;
                    padding:15px;
                    display:grid;
                    grid-template-columns:auto 1fr 23%;
                    grid-column-gap:3%;
                    align-items:center;
                    position:relative;
                    &:not(:last-child) {
                        &::after {
                            content:'';
                            display:block;
                            width:50px;
                            height:20px;
                            background-color:var(--color_main);
                            clip-path:polygon(0 0,100% 0,50% 100%);
                            position:absolute;
                            left:50%;
                            bottom:-35px;
                            transform:translateX(-50%);
                        }
                    }
                    .step {
                        background-color:#F2FAE5;
                        font-size:1.6rem;
                        width:9em;
                        height:9em;
                        border-radius:50%;
                        color:var(--color_main);
                        display:grid;
                        align-content:center;
                        justify-items:center;
                        grid-row-gap:.66em;
                        span {
                            font-size:3.0rem;
                            font-weight:600;
                        }
                    }
                    .detail {
                        h3 {
                            font-size:1.8rem;
                            line-height:1.5;
                            &:not(:last-child) {
                                margin-bottom:.5em;
                            }
                        }
                        p {
                            font-size:1.5rem;
                            line-height:1.5;
                        }
                        .att {
                            display:block;
                            font-size:1.5rem;
                            color:#ff0000;
                            line-height:1.5;
                        }
                        & > a {
                            display:inline-block;
                            color:var(--color_sub);
                        }
                    }
                    & > img {
                        display:block;
                        width:100%;
                        max-width:400px;
                        margin:0 auto;
                    }
                }
            }
            & > .detail {
                max-width:1000px;
                margin:0 auto 50px;
                h3 {
                    font-size:2.0rem;
                    line-height:1.5;
                    margin-bottom:.33em;
                }
                h4 {
                    font-size:1.7rem;
                    line-height:1.5;
                    margin-bottom:.5em;
                }
                ul {
                    font-size:1.6rem;
                    &:not(:last-child) {
                        margin-bottom:2em;
                    }
                    li {
                        line-height:1.5;
                        text-indent:-.5em;
                        padding-left:1em;
                        &::before {
                            display:inline-block;
                            content:'■';
                            transform:scale(.66);
                        }
                    }
                }
                .img {
                    max-width:800px;
                    margin:0 auto;
                }
            }
            .movwrap {
                h3 {
                    font-size:2.6rem;
                    color:#3C6172;
                    line-height:1.5;
                    position:relative;
                    margin-bottom:1.5em;
                    &::before {
                        content:'';
                        display:block;
                        width:2.6em;
                        height:2.6em;
                        background-color:rgba(44,148,80,.1);
                        border-radius:50%;
                        position:absolute;
                        left:-1em;
                        top:-.66em;
                        z-index:-1;
                    }
                }
                .movie_box {
                    display:grid;
                    grid-row-gap:10px;
                    &:not(:last-child) {
                        margin-bottom:50px;
                    }
                    iframe {
                        display:block;
                        width:100%;
                        height:auto;
                        max-width:600px;
                        aspect-ratio:16/9;
                    }
                    p {
                        line-height:1.5;
                    }
                    a {
                        color:var(--color_sub);
                        line-height:1.5;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){    
}

@media screen and (max-width:768px){
    
    #page_link {
        .wrap {
            padding-bottom:45px;
            .contents {
                ul {
                    /* margin-bottom:30px; */
                    li {
                        a {
                            font-size:min(3.5vw,1.6rem);
                        }
                    }
                }
            }
        }
    }
    
    section {
        .wrap {
            .contents {
                .flow {
                    grid-row-gap:30px;
                    .flow_box {
                        grid-template-columns:1fr;
                        padding:10px;
                        &:not(:last-child) {
                            &::after {
                                width:40px;
                                height:15px;
                                bottom:-25px;
                            }
                        }
                        .step {
                            font-size:1.3rem;
                            width:5em;
                            height:5em;
                            position:absolute;
                            top:5px;
                            left:5px;
                            grid-row-gap:.2em;
                            span {
                                font-size:2.4rem;
                            }
                        }
                        .detail {
                            margin-bottom:20px;
                            h3 {
                                font-size:1.6rem;
                                padding-left:4em;
                                display:grid;
                                align-items:center;
                                min-height:3.5em;
                            }
                            p {
                                font-size:1.4rem;
                            }
                            .att {
                                font-size:1.3rem;
                            }
                        }
                    }
                }
                & > .detail {
                    h3 {
                        font-size:1.8rem;
                    }
                    h4 {
                        font-size:1.6rem;
                    }
                    ul {
                        font-size:1.4rem;
                    }
                }
                .movwrap {
                    h3 {
                        font-size:2.0rem;
                    }
                }
            }
        }
    }
    
}