@charset "utf-8";
h2{margin:30px auto;}
@media only screen and (min-width:600px) {
h2{margin-top:40px;}
}
@media only screen and (min-width:768px) {
h2{margin-top:120px;}
}
@media (orientation: landscape) and (min-width:960px){
h2{margin:120px 0 30px;}
}
h3{margin-top:20px; font-family: 'Kanit', sans-serif; font-weight:300; font-size:2.2rem;}
#biographybox{padding:30px 0;}
#biographybox .photo{max-width:1200px; margin:0 auto;}
#biographybox p{padding:0 20px; text-align:left; max-width:750px; margin:0 auto; line-height:2;}
#member p{text-align:center; font-weight:300;}
#biographybox ul{text-align:left; max-width:750px; margin:0 auto;}
#biographybox ul li{margin-bottom:16px; font-size:1.5rem; font-weight:300;}
#biographybox ul li span{display:block; font-family: 'Kanit', sans-serif; font-weight:300; font-size:1.5rem;}

.pc{display:none;}
#biographybox .profbox{margin:0 auto; margin-top:30px; background:rgba(36, 36, 36, 1); max-width:800px; padding:20px 0; text-align:left;}
#biographybox .profbox p{text-align:left; font-size:1.4rem; 
line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict; font-weight:300;}


.profilebox{margin-top:60px; font-weight:300;}
.profilebox h4{display:block; max-width:800px; margin:0 auto 8px; background:rgba(36, 36, 36, 1);  padding:20px 20px; text-align:left; font-size:1.7rem;}
.profilebox h4 span{display:block; font-family: 'Kanit', sans-serif; font-weight:300; font-size:14px; font-size:1.4rem;}
.profilebox .biobox{display:flex; flex-wrap:wrap; max-width:800px; margin:0 auto; padding:0 20px;}
.profilebox .biobox .image{order:1; width:100%; margin:16px auto;}
.profilebox .biobox .text{order:2;}
 .profilebox .biobox .image img{max-width:250px; margin:0 auto;}

@media only screen and (min-width:600px) {
#member p{text-align:center;}
.pc{display:block;}
.profilebox h4 span{display:inline-block; margin-left:8px;}
#biographybox .profbox p{text-align:center; padding:0 20px 0 0;}

.profilebox .biobox .image{width:250px; margin-top:8px;}
.profilebox .biobox .text{flex:1;}
}
@media only screen and (min-width:900px) {
#biographybox p{text-align:center; font-size:1.5rem;}
#biographybox .profilebox p{text-align:left;}
}