body{
        background-color: rgb(183, 183, 183);
        width: 100%;
        height: 100%;
        margin-inline: auto;

        font-family: "DotGothic16", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
        h2{
        text-align: center;
        color: #0D0D0D;
        font-weight: bolder;
        font-size: 2rem;
        padding: 2rem 0 3rem;
    }
    .wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 100vh; /* 画面の高さ100% */
    }
    main{
        /* flex: 1; 残りの高さをすべて埋める */
        padding-bottom: 7rem;
    }
    img{
        max-width: 100%;
    }

    .jsFrame{
        max-width: 500px;
        width: 80%;
        aspect-ratio: 1/1.1 ;
        /* background-color: #A6CCC6 ; */
        background-image: url(../images/skin.PNG);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 16px;
        position: relative;
        margin-inline: auto;
        margin-bottom: 2rem;
    }
    .jsFrame img{
            max-width: 100%;
            height: auto;
            position: absolute;
            inset: 0;
            margin: auto;
    }
    .buttonBox{
        display: flex;
        gap: 2rem;
        justify-content: center;
    }
    .buttonBox .changeButton{
            background-color: #0D0D0D;
            color: #ffffff;
            padding: 0.5rem 2rem;
            border-radius: 1rem;
            border: none;
    }
    .button{
        text-align: end;
        width: 90%;
        margin-inline: auto;
        padding-left: 3rem;
        padding-top: 3rem;
    }

    footer{
    width: 100%;
    background-color: #041A01;
    color: #ffffff;
    margin: 4rem 0 0;
    padding: 0.5rem 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;

}

@media screen and (max-width: 500px) {
       .wrapper{
            width: 95%;
            margin-inline: auto;
        }
        .jsFrame{
            width: 90%;
        }
        .buttonBox{
        width: 30%;
        margin-inline: auto;
        gap: 1rem;
        }
        .buttonBox .changeButton{
            width: 5rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            font-size: 0.8rem;
        }
	
}