@charset "utf-8";

html{
    font-family: 'Courier New', Courier, monospace;
}
.wrap {
    display: flex;
    font-size: 1.3rem;
    width: 90%;
    max-width: 1400px;
    margin-left: 50px;
    position: fixed;
    align-items: flex-end;
  }
.container {
    width: 100%;
    height: 100vh;
    background-color: #b4c6b4;            /* 背景色 */
    /* background-image: url("https://lh3.googleusercontent.com/Hc4Hqe2GXMtQfJNDY3rveKPb7CoedRq58u2QbiU0dO7xPAp4xkzlKN0imn_GpmuMeJ7s3gYIyskTQsxr72v4DB5eW2ZRF1Ew6Lae-l6ICKzN2J5hiSGTAUxniFEXv39wX_EOflDSUQ8a1FncKdaXiH7wbVP5nqWHZwn4OVH3r8PqHVF-6hb2PYZhIzMToXVfc1vYw0DwlVnjbKD0aOrK2yVS3TpbOu82PZH4dnQzLjnyvM4_eT1tdGDT_Yw6oaULEOEE6O1rXpV3UsUk4MrWYEALKiARHz7Lx-PfkKbHTFwAlqjNhdK8fNCuMXM3aBA8fKMGUnNf_k3dlVp1VOdfZ1b8WsxkekAk0pU1n0SrmNPDh7sa8BBGIRSx4z-TZnYsSXAY3mhn0gNmngWYBH2kdO_gYmGeUt78DeZKWIwN4JTMR6_VS-brweV0SRGyXtA1kLD53B7BnqOXJvwEeAgobseWZVvDhYrOBSDIvbv-AN79KrweDE7eHx2V0glErcSBVwlbrtQB4znRqtYaVrF9_Jvh5gCI11JFoUcbbDm86SFzkg-9BY3dH4YBmvGIxqzahQkNlpP35hdEn30aUr5Ms8MlR650XLcSJkI2sVanJCZUuT4YX3c3sG-9DwIiL1YkZdJ7WitMzVOPMpvyeZZWdJJoywBUvz_MaMm67yP7zrDrvEz16n_MO00eOJDdYZdhr6GXo9pA9VyvFZLPcchKNvYnA-B5dHmfXgyaqAJl3jLPrAdFNaiWd7mamp23u86607TpR7Itq0f5mnG9KzTwpMp43VnEOip_Jow7kQIQZZRKtbPbKuXV1dT02l2mzdksyf6mkzelqNRBtshgWm_AQdu-UKwDs2uboB7J6-V5JWwLdAjgA035rok-pmf7vFeianTcg_A-hemZ95Hg8mfHppGeteJGq4m8lsYvqhQ85MQn_A=w1920-h1440-s-no?authuser=0"); 画像 */
    background-size: cover;               /* 全画面 */
    background-attachment: fixed;         /* 固定 */
    background-position: center center;   /* 縦横中央 */
    
}
.container {
    animation: img_anime 20s ease infinite;
    
}


@keyframes img_anime {
    0% {
        background-image: url("../images/pc.jpg");
    }
    20% {
        background-image: url("../images/pc.jpg");
    }
    35% {
        background-image: url("../images/mypicture.JPG");
    }
    53% {
        background-image: url("../images/mypicture.JPG");
    }
    68% {
        background-image: url("../images/beer.jpg");
    }
    85% {
        background-image: url("../images/beer.jpg");
    }
    100% {
        background-image: url("../images/pc.jpg");
    }
}
@media(max-width :750px){
    .container{animation: img_anime_sp 20s ease infinite;}
  @keyframes img_anime_sp {
    0% {
        background-image: url("../images/pc_sp.jpg");
    }
    20% {
        background-image: url("../images/pc_sp.jpg");
    }
    35% {
        background-image: url("../images/mypicture_sp.jpg");
    }
    53% {
        background-image: url("../images/mypicture_sp.jpg");
    }
    68% {
        background-image: url("../images/beer_sp.jpg");
    }
    85% {
        background-image: url("../images/beer_sp.jpg");
    }
    100% {
        background-image: url("../images/pc_sp.jpg");
    }
 }
}
  
header {
    width: 100%;
    height: 100px;
    margin-top: 100px;
    display: flex;
}
h1{
    font-size: 1.5rem;
}
h3{
    margin-left: 20px;
}
.nav{
    display: flex;
    margin: 0 0 0 auto;
}
.nav_ul{
    width: 90%;
    display: flex;
    position: fixed;
    margin-left: 20px;
}
.nav_li{
    color: rgb(8, 8, 8);
    font-size: 1.3rem;
    margin-left: 50px;
    border-top: solid 2px;
}

.profile{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
}
.profile_body {
    width: 100%;
    background-image: url(../images/背景.jpg);
    background-size: cover;               /* 全画面 */
    background-attachment: fixed;         /* 固定 */
    background-position: center center;   /* 縦横中央 */
}
.profile_h2{
    font-size: 1.8rem;
    font-weight: bold;
    margin: 100px;
    text-align: center;
    width: 60%;
}
.profile_ul{
    margin:0 auto;
}
.profile_li{
    margin-bottom: 30px;
    margin-left: 50px;
}    

/* skill.html */
.radar-chart-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    padding: 35px;
    box-sizing: content-box;
}

.radar-chart-003 svg {
    width: 100%;
    height: 100%;
}

.radar-chart-003 dl {
    position: absolute;
    width: 100%;
    height: 100%;
}

.radar-chart-003 dl > div {
    position: absolute;
    color: #343333;
    font-size: .8em;
    text-align: center;
}

.radar-chart-003 dl > div:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.radar-chart-003 dl > div:nth-child(2) {
    top: 24%;
    right: 10%;
    transform: translateX(50%);
}

.radar-chart-003 dl > div:nth-child(3) {
    bottom: 24%;
    right: 10%;
    transform: translateX(50%);
}

.radar-chart-003 dl > div:nth-child(4) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.radar-chart-003 dl > div:nth-child(5) {
    bottom: 24%;
    left: 10%;
    transform: translateX(-50%);
}

.radar-chart-003 dl > div:nth-child(6) {
    top: 24%;
    left: 10%;
    transform: translateX(-50%);
}

.radar-chart-003 dd {
    margin: 0;
}

.skill_h2{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin: 70px;
}

.skill_body {
    width: 100%;
    background-image: url(../images/背景.jpg);
    background-size: cover;               /* 全画面 */
    background-attachment: fixed;         /* 固定 */
    background-position: center center;   /* 縦横中央 */
}
.radar-chart-003{
    margin-bottom: 50px;
}

/* works.html */
.works_body {
    width: 100%;
    background-image: url(../images/背景.jpg);
    background-size: cover;               /* 全画面 */
    background-attachment: fixed;         /* 固定 */
    background-position: center center;   /* 縦横中央 */
}
.works {
    margin: 80px;

}
.works img{
    width: 35%;
}
.works p{
    font-size: 1.8rem;
    margin-left: 55px;
    margin-top: 20px;
}
/* 　form.html */

.form_h2{
   margin: 0 auto;
   text-align: center;
  }
.form_a{
    font-size: 1.3rem;
    margin-left: 10px;
    position: fixed;
    color: #121312;
}  
  
.input-area {
    margin-bottom: 20px;
    text-align: center;
  }
 input[type="text"],input[type="email"],select {
    width: 300px;
    height: 30px;
  }
 textarea {
    width: 400px;
    height: 200px;
  }
 p {
    font-weight: bold;
    font-size: 20px;
  }
.btn-border {
    display: inline-block;
    max-width: 180px;
    text-align: left;
    border: 2px solid #121312;
    font-size: 15px;
    color: #141413;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    transition: .4s;
  }
 .btn-border:hover {
    background-color: #595a58;
    border-color: #121312;
    color: #FFF;
  }



@media screen and (max-width: 780px) {
    h1{
        font-size: 1.5rem;
    }
    .wrap{
        color: #0d0d0df5;;
        width: 50%;
        margin-left: 20px;
        margin-top: 60px;
    }
    .nav_ul{
        display: block;
    }

    .nav{
        position: fixed;
        width: 250px;
        top: 0;
        right: -250px;
        background-color: rgba(33,33,33,.9);
        height: 100%;
        padding-top: 60px;
      }
    
    .nav ul li{
      width: 100%;
      margin-bottom: 10px;
    }
    
    .nav ul li a{
        color: #ffffff;
        padding-left: 20px;
      }
    
    .btn_navi{
        position: fixed;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 24px;
        z-index: 3;
        cursor: pointer;
        transition: all 400ms;
        -webkit-transition:all 400ms;
      }
    
    .btn_navi span {
          position: absolute;
          width: 30px;
          height: 4px;
          background: #c3bfbf;
          border-radius: 10px;
          -webkit-transition: all 400ms;
          transition: all 400ms
      }
    
    .btn_navi span:nth-child(1){
        top: 0;
      }
    
    .btn_navi span:nth-child(2){
        top: 10px;
      }
    
    .btn_navi span:nth-child(3){
        top: 20px;
      }
    
    .btn_navi.hb-open{
        transform: rotate(180deg);
        -webkit-transform:rotate(180deg);
      }
    
    .btn_navi.hb-open span{
        background: #fff;
      }
    
    .btn_navi.hb-open span:nth-child(1){
        width: 24px;
        transform: translate(-7px,17px) rotate(45deg);
        -webkit-transform: translate(-7px,17px) rotate(45deg);
      }
    
    .btn_navi.hb-open span:nth-child(3){
        width: 24px;
        transform: translate(-7px,-17px) rotate(-45deg);
        -webkit-transform: translate(-7px,-17px) rotate(-45deg);
      }

      .profile_li {
        margin-left: 35px;
      }

      .works p{
        font-size: 0.8rem;
        margin: 1vw;
      }
}