@charset "utf-8";

section {
    .wrap {
        .contents {
            .btn {
                font-size:1.6rem;
                height:3em;
                width:100%;
                max-width:20em;
                margin:0 auto;
                border:1px solid #707070;
                display:grid;
                align-items:center;
                justify-content:center;
            }
        }
    }
}

#message {
    .wrap {
        .contents {
            .contents_inner {
                border:1px solid #707070;
                padding:60px;
                h2 {
                	font-family: "Poppins", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
                	text-align:center;
                    font-size:3.2rem;
                }
                p {
                    text-align:center;
                    &:not(:last-child) {
                        margin-bottom:1em;
                    }
                }
            }
        }
    }
}

#requirements {
    .wrap {
        .contents {
            table {
                width:100%;
                border-collapse:collapse;
                margin-bottom:60px;
                tbody {
                    tr {
                        border-bottom:1px solid #707070;
                        th,td {
                            font-size:1.6rem;
                            line-height:2;
                            padding:.75em;
                        }
                        th {
                            text-align:left;
                            font-weight:500;
                            width:25%;
                        }
                    }
                }
            }
        }
    }
}

#introduction {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:40% 1fr;
                align-items:center;
                margin-bottom:60px;
                .detail {
                    width:calc(100% + 20px);
                    padding:30px 30px 30px 50px;
                    margin-left:-20px;
                    background-color:#F5F5F5;
                    display:grid;
                    align-content:center;
                    h3 {
                        font-size:2.2rem;
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                }
            }
        }
    }
}

@media (hover:hover) {
    
    section {
        .wrap {
            .contents {
                .btn {
                    transition-duration:.3s;
                    &:hover {
                        background-color:#000000;
                        color:#FFFFFF;
                    }
                }
            }
        }
    }
    
}

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

}

@media screen and (max-width:1024px){
    
    #message {
        .wrap {
            .contents {
                .contents_inner {
                    padding:30px;
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    section {
        .wrap {
            .contents {
                .btn {
                    font-size:1.4rem;
                }
            }
        }
    }
    
    #message {
        .wrap {
            .contents {
                .contents_inner {
                    padding:20px;
                    h2 {
                        font-size:min(5.6vw,2.4rem);
                    }
                    p {
                        text-align:left;
                    }
                }
            }
        }
    }
    
    #requirements {
        .wrap {
            .contents {
                table {
                    margin-bottom:30px;
                    tbody {
                        tr {
                            border-bottom:none;
                            th,td {
                                font-size:1.4rem;
                                line-height:1.8;
                                display:block;
                                width:100%;
                            }
                            th {
                                width:100%;
                                background-color:#EFEFEF;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #introduction {
        .wrap {
            .contents {
                max-width:500px;
                .contents_inner {
                    display:grid;
                    grid-template-columns:1fr;
                    align-items:center;
                    margin-bottom:30px;
                    .detail {
                        width:100%;
                        padding:20px;
                        margin-left:0;
                        h3 {
                            font-size:1.8rem;
                            margin-bottom:.66em;
                        }
                    }
                }
            }
        }
    }
    
}