@charset "utf-8";

/*
body {
    font-size: 16px;
    margin: 0;
    color: #5C5C5C;
    font-family: 'Verdana','Hirafino Sans','Meiryo','sans-serif';
}

#container{
    width: 390px;
    height: fit-content;
}
*/
body {
    font-family: 'Verdana','Hirafino Sans','Meiryo','sans-serif';
    font-size: 16px;
    color: #5C5C5C;
    line-height: 1.5em;
    background-color: #f0d3ce;
    height: max-content;
    }

    #container{
        background-color: #ffffff;
        margin: 0 auto;
        width: 100%;
        max-width :390px;
        height: fit-content;
        text-align: left;
     }
     
     html, body {
        margin: 0px;
        padding: 0px;
       }
       


header {
    background: url(image/hd.svg) no-repeat center top/cover;
    width: 390px;
    height: 116px;
    margin: 0 0 14px 0;
    padding: 0;
}

header h1{
    margin: 0;
}

header h1 img{
    margin: 20px 0 0 29px;
}


.top_btn {
    display: flex;
    justify-content: flex-end;
}

.top_btn p{
    background-color: #D1A862;
    margin-top: 0px;
    border-radius: 3px;
    color: #ffffff;
    margin-bottom: 10px;
}

.top_btn p:hover{
    filter: brightness(110%);
}

.f_btn{
    padding: 0 13px 0;
}

.msg_btn img{
    padding: 4px 8px 0;
}

.msg_btn{
    margin-right: 23px;
    margin-left: 6px;
}

.profile {
    display: flex;
}

.num_ff {
    display: flex;
    justify-content: center;
}

nav {
    display: flex;
}

footer {
    display: flex;
    justify-content: space-around;
    margin: 0;
}

footer p{
    color: #ffffff;
    background-color: #5C5C5C;
    margin: 0;
    flex-basis: 78px;
    text-align: center;
    font-size: 12px;
    border-radius: 8px 8px 0 0;
    height: 80px;
}

.profile_l{
    flex-basis:  162px;
    align-self: flex-end;
}

.profile .icon{
    margin-top: 0;
    margin-bottom: 9px;
    text-align: center;
}

.profile .icon img{
    border-radius: 50%;
}


.profile .num_ff p{
    text-align: center;
    line-height: 1.2;
    margin: 0 12px 0 12px;
}

.profile .num_ff span{
    font-size: 12px;
}

.profile h2{
    font-size: 24px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 10px;
}

.profile .intro{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 4px;
}

.profile_r{
    flex-basis: 228px;
}

main nav{
    justify-content: space-around;
    margin-bottom: 24px;
}

/*main nav h3{
    flex-basis: 128px;
    margin-top: 0;
    background-color: #C46E6E;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    color: #ffffff;  
}
*/
.records h4.title_r{
    font-weight: normal;
    font-size: 18px;
    margin: 0 19px 20px;
    border: #C46E6E solid 2px;
    border-radius: 3px;
    height: 110px;
    position: relative;
    line-height: 110px;
}

.records h4.title_r span{
    display: block;
    width: 218px;
    height: 110px;
    padding: 0 0 0 36px;
    margin-left: 13px;
    border-left: #C46E6E solid 21px;
    border-right: #C46E6E dashed 2px;
}



.abs::before{
    content: "";
    display: block;
    background: #ffffff;
    height: 32px;
    width: 390px;;
}

.abs{
    position: sticky;
    top: 88px;
    background-color: #ffffff;
    z-index: 1;
}

footer p span{
    display: block;
    padding: 9px;
}


/*固定*/

header{
    position: sticky;
    top:0;
    z-index: 2;
}
footer{
    position:sticky;
    bottom: 0;
    background-color: #ffffff;
}
main{
    flex-grow: 1;
}




.btn-nav{
    display: flex;
    justify-content: space-between;
}
.btn-nav label{
    display: block;
    width: 130px;
    height: 50px;
    line-height: 50px;
    background: #C46E6E;
    color: #ffffff;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px 8px 0 0;
    font-size: 20px;
    font-weight: normal;
}
.btn-nav input:checked+label{
    background: #ffffff;
    color: #C46E6E;
    border: #C46E6E solid 2px;
    border-bottom: none;
    font-size: 20px;
    line-height: 50px;
    font-weight: normal;
}
.btn-nav input{
    display: none;
}


a{
    color:inherit;
    text-decoration: none;
}

nav a{
    display: block;
}

.records h4{
    display: flex;
}

.records h4 img{
    width: 11px;
    margin: auto;
}



/*post*/
.posts p{
    margin: 0 20px;
    padding:  20px 40px 20px 40px;
    border-bottom: #C46E6E solid 1px;
}


/*mediahtml*/
.medias{
    display: flex;
    margin-left: 34px;
    margin-right: 34px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.medias p{
    margin-top: 0;
    margin-bottom: 20px;
}

.medias p img{
    border-radius: 10px;
}