@charset "utf-8";

#why {
    .wrap {
        .contents {
            h2 {
                margin-bottom:1.5em;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:50% 1fr;
                grid-column-gap:5%;
                align-items:center;
                .detail {
                    h3 {
                        font-size:1.8rem;
                        line-height:1.5;
                        color:var(--color_white);
                        margin-bottom:1em;
                    }
                    p {
                        line-height:2;
                    }
                }
                &:nth-child(odd) {
                    grid-template-columns:1fr 50%;
                    .img {
                        order:1;
                    }
                }
                &:not(:last-child) {
                    margin-bottom:75px;
                }
            }
        }
    }
}

#requirements {
    .wrap {
        .contents {
            table {
                width:100%;
                border-collapse:collapse;
                th,td {
                    border:1px solid #D7D7D7;
                    line-height:1.8;
                    padding: 1em;
                    text-align:left;
                }
                th {
                    color:var(--color_white);
                    background-color:var(--color_sub);
                    font-weight:500;
                    width:28%;
                    vertical-align:middle;
                    padding-left:5em;
                }
                td {
                    background-color:var(--color_white);
                    padding-left:3em;
                }
            }
        }
    }
}

#portrait {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:1fr 50%;
                grid-column-gap:5%;
                align-items:center;
                .img {
                    img {
                        display:block;
                    }
                }
            }
        }
    }
}

#flow {
    .wrap {
        .contents {
            .flow_list {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                max-width:840px;
                margin:0 auto;
                li {
                    dl {
                        background-color:var(--color_sub);
                        display:grid;
                        justify-items:center;
                        align-content:center;
                        padding:1em;
                        grid-row-gap:1em;
                        clip-path:polygon(0 0, 90% 0, 100% 50%, 90% 100%,0 100%, 10% 50%);
                        dt {
                            font-size:2.0rem;
                        }
                        dt,dd {
                            color:#FFFFFF;
                        }
                    }
                    &:first-child {
                        dl {
                            clip-path:polygon(0 0, 90% 0, 100% 50%, 90% 100%,0 100%);
                        }
                    }
                    &:last-child {
                        dl {
                            clip-path:polygon(0 0, 100% 0, 100% 100%,0 100%, 10% 50%);
                        }
                    }
                }
            }
        }
    }
}

#gallery {
    .wrap {
        .contents {
            h2 {
                margin-bottom:1.5em;
            }
            .gallery_list {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-gap:50px 3%;
            }
        }
    }
}


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

@media screen and (max-width:1024px){
    
    #requirements {
        .wrap {
            .contents {
                table {
                    th {
                        padding-left:1em;
                    }
                    td {
                        padding-left:1em;
                    }
                }
            }
        }
    }
    
}

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

    #why {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    .detail {
                        display:contents;
                        h3 {
                            font-size:1.8rem;
                        }
                    }
                    .img {
                        grid-area:2/1/3/2;
                        margin-bottom:20px;
                    }
                    &:nth-child(odd) {
                        grid-template-columns:1fr;
                        .img {
                            order:unset;
                        }
                    }
                    &:not(:last-child) {
                        margin-bottom:50px;
                    }
                }
            }
        }
    }
    
    #requirements {
        .wrap {
            .contents {
                table {
                    th,td {
                        font-size:1.4rem;
                        width:100%;
                        display:block;
                    }
                    th {
                        width:100%;
                        padding: .66em 1em;
                    }
                    td {
                        padding: .66em 1em;
                    }
                }
            }
        }
    }
    
    #portrait {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    .detail {
                        display:contents;
                        p {
                            order:2;
                        }
                    }
                }
            }
        }
    }
    
    #flow {
        .wrap {
            .contents {
                .flow_list {
                    li {
                        dl {
                            font-size:min(3.2vw,1.5rem);
                            dt {
                                font-size:min(4.2vw,1.8rem);
                            }
                            dt,dd {
                                margin:0 -1em;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #gallery {
        .wrap {
            .contents {
                .gallery_list {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    grid-gap:15px;
                }
            }
        }
    }
    
}