.container {
    margin: 0 auto;
    max-width: 800px;
}

header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    background-color: rgb(131, 238, 240);
}

.charactor {
    width: 300px;
    height: 300px;
    /* background-color: brown; */
    text-align: center;
    margin: 10px auto; /* 中央に表示 */
    border: 2px solid blue;
}

.namechange {
    margin: auto;
}

img {
    width: 300px;
    height: 300px;    
}

.name_area {
    display: grid;
    grid-template-columns: 200px 200px;
    margin: 0 auto;
    /* border: 2px solid blue; */
    text-align: center;
}

.point_area {
    width: 300px;
    display: grid;
    grid-template-columns: 6fr 2fr 1fr 2fr;
    background-color: aqua;
    margin-left: auto; /* 右に寄せる */
    /* border: 1px solid red; */
}

.point {
    justify-self: end; /* 右添え */
}

.point_button {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 600px;
　font-size: medium;
    }
}

.click_button {
    margin: 0 30px;
}

main p {
    margin: 10px auto;
    text-align: center;
    /* border: 1px solid red; */
}

.bunpai {
    width: 600px;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.reset {
    border: 1px solid red; 
    display: grid;
    width: 150px;
    margin: 10px 0 0 auto;
}

.colectlist {
    display: grid;
    width: 500px;
    grid-template-columns: 100px 100px 100px 100px 100px;
    margin: 10px auto;
}

.imglist {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

@media screen and (max-width: 600px) {
    .point_button {
        margin: 10px auto;
        /* display: block; */
        width: 300px;
    }
    .bunpai {
        margin: 10px auto;
        display: block;
        width: 300px;
    }
    .colectlist {
        margin: 10px auto;
        display: grid;
        width: 300px;
        grid-template-columns:1fr 1fr 1fr;
    }
    .click_button {
        padding: 10px;
        margin: 0 auto;
    }
    header p {
        margin: 0;
    }
    .name_area {
        width: 300px;
        margin: 0 auto;
        display: grid;
        grid-template-columns:1fr 1fr;
    }
}