.prof .prof-content{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:6%;
	margin: auto;
}

.my-pic{
	background-image: url(../image/image1.png);
    background-size: 200px 200px;
	width: 200px;
	height: 250px;
	margin-left: 50px;
}
.prof-sentens{
	text-align: left;
}
.prof-sentens ruby{
    ruby-position: under;
}
.prof-sentens rt{
    font-size: 12px;
    transform: translateY(0.5em);
}
.prof-text{
	padding-top: 20px;
    width: 470px;
    text-align: justify;
}
#skill .skill-group{
	display: flex;
    align-items: center;
    justify-content: center;
	gap:200px;
	margin-top: 54px;
}
#skill .san-blank{
	margin-top: 90px;
}
#skill .yon-blank{
	margin-top: 125px;
}
.skill-content{
	width: 380px;
	height: 286px;
}
.skill-content p{
	width: 360px;
	text-align: center;
    margin: auto;
}
.skills-pic{
    background-size: 84px 84px;
	width: 84px;
	height: 84px;
	margin: auto;
	
}
.photo{
	background-image: url(../image/image2.png);
}
.illust{
	background-image: url(../image/image3.png);
}
.xd{
	background-image: url(../image/image4.png);
}
.premier{
	background-image: url(../image/image5.png);
}
.aftereffect{
	background-image: url(../image/image6.png);
}
.html{
	background-image: url(../image/image7.png);
	background-size: 84px 68px;
}
.jquery{
	background-image: url(../image/image8.png);
}
.wordpress{
	background-image: url(../image/image9.png);
}
#skill{
	text-align: center;
}
#skill h3{
	padding-top: 12px;
}
#skill h4{
	padding-top: 12px;
	padding-bottom: 24px;
}
#skill span{
	color: #fdda72;	
}
@media screen and (max-width: 800px) {
   
.prof .prof-content{
	flex-flow: column;
	align-items: center;
	gap:0%;
}    
.my-pic{
    background-size: 120px 120px;
	width: 120px;
	height: 120px;
	margin-left: 0px;
}
.prof-sentens{
    margin-top: 32px;
	text-align: center;
}
.prof-sentens p{
	text-align: left;
}

.prof-text{
	padding-top: 16px;
     width: 280px;
    text-align: justify;
}
    .prof-sentens ruby{
    ruby-position: over;
}
.prof-sentens rt{
    font-size: 8px;
    transform: translateY(0em);
}
    
#skill .skill-group{
    flex-flow: column;
    align-items: center;
    justify-content: center;
	gap:0px;
    row-gap:50px;
	margin-top: 50px;
} 
 #skill .san-blank{
	margin-top: 70px;
    row-gap:80px;
}
#skill .yon-blank{
	margin-top: 100px;
    row-gap:100px;
}
#skill h2{
	margin-top: 100px;
}

.skills-pic{
    background-size: 84px 84px;
	width: 84px;
	height: 84px;
	margin: auto;
}
.html{
	background-image: url(../image/image7.png);
	background-size: 84px 68px;
}
.skill-content{
	width: 280px;
	height: 280px;
}
.skill-content p{
	width: 280px;
	text-align: center;
    margin: auto;
}

#skill h3{
	padding-top: 12px;
}
#skill h4{
	padding-top: 12px;
	padding-bottom: 24px;
}
}