@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;700&display=swap');

body{
  margin:0;
  padding:0;
  width:100vw;
  background-image:url("img/background.png");
  background-repeat:repeat-y;
  background-size:100% auto;
  background-position:center top;
  font-family:"Zen Kaku Gothic Antique";
  font-style:normal;
}
a{
  text-decoration:none;
}

.box_img{
  border:.35vw solid #000000;
  border-radius:.8vw;
}
.box_text{
  border:.35vw solid #000000;
  border-radius:.8vw;
  background:#ffffff;
}
.box_point{
  border:.35vw solid #000000;
  border-radius:.8vw;
  background:#e8ff2d;
}

.text_small_normal{
  font-weight:400;
  font-size:2.5vw;
}
.text_small_bold{
  font-weight:700;
  font-size:2.5vw;
}
.text_middle_normal{
  font-weight:400;
  font-size:3.4vw;
  line-height:5vw;
}
.text_middle_bold{
  font-weight:700;
  font-size:3.4vw;
  line-height:5vw;
}

header{
  margin-top:5vw;
  margin-bottom:3vw;
  display:flex;
}
.header_icon{
  height:15.3vw;
  width:15.3vw;
}
.header_title{
  height:15.3vw;
  width:83.3vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"DotGothic16";
  font-style:normal;
  font-size:8.5vw;
  color:#ffffff;
  text-shadow:
    0.35vw 0 0 #000000,          0.343vw 0.068vw 0 #000000,
    0.323vw 0.134vw 0 #000000,   0.291vw 0.194vw 0 #000000,
    0.247vw 0.247vw 0 #000000,   0.194vw 0.291vw 0 #000000,
    0.134vw 0.323vw 0 #000000,   0.068vw 0.343vw 0 #000000,
    0 0.35vw 0 #000000,          -0.068vw 0.343vw 0 #000000,
    -0.134vw 0.323vw 0 #000000,  -0.194vw 0.291vw 0 #000000,
    -0.247vw 0.247vw 0 #000000,  -0.291vw 0.194vw 0 #000000,
    -0.323vw 0.134vw 0 #000000,  -0.343vw 0.068vw 0 #000000,
    -0.35vw 0 0 #000000,         -0.343vw -0.068vw 0 #000000,
    -0.323vw -0.134vw 0 #000000, -0.291vw -0.194vw 0 #000000,
    -0.247vw -0.247vw 0 #000000, -0.194vw -0.291vw 0 #000000,
    -0.134vw -0.323vw 0 #000000, -0.068vw -0.343vw 0 #000000,
    0 -0.35vw 0 #000000,         0.068vw -0.343vw 0 #000000,
    0.134vw -0.323vw 0 #000000,  0.194vw -0.291vw 0 #000000,
    0.247vw -0.247vw 0 #000000,  0.291vw -0.194vw 0 #000000,
    0.323vw -0.134vw 0 #000000,  0.343vw -0.068vw 0 #000;
}

nav{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
}
.nav_box{
  position:relative;
  width:24.3vw;
  height:5.3vw;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000000;
}
.nav_icon{
  position:absolute;
  top:1.7vw;
  left:1.8vw;
  width:2.7vw;
  height:2.7vw;
}

.main_top{
  margin-top:4vw;
  padding-top:8vw;
  display:flex;
}
.main_title{
  height:7.3vw;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:4.4vw;
}
.main_pattern{
  flex-grow:1;
  height:7.3vw;
}
.main_content{
  padding:5.4vw 0;
  width:99.3vw;
}
.main_icon{
  margin-top:.7vw;
  margin-left:4vw;
  height:4vw;
  float:left;
}

.introduction_pattern{
  background-image:url("img/pattern_introduction.png");
  background-size:auto 100%;
  background-position:right center;
}
.introduction_content{
  text-align:center;
}
.introduction_now{
    color:#e8ff2d;
    animation:nowblink .6s steps(1,end) infinite alternate;
}
@keyframes nowblink{
    0%{
        color:#e8ff2d;
    }
    50%{
        color:#000000;
    }
    100%{
        color:#e8ff2d;
    }
}

.skill_pattern{
  background-image:url("img/pattern_skill.png");
  background-size:100% auto;
  background-position:center center;
}
.skill_content{
  padding-bottom:2.6vw;
}
.skill_title{
  margin-bottom:0vw;
  display:flex;
}
.skill_list{
  margin-left:10.6vw;
  margin-bottom:2.8vw;
}
.skill_status{
    height:3.5vw;
    margin-bottom:-0.5vw;
}

.work_pattern{
  background-image:url("img/pattern_work.png");
  background-size:100% auto;
  background-position:right center;
}
.work_box{
  padding-top:4vw;
  padding-bottom:4.3vw;
  margin-bottom:1.8vw;
  width:99.3vw;
  color:#000000;
}
.work_img{
  margin-left:4vw;
  border:.35vw dashed #e8ff2d;
  border-radius:.8vw;
  width:13.3vw;
  height:13.3vw;
  float:left;
}
.work_title{
  margin-left:20vw;
}
.work_text{
  margin-left:22vw;
  margin-top:1.2vw;
}

.contact_pattern{
  background-image:url("img/pattern_contact.png");
  background-size:100% auto;
  background-position:right center;
}
.contact_content{
  padding-left:4.1vw;
  width:95.2vw;
}
.contact_link{
  color:#2300ff;
  text-decoration:underline;
}

footer{
  position:relative;
  margin-top:20vw;
  width:99.3vw;
  height:25.3vw;
}
.footer_text1{
  position:absolute;
  top:9vw;
  left:21.7vw;
}
.footer_text2{
  position:absolute;
  top:9vw;
  left:67.6vw;
}
.footer_counter{
  position:absolute;
  top:3.65vw;
  left:33.7vw;
  width:31.9vw;
  height:9.8vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#ffffff;
  border-radius:.8vw;
  font-family:"DotGothic16";
  font-style:normal;
  font-size:6vw;
}