@charset "utf-8";

html,body{
    margin: 0px;
    padding: 0px;
}
body {
    font-family: "Noto Serif JP", serif; 
    font-size: 1em; 
    line-height:1.8em; 
    background-color:#FF9364; 
}
#container{
    background-color:#FFCAA4;
    color: #E15519;
    font-size: 1em;
    font-family: sans-serif;
    padding-top: 5px;
    width: 400px;
    height: 100px;
}
#head_title{
    background-color: #FFC85F;
    width: 300px;
    height: 100px;
}
#profile_photo{
    margin-top: -20px; 
}

.photo_radius{
    width: 80px; 
    height: 80px; 
    border-radius: 50px; 
    object-fit: cover; 
    border: solid 3px ; 
}
#profile_name{
    background-color: #FFFFFF;
    margin: 0 auto; /* 上限は隙間なく、左右は中央に配置 */
    margin-bottom: 5px; /* このブロックは下に5ピクセル空ける */
    font-size: 0.8em; /* 文字サイズ */
    font-family:sans-serif;
    font-weight: normal; /* 文字の太さ */
    letter-spacing: 0.2em; /* 字間すこーし空ける */
}
#maintxt{
    background-color:#FFFFFF;
    width: 300px;
    height: 100px;
    padding:0px;
    border: 3px solid black;
}
#box1,#boox2,#box3{
    width: 50px; 
    height: 50px; 
    margin:10px;
    font-size: 0.2em;
    text-align: center;
    border-radius: 10px;
}
#maintext,#box1,#box2,#box3{
    margin: 0px
}
.box1{background-color:#FF814B;}
.box2{background-color: #FFC85F;}
.box3{background-color: #FFE071;}

.box1,.box2,.box3{
    display: flex;
}