@charset "utf-8";

body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #FFFFFF;
   letter-spacing : 0.1em;
}
header {
position: absolute;
    padding: 2px 22px;
    z-index: 98;
}
h1 {
   margin: 0; padding: 0;
}

/*menu*/
.menu{
    height: 52px;
    position: absolute;
    right: 22px;
    top: 40px;
    width: 55px;
    z-index: 99;
    cursor: pointer;
}
.menu__line{
    background: #000;
    display: block;
    height: 11px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 26px;
}
.menu__line--bottom{
    top: 52px;
}
.menu__line--top.active{
    background: #fff;
    top: 26px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    background: #fff;
    transform:scaleX(0);
}
.menu__line--bottom.active{
    background: #fff;
    top: 26px;
    transform: rotate(135deg);
}
/*gnav*/
.gnav{
    background: rgba(0,0,0,0.9);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu__item{
    margin: 40px 0;
}
.gnav__menu__item a{
    color: #fff;
    font-size: 3em;
    text-decoration: none;
    transition: .5s;
}
.gnav__menu__item a:hover{
    color: #666;
}
.gnav .gnav__wrap .gnav__menu {
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    line-height: 2em;
}
.mind{
position: relative;
    text-align: justify;
    line-height: 1.6em;
    top: 160px;
margin-left: 2.5em;
margin-right: 2.5em;
    color: #000;
    font-size: 0.9em;
    text-decoration: none; 
    z-index: 97;
}
.mind h2 {
    border-bottom:solid;
border-color:#000;
        border-width: 3px;
height: 25px;
    width: 61px;
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 1.6em;
}
.mind p {
   font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bolder
}
.skill{
position: relative;
text-align: justify;
    line-height: 1.6em;
    top: 170px;
    margin-top: 2em;
    margin-left: 2.5em;
margin-right: 2.5em;
    color: #000;
    font-size: 0.9em;
    text-decoration: none; 
    z-index: 97;
}
.skill h2 {
    border-bottom:solid;
border-color:#000;
    border-width: 3px;
    height: 25px;
    width: 51px;
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 1.6em;
}
.skill p {
   font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bolder
}
.skill p a {
     color: #000;
    text-decoration: none;
    border-bottom:solid;
border-color:#00FF92;
}
.profile_photo{
    position: relative;
top: 175px;
    margin-top: 2.4em;
    margin-left: 2.5em;
margin-right: 2.5em;
    z-index: 97;
}
.profile{
    position: relative;
text-align: justify;    
    line-height: 1.6em;
top: 153px;
    margin-left: 2.5em;
margin-right: 2.5em;
    color: #000;
    font-size: 0.9em;
    text-decoration: none; 
    z-index: 97;
}
.profile h2 {
    border-bottom:solid;
border-color:#000;
    border-width: 3px;
    width: 84px;
    height: 25px;
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 1.6em;
}
.profile p {
   font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bolder
}
body small {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
        font-size: 0.8em;
letter-spacing : 0em;
    z-index: 98;
}

.works{
position: relative;
top: 160px;
    text-align: justify;    
    line-height: 1.4em;
    margin-left: 2.5em;
margin-right: 2.5em;
    color: #000;
    font-size: 0.9em;
    text-decoration: none; 
    z-index: 97;
}
.works h2 {
   border-bottom:solid;
border-color:#000;
    border-width: 3px;
    width: 73px;
    height: 24px;
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 1.6em;
}
.works p a {
    color: #000;
    text-decoration: none;
    border-bottom:solid;
border-color:#00FF92;

}
.works p {
   font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bolder
}
.junbityu{
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
}