@charset "utf-8";



header {
    width: 100%;
  }
  .h-img{
   text-align: right;
  }
  .sp img{
   display: none;
  }
  header img{
    height: 60vh;
    width: 40%;
    object-fit: cover;
    margin-top: 100px;
    margin-right: 180px;
    z-index: 10;
    opacity: 0.8;
}
.back-img{
   background-image: url(../img/Rectangle\ 55.png);
   position: absolute;
   width: 70%;
   height: 600px;
   z-index: -100;
}
.sp{
  display: none;
}
header h1{
   font-size: 65px;
   position: absolute;
   font-family: 'Cambria',sans-serif;
   letter-spacing: 3px;
   margin: 38vh 0 0 34%;
   color: #4B4B4B;
   z-index: 100;
}
header nav {
    position: fixed;
    left: 0;
    width: 100%;
    height: 7vh;
    z-index: 100;
}
.main-header{
  display: flex;
  justify-content: space-between
}
header h3{
  color: #4B4B4B;
}
.header-left{
  margin: 4vh 0 0 4vw;
}
.header-left h3{
  font-size: 25px;
}
.header-left h3:hover{
  color: #98b3ca;
  transition: .2s ease-in-out;
}
.header-list{
  display: flex;
  justify-content: flex-end;
  margin: 4vh 8vw 0 0;
}
.header-list h3{
  font-size: 20px;
  padding: 0 3vw;
}
.header-list :hover{
  color: #98b3ca;
  transition: .2s ease-in-out;
}
 
 main {
   color: #5d5c5c;
 }
 
 main h3{
   text-align: center;
    font-family: 'Cambria',sans-serif;
    margin-top: 10px;
 }
 main h2{
   font-size: 48px;
   font-family: 'Cambria',sans-serif;
   text-align: center;
 }
 
 .works{
   margin-bottom: 160px;
   margin-top: 26vh;
 }
 .works img{
    height: 30vh;
    object-fit: cover;
    margin: 2.16vw;
    position: relative;
    width: 25vw;
    box-shadow: 0 4px 19px 0 rgb(0 0 0 / 7%);
    border-radius: 5%;
 }
 .work-area{
   display: flex;
   flex-wrap: wrap;
   padding: 0 4vw;
   margin-top: 80px;
   justify-content: center;
   margin-bottom: 6vh;
 }
 .work-img{
  position: relative;
  margin-bottom: 6vh;
 }

 .work-area :hover{
  opacity: 1;
 }
 .hover-text{
  position: absolute;
  width: 80%;
  height: 75%;
  top: 12.5%;
   /* transform: translate3d(-50%,-50%,0); */
  left: 10%;
  color: #424040;
  background-color:    rgba(255, 255, 255, 0.65);
  /*透明にして表示させない*/
  opacity: 0;
  /*ホバーの動き方*/
  transition: .2s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 8%;
 }
.text1{
  font-size: 22px;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
} 
 
 .more {
   margin: 0 auto;
   margin-top: 50px;
   text-align: center;
 }
 .more a{
   font-size: 18px;
   font-family: 'Cambria',sans-serif;
   letter-spacing: 2px;
 }
 
 
 .about{
   background-color: #d9d9d932;
   height: 88vh;
 }
 .about h2{
   padding-top: 80px;
 }
.about-center {
   margin-top: 60px;
   display: flex;
   justify-content: center;
}
 .about img{
   height: 200px;
   width: 200px;
   object-fit: cover;
   opacity: 0.85;
   margin-left: 200px;
 }
.text-box {
   width: 30vw;
   margin-top: 50px;
   margin-left: 240px;
   position: relative;
}
.text-box p{
   font-size: 17px;
   letter-spacing: 2px;
}
.about a{
   font-size: 18px;
   font-family: 'Cambria',sans-serif;
   letter-spacing: 2px;
   margin-top: 20px;
}
.more2{
   align-items: center;
   text-align: center;
   margin-top: 20px
}

.aboutarea{
  text-align: center;
  margin-top: 8vh;
}
.about-img img{
  width: 70%;
  object-fit: cover;
}

.about-text{
  background-color: #dfedf9c2;
  width: 35vw;
  position: relative;
  height: 54vh;
  margin-left: 7vw;
  border-radius: 15%;
}
.about-text p{
  letter-spacing: 3px;
  line-height: 4vh;
  position: absolute;
  top: 29%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 26vw;
}
.p2 {
  margin-top: 18vh;
}
.like{
  display: flex;
  align-items: center;
  margin: 4vh 0 0 13vw;
}
.like h2{
  font-size: 18px;
  margin: 0 2vw;
}
.like-list{
  display: flex;
  margin: 11vh 0 18vh 14vw;
}
.like-list img{
  height: 10vh;
  opacity: 0.8;
}
.list1{
  padding: 0 3vw;
}
.list2{
  padding: 0 3vw;
}
.list3{
  padding: 0 3vw;
}
.list4{
  padding: 0 3vw;
}
.like-list p{
  padding-top: 2vh;
  letter-spacing: 2px;
  text-align: center;
}
.workImg{
  padding: 2vh 3vw;
}
.workImg img{
  height: 30vh;
  width: 20vw;
  object-fit: cover;
}
.workImg img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.skillarea{
  display: flex;
  justify-content: center;
  background-color: #afa49532;
  width: 90vw;
  margin: 10vh auto;
}

.skillarea h4{
  font-size: 18px;
  margin-top: 4vh;
  font-weight: 600;
}
.skillarea p{
  letter-spacing: 2px;
  line-height: 4vh;
  margin-top: 3vh;
  width: 18vw;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  font-weight: 500;
  font-size: 15px;
}

.skill-1{
  width: 27vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10vh 0;
}
.skill-2{
  width: 27vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10vh 0;
}
.skill-3{
  width: 27vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10vh 0;
}
.others{
  display: flex;
  justify-content: space-evenly;
  margin: 15vh 0 20vh 0;
}

.others h4{
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.others p{
  letter-spacing: 2px;
  line-height: 4vh;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  font-weight: 500;
  font-size: 15px;
  width: 18vw;
  margin: 3vh auto;
}
.others-1{
  background-color: #afa49532;
  padding: 4vh 3vw;
  border-radius: 15%;
}
.others-2{
  background-color: #afa49532;
  padding: 4vh 3vw;
  border-radius: 15%;
}
.others-3{
  background-color: #afa49532;
  padding: 4vh 3vw;
  border-radius: 15%;
}

footer{
   height: 60px;
   background-color: #ddedfb;
   display: flex;
   align-items: center;
   justify-content: center;
}
footer h3{
   color: rgb(81, 98, 104);
   text-align: center;
   font-weight: 700;
   letter-spacing: 3px;
}
.gMenu{
  display: none;
}





@media screen and (max-width:640px) {

/* 以下に参考サイトのメニュー用CSSを貼り付ける */
/* メニューを画面上部に固定表示しています */
.gMenu {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  display: block;
}
/* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 12px;
  padding-top: 5px;
  height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
  background: #ffc107; /* 色は自由に変更可能です */
  display: block;
  height: 2px; /* 太さ */
  width: 31px; /* 長さ */
  position: relative;
  transition: background .4s ease-out; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background: #ffc107; /* 色は自由に変更可能です */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .4s ease-out; /* 形が変わる時のアニメーション */
  width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
/* 表示されるメニューです */
.gMenu .menu {
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  max-height: 0; /* ★最初は高さを0にして非表示状態に */
  transition: max-height .6s; /* 表示されるときのアニメーション */
  text-align: center;
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
  padding-top: 25px;
  padding-top: 50px;
}
.gMenu .menu li a {
  display: block;
  padding: 24px 20px;
  text-decoration: none;
  text-transform: uppercase;
}
.gMenu .menu li a:hover {
  background-color: #f4f4f4;
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
  display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
  max-height: 338px; /* ★チェックボックスがオンの時高さを338pxにして表示させます */
  transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}

/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}
/* サイトに合わせてオリジナルカスタマイズ */
.gMenu .menu-icon {
  top: 26px;
}
.gMenu .menu-icon .navicon,
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background: #333333;
}




  header h1{
    font-size: 25px;
    margin: 11.5vh 0 0 56vw;
    z-index: 100;
  }
  .back-img{
    background: none;
  }
  header img{
    margin-top: initial;
    z-index: 10;
  }
  .pc {
    display: none;
  }
  .sp{
    object-fit: cover;
    height: 25vh;
    display: block;
    width: 100%;
    opacity: 0.8;
  }
  
  .header-left h3{
    font-size: 20px
  }
  .header-list {
    display: none;
  }


  .works{
    margin-top: 6vh;
    margin-bottom: 6vh;
  }
  .works h2{
    font-size: 24px;
  }
  .works h3{
    font-size: 12px;
  }
  .work-area{
    width: 100vw;
    margin: 0 auto;
    margin-top: 7vh;
  }

  .workImg img {
    height: 19vh;
    width: 40vw;
  }
  .none img{
    display: none;
  }

  .work-img img{
    height: 12vh;
    width: 35vw;
    object-fit: cover;
  }
  .text1{
    padding: initial;
    font-size: 15px;
  }
  .more{
    margin-top: initial;
  }
  .more a{
    font-size: 12px;
    padding: 1vh 5vw;
  }
  .about{
    height: 100%;
    padding-bottom: 10vh;
  }
  
  .aboutarea{
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .about img{
    width: 26vw;
    height: 100%;
    margin: 0 auto;
  }
  .about-text{
    width: 85%;
    height: 48vh;
    margin-top: 4vh;
    margin-left: initial;
  }
  .about-text p{
    font-size: 15px;
    width: 73%;
    top: 20%;
  }
  .p2{
    margin-top: 22vh;
  }
  
  .about-center{
    flex-direction: column;
  }
  .about h2{
    font-size: 24px;
    padding-top: 6vh;
  }
  .about h3{
    font-size: 12px;
  }
 
  .text-box {
    width: 54vw;
    margin-left: initial;
    margin: auto;
    margin-top: 5vh;
  }
  .text-box p{
    font-size: 12px;
    letter-spacing: 2px;
  }
  .about a{
    font-size: 12px;
    padding: 1vh 5vw;
  }
  .like h2{
    font-size: 15px;
  }
  .like-list{
    margin: initial;
    margin-top: 5vh;
    justify-content: space-around;
  }
  .like-list img{
    height: 5vh;
  }

  .skillarea{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }
  .skill-1{
    width: 80%;
    margin: 6vh 0;
  }

  .skillarea img{
    height: 27vh;
  }
  .skillarea h4{
    font-family: YuGothic,'Yu Gothic',sans-serif;
    font-weight: 600;
    width: 60vw;
    text-align: center;
  }
  .skillarea p{
    width: 60vw;
  }
  .skill-1{
    margin: 4vh 0 2vh 0;
  }
  .skill-2{
    margin: 2vh 0;
  }
  .skill-3{
    margin: 2vh 0 4vh 0;
  }
  .others{
    flex-direction: column;
    flex-wrap: nowrap;
    margin:2vh 0 8vh 0;
  }
  .others h4{
    font-family: YuGothic,'Yu Gothic',sans-serif;
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin: 2vh 0;
  }
  .others p{
    width: 70%;
    margin: auto;
  }
  .others-1{
    width: 85%;
    margin: 4vh auto;
    box-shadow: 2px 2px 4px gray;
    border-radius: 5%;
  }
  .others-2{
    width: 85%;
    margin: 4vh auto;
    box-shadow: 2px 2px 4px gray;
    border-radius: 5%;
  }
  .others-3{
    width: 85%;
    margin: 4vh auto;
    box-shadow: 2px 2px 4px gray;
    border-radius: 5%;
  }

  .about-img img{
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  
  
    
  


  .header-list h3{
    display: initial;
  }
  main h2{
    font-size: 35px
  }
  main h3{
    font-size: 12px;
  }
  
  footer{
    height: 4.5vh;
  }
  footer h3{
    font-size: 12px;
  }






 














}