/* -----main----- */

main{
width:910px;
height:450px;
padding:20px;

overflow-y:hidden;

}

#main_icon{
padding-top:0px;
padding-right:5px;
vertical-align:middle;
}

h2{
padding-top:0px;
padding-bottom:10px;
font-weight:normal;
font-size:100%;
}

#tanaka{
float:left;
margin-top:20px;
}

#tanaka_name span{
margin-left:40px;

}

#tanaka_prof{
width:500px;
}

article{
float:left;
margin-top:10px;
margin-left:20px;
margin-bottom:0px;
}

#photo{
float:left;
width:80%;
margin-top:5%;
}

.p2{
text-align:right;
}

#tanaka_ph{
width:18%;
float:right;
margin-bottom:20px;
}



@media screen and (max-width:500px){ /* max px以下の画面はここ */

main{
width:90%;
height:100%;
overflow-y:hidden;
order:4;
margin:20px auto;
display:flex;
flex-direction:column;
}

#tanaka{
clear:both;
width:60%;
height:60%;
margin-right:20%;
margin-left:20%;
}

article{
clear:both;
margin-top:10px;
margin-left:0px;
margin-bottom:20px;
}

#tanaka_name{
text-align:center;
}

#tanaka_name span{
display:block;
margin-top:10px;
margin-right:auto;
margin-left:auto;

}

#tanaka_prof{
width:100%;
margin-top:20px;
}

#photo{
order:2;
width:100%;
margin-top:0;
}

.p2{
clear:both;
text-align:left;
margin:0;
}

#tanaka_ph{
clear:both;
width:100%;
margin-top:10px;
margin-bottom:10px;
order:1;
}

}  /* ----- responsive ここまで ----- */