@charset "UTF-8";

/* common */
body {
  margin: 0;
}

img {
  vertical-align: bottom;
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  color: #ffffff;
}

a {
  color: #0073e6;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #ff6600;
}

.wrapper {
  max-width: 600px;
  margin:0 auto;
  padding: 30px 4%;
}

.skill_set {
  padding-bottom: 350px;
}

/* .explanation {
  margin-top: 70px;
} */

/* header */
header {
  text-align: center;
  background-image: url('../images/yozora.jpg');
}

.photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin :20px 0;
  box-shadow: 10px 10px 20px rgb(242, 255, 3);
  opacity: 0;
  /* 画像浮かび上がるstart */
  transform: translateY(20px);
  animation: fadeInUp 3.5s ease-out forwards;
  /* 画像浮かび上がるend */
}

/* 画像浮かび上がるstart */
@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
/* 画像浮かび上がるend */

/* main */
h2 {
  text-align: center;
}
.myskills {
  background-color: #dbdada;
}

.myskills ul {
  margin-top: 30px;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}


.skill_html {
  background-color: #e44d26;
}

.skill_css {
  background-color: #1572d6;
}

.skill_php {
  background-color: #5600eb;
  margin-top: 10px;
}

.skill_js {
  background-color: #ebbc00;
}

.skill_python {
  background: linear-gradient(310deg, #0c69ff 40%, #ffe205 60% );
  display: block;
  margin-top: 10px; /* 必要に応じて調整してください */
}

.skill_Laravel {
  background-color: #ff5338;
}

.skill_MySQL {
  background: linear-gradient(310deg, #3884ff 40%, #ff8c00 70% );
}

/* フェードの設定 start */
.fade_tag {
  transition: opacity 3s ease-in-out;
  background-color: #dbdada;
  position: relative;
}

.fade_tag h2, .fade_tag ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.fade_tag h2 {
  top: 50%;
}

.fade_tag ul {
  top: 70%; /* 例: 親要素よりも下に配置 */
  bottom: -50px; /* 例: bottomに50px伸ばす */
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

.fade_header1_size {
  width: 300px;
}

#fade_2 {
  opacity: 0;
}
#fade_3 {
  opacity: 0;
}

.fade_out1 {
  color: #f3f3f3;
}
.fade_out2 {
  color: #f3f3f3;
  margin-top: 30px;
}
.fade_in2 {
  margin-top: 30px;
}
.fade_out3 {
  color: #f3f3f3;
  margin-top: 60px;
}
.fade_in3 {
  margin-top: 60px;
}

/* ロードゲージのアニメーションの表示 */

.gauge {
  width: 200px; /* ゲージの幅 */
  height: 20px; /* ゲージの高さ */
  background-color: #ccc; /* ゲージの背景色 */
  position: relative;
  overflow: hidden;
}

.fill {
  height: 100%;
  background-color: #4caf50; /* ゲージの色 */
  animation: fillAnimation 8s linear infinite;
}

@keyframes fillAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}



/* フェードの設定 end */

.myskills ul li {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.3s ease;
  /* box-shadow: 10px 10px 10px rgb(255, 255, 255); */
}

#use_skill {
  margin-top: 120px;
}




.works_box {
  max-width: 450px;
  margin: 40px auto;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s, transform 1s;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 10px 10px 20px rgb(251, 252, 218);
}

.works_box li {
  margin-top: 10px;
}

.works_image {
  width: 100%;
  height: auto;
}

.works_box h3 {
  margin-top: 10px;
}

.works_box p {
  margin-top: 7px;
}

.link {
  text-align: center;
}


/* footer */
footer {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
}