@charset "utf-8";

main{
    position:relative;
    display:block;
    width:100%;

    box-sizing:border-box;
    padding-bottom:5px;
}
.area{
    position:relative;
    margin-bottom:5px;
}
#area_1{
    height:fit-content;
}
#area_2{
}
#sns_space{
    display:flex;
    justify-content: center;
    width:100%;
    height:100%;
    background-color:black;
}
#area_4{
    
}
#area_4 iframe{
    padding:5px;
    width:100%;
    height:400px;
}

#read_dog{
    display:flex;
    flex-direction:column;
}
.read_bold{
    font-weight:bold;
    font-size:1.1em;
    text-align:center;
}
#read{
    position:relative;
    box-sizing:border-box;
    background-color:white;
    border-radius:10px;
    width:100%;
    padding:10px;
    border:black solid 0.5px;
}
#coop{
    position:relative;
    width:60px;
    height:60px;
    bottom:0px;
    right:0px;
}
#dog_space{
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
    height:200px;
    box-sizing:border-box;
    border-radius:10px;
    background-color:rgba(0,0,0,0.8);
    padding:10px;
    justify-content: center;
}
#dog_title{
    position:relative;
    box-sizing:border-box;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:white;
    font-weight:bold;
    margin-right:10px;
}
#dog_title img{
    position:relative;
    border-radius:50%;
    width:120px;
    background-color:white;
}
#dog_talkSpace{
    width:100%;
    background-color:white;
    box-sizing:border-box;
    padding:5px;
}

#read_col{
    display:block;
    box-sizing:border-box;
    padding-top:0.5rem;
    border-top:0.25px black solid;
}
@media screen and (min-width:600px){
    main{
        display:block;
    }
}
@media screen and (min-width:1024px){
    main{
        display:grid;
        grid-template-rows: 50% 50% ;
        grid-template-columns: 50% 50%;
        height:calc(100% - 230px);
    }
    #sns_space{
        overflow-y:scroll;
    }
    #read_dog{
        flex-direction: row;
    }
    #read_area{
        width:50%;
        margin-right:30px;
    }
    #index_dog{
        width:50%;
    }
    #rowNo2{
        flex-direction: row;
    }
    #twitter_space{
        width:50%;
        margin-right:30px;
        margin-bottom: 0;
    }
    #area_4 iframe{
        padding:5px;
        width:100%;
        height:100%;
}
}