html {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    background-color: #fffffc;
    min-height: 100%;
}
/*スマホ用画像非表示*/
.mobileImg{
    display: none;
}
/*PC用画像表示*/
.pcImg{
    display: block;
}
/*フォントを追加*/
@font-face {
    font-family: "０７ロゴたいぷゴシック７";
    src: url(font/ロゴたいぷゴシック.otf);
}
@font-face {
    font-family: "０７ロゴたいぷゴシックCondense";
    src: url(font/07LogoTypeGothic-Condense.ttf);
}
#backgroundImg_top{
    width: 50%;
    height: 100%;
}
#left_bulue{
    /*左上*/
    width: 3%;
    height: auto;
    position: absolute;
    top: 10%;
    left: 20%;
}
#left_orange{
    /*左中央上*/
    width: 5%;
    height: auto;
    position: absolute;
    top: 25%;
    left: 5%;
}
#left_pink{
    /*左中央下*/
    width: 5%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 14%;
}
#left_purple{
     /*左下*/
     width: 3%;
     height: auto;
     position: absolute;
     top: 71%;
     left: 4%;
}
#right_purple{
    /*右上*/
    width: 3%;
    height: auto;
    position: absolute;
    top: 10%;
    left: 77%;
}
#right_pink{
    /*右中央*/
    width: 5%;
    height: auto;
    position: absolute;
    top: 25%;
    left: 88%;
}
#right_bulue{
    /*右下*/
    width: 5%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 80%;
}
#right_orange{
       /*右下*/
       width: 3%;
       height: auto;
       position: absolute;
       top: 72%;
       left: 92%;
}
.pic1{
    animation:example 3s infinite;
}
@keyframes example {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
} 
.pic2{
    animation:example2 2s infinite;
}
@keyframes example2 {
    0% {
        transform:rotate(360deg);
    }
    100% {
        transform:rotate(0deg);
    }
} 
/*タイトル全体ののフォントと色を指定*/
.title{
    color: #765c47;
    font-family: "Arial Black";
}
.item{
font-family: "０７ロゴたいぷゴシックCondense";
color: #765c47;
}
.topPage{
    text-align: center;
    position: relative;
}

#titlePortfolio{
    font-size:  8vw;
    position: absolute;
    top: 27%;
    left: 31%;
}
.links{ 
    position: relative;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 34%;
}
.link{
    position: relative;
    color: #765c47;
    margin:0.9vw;
    font-size: 1.8vw;
    font-family: "０７ロゴたいぷゴシック７";
    text-decoration: none;
}
.link:hover{
    color: #ffa931;
}
/*トップページのフェードインアニメーション*/
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    animation-delay: 0.55s; 
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    /*.titleFadeIn{
        animation-name:titleFadeInAnime;
        animation-duration:3s;
        animation-fill-mode:forwards;
        animation-delay: 0.55s; 
        opacity:0;
        }
        
        @keyframes fadeInAnime{
          from {
            opacity: 0;
          }
        
          to {
            opacity: 1;
          }
        }
    /*.titleFadeIn{
        animation: 1.5s forwards anim1;
    }
    @keyframes anim1 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }*/
    /*タイトルをスクロールでフェードイン*/
    /*.titleFadeIn {
        opacity: 0;
      }
    .titleFadeIn.active {
        opacity: 1;
        animation: fadeIn 2s;
      }
      @keyframes fadeIn {
        0% {
          opacity: 0;
          transform: translateY(100px);
          transition-duration: 1s;
        }
        100% {
          opacity: 1;
          transform: translateY(0px);
          transition-duration: 1s;
        }
      }*/
.profile{
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
}
.titleProfile{
    font-size:  6vw;
    position: absolute;
    top: 8%;
    left: 15%;
}
#backgroundImg_profile{
    width: 100%;
    height: 100%;
}
#items{ 
    text-align: center;
    position: absolute;
    top: 37%;
    left: 35%;
}
.profileitem{
    margin:10px;
    font-size:3.2vw;
}
.skills{
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
}
.titleskills{
    font-size:6vw;
    position: absolute;
    top: 10%;
    left: 16%;
}
#backgroundImg_skills{
    width: 100%;
    height: 100%;
}
#skillsitems{ 
    text-align: center;
    position: absolute;
    top: 37%;
    left: 24%;
}
.skillsitem{
    margin:10px;
    font-size:3.2vw;
}
.works{
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
}
#backgroundImg_works{
    width: 100%;
    height: 100%;
}
.titleWorks{
    font-size:  6vw;
    position: absolute;
    top: 8%;
    left: 15%;
}
/*.worksImages{
    align-items: center;
}*/
#sun{
    width: 18%;
    height: auto;
    position: absolute;
    top: 40%;
    left: 18%;
}
#cloud{
    width: 18%;
    height: auto;
    position: absolute;
    top: 40%;
    left: 42%;
}
#rain{
    width: 18%;
    height: auto;
    position: absolute;
    top: 40%;
    left: 66%;
}
.page404{
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
}
#backgroundImg_404{
    width: 100%;
    height: 100%;
}
.titlePage404{
    font-size:  6vw;
    position: absolute;
    top: 7%;
    left: 16%;
}
#imgpage404{
    width: 34vw;
    height: auto;
    position: absolute;
    top: 29%;
    left: 47%;
}
.shadow1{
    box-shadow: 0 10px 10px #666666; /* 影（[右][下][ぼかし][影の色]）を指定する */
    }
.shadow1 :hover{
    box-shadow: 0 10px 10px #666666; /* 影（[右][下][ぼかし][影の色]）を指定する */
    }
/***追従するトップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 120%;
    line-height: 1.5rem;
    color: #543f32;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}
/***トップへ戻るボタンここまで***/
#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #fffffc;
    /* 以下のコードを追加 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  .spinner {
    width: 100px;
    height: 100px;
    margin: 200px auto;
    background-color: #f6ad49;
    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
  }
  /* ローディングアニメーション */
  @keyframes sk-scaleout {
    0% {
      transform: scale(0);
    } 100% {
      transform: scale(1.0);
      opacity: 0;
    }
  }
  /* コンテンツ部分の装飾 */
  .gallery {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .loaded {
    opacity: 0;
    visibility: hidden;
  }
  /*配置ずれを調整*/
@media screen and (max-width: 480px) {
	.links{ 
        position: relative;
        text-align: center;
        position: absolute;
        top: 60%;
        left: 31.5%;
    }
	#items{ 
        text-align: center;
        position: absolute;
        top: 37%;
        left: 33%;
    }
}