/* 全体設定 */
*,*::after,*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box ;
}
body{
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  color: #707070;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
/* 全体設定ここまで */

/* 基本的な設定 */
.pc{
  display: block;
}
.ssp{
  display: none;
}
.sp{
  display: none;
}
.brsp{
  display: none;
}
.container{
  margin: 0 auto;
  padding: 75px 40px;
  max-width: 900px;
  text-align: center;

  /*　↑ containerには、
  margin横のautoと
  text-alignのcenterだけは
  忘れてはならない。 */

  /* min-width: 800px; */
  /* ↑containerにmin-witdhは
  設定しない方がいいかも。
  「containerがbody要素から
  はみ出てしまう」という
  バグの原因になってしまった。 */

}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
  /* ↑clearfixは、floatを設定した
  タグにかけてしまいがちだが誤りだ。
  clearfixは設定した要素の
  親タグにかけるのだ！ */
}
.h2wrap h2,
.topttl{
  font-size: 50px;
}
.h2wrap p,
.topSubTtl{
  font-size: 20px;
}
/* 基本的な設定ここまで */

/* jQuery動作設定 */

  /* 読み込み時すぐにJQ発動 */
  /* JF Q2 */
  .JF{
    opacity: 0;
    transition: .8s;
    transform: translate(0,2vh);
  }
  .JF.fire{
    opacity: 1;
    transform: none;
  }

  /* 読み込み時すぐにJQ発動ここまで */

  /* 下からふわっと登場 */
  /* JQ Q2 */
  .Q2{
    opacity: 0;
    transition: .5s;
    transform: translate(0,2vh);
  }
  .Q2.fire{
    opacity: 1;
    transform: none;
  }
  /* 下からふわっと登場ここまで */

  /* 遅れて連続登場 */
  /* JQ QD */
  .QD{
    opacity: 0;
    transition: 1s;
    transform: translate(0,2vh);
  }
  .QD.fire{
    opacity: 1;
    transform: none;
  }
  /* 遅れて連続登場ここまで */

  /* コピーライト用 */
  /* JQ Q1 */
  .QE{
    opacity: 0;
    transition: .5s;
  }
  .QE.fire{
    opacity: 1;
  }

  /* コピーライト用ここまで */


/* jQuery動作設定ここまで */

/* fixedメニュー */

.fixedMenu{
  height: 70px;
  width: 100%;
  position: fixed;
  z-index: 999;
  background-color: #13043E;
}
.fixedMenu .container{
  padding: 0px 40px;
}
.fixedMenu a{
  color: #fff;
}
.fmenuCont{
  position: relative;
  height: 70px;
}
.fmenuLeft{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  text-align: left;
}
.fmenuLeft h1{
  font-size: 30px;
}
.fmenuLeft p{
  padding-top: 5px;
  font-size: 12px;
}
.fmenuRight{
  width: 75%;
  max-width: 800px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
}
.Flinklist{
  width: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content:space-between;
}
.fmenuRight li{
  margin-left: 2%;
  display: block;
}
.fmenuRight a{
  padding: 23px 1px;
  display: block;
  transition: .5s;
}
.fmenuRight a:hover{
  background-color: #fff;
  color: #13043E;
}
.fRburg{
  display: none;
}
.Fburglist{
  display: none;
}

/* fixedメニューここまで */

/* ヒーロートップ */

.heroTop{
  background: url("../images/431138-PE6FWY-817.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  height: 800px;
  overflow: hidden;
}
.heroTop .container{
  height: 100%;
  position: relative;
}
.HTcont{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.topTtlwrap p{
  padding-top: 8px;
}
.topBtnWrap{
  padding-top: 20px;
}
.topBtnWrap a{
  padding: 15px 40px;
  margin: 0 10px;
  border-radius: 8px;
  display: inline-block;
  /* a要素でボタンを作る時、
  「ボタンの親タグにpaddingが効かない！」
  と感じたら、ボタン自体のタグに
  「display: inline-block;」
  を入れてみよう。 */
}
.toGreet{
  background-color: #fff;
  color: #707070;
  transition: .5s;
}
.toContactForm{
  background-color: #4E6680;
  color: #fff;
  transition: .5s;
}
.toGreat:hover{
  opacity: 0.7;
}
.toContactForm:hover{
  opacity: 0.7;
}


/* ヒーロートップここまで */

/* 戻るボタン */

.quitBtn{
  position: fixed;
  bottom: 30px;
  right: -60px;
  width: 50px;
  height: 50px;
  background-color: #4E6680;
  color: #fff;
  font-size: 20px;
  transition: .5s;
  border-radius: 25%;
}
.quitBtn:hover{
  border-radius: 50%;
}
.quitWrap{
  position: relative;
  width: 100%;
  height: 100%;
}
.quitWrap p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 戻るボタンここまで */

/* 自己紹介 */

.greet,
.pricesEts{
  background-color: #F2EEEE;
  overflow: hidden;
}
.faceIcon,
.greetContents{
  width: 50%;
}
.faceIcon{
  float: left;
  height: auto;
  padding: 30px;
}
.greetContents{
  float: right;
}
.FiconBorder{
  margin: auto;
  width: 270px;
  height: 270px;
  border: 5px solid #707070;
  border-radius: 50%;
}
.FiconWrap{
  margin: 20px 0 0;
}
.FiconWrap i{
  font-size: 230px;
  margin: 15px 0 0;
  color: #707070;
  display: block;
}
.greetContents{
  padding: 22px;
}
.greetDl{
  padding: 11px 0;
  text-align: left;
}
.greetDt{
  font-size: 28px;
  padding-bottom: 10px;
}
.greetDd,
.skillDocs{
  font-size: 16px;
  line-height: 20px;
  /* ↑「行のスペースが狭すぎるな…」
  と感じたら、「line-height」プロパティで
  行間を開けよう。
  ただし、「どのぐらいスペースを空けたいか」を
  そのまま設定すると失敗するぞ！ */

}

/* 自己紹介ここまで */

/* スキル */
.skills{
  background: url("../images/1584.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.skillsBg{
  background-color: rgba(254, 254, 254, 0.7);
  border-radius: 25px;
  padding: 75px 18px;
}
.skillWrap{
  width: 33.3333%;
  padding: 20px;
  float: left;
  text-align: left;
  line-height: 22px;
}
.skillH3{
  height: 65px;
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  padding-bottom: 20px;
}
.skillicon{
  padding-bottom: 20px;
}
.SiconBorder{
  margin: auto;
  width: 180px;
  height: 180px;
  border: 5px solid #707070;
  border-radius: 50%;
}
.SiconWrap{
  margin: 20px 0 0;
}
.Sicon{
  font-size: 100px;
  text-align: center;
  margin: 32px 0 0;
  color: #707070;
  display: block;
}

.

/* スキルここまで */

/* ポートフォリオ */
.portfolio .h2wrap{
  padding-bottom: 30px;
}
.pfCont{
  padding-top: 30px;
}
.pfLeft,
.pfRight{
  padding: 0 25px;
}
.pfLeft{
  position: relative;
  float: left;
  width: 50%;
  padding-top: 20%;
  overflow: hidden;
}
.pfLeft img{
  width: 100%;
}
.pfRight{
  float: right;
  width: 50%;
  text-align: left;
}
.pfslide_inner{
  width: 80% ;
  margin: auto;
}
.phh3{
  font-size: 24px;
}
.pfdl{
  padding-top: 10px;
}
.pfdl dt{
  background-color: #707070;
  color: #fff;
  padding: 5px 0px 5px 5px ;
  margin-bottom: 15px;
}
.pfdl dd{
  margin-bottom: 15px;
}
.pfLink{
  padding: 10px;
  width: 100%;
  margin: auto;
  border-radius: 5px;
  display: block;
  color: #fff;
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
}
.pfLink i{
  font-size: 24px;
  padding-bottom: 5px;
}
.pfLink{
  padding: 10px;
}
.toGrive{
  background-color: #fe3d00;
  border: 1px solid #fe3d00;
  transition: .3s
}
.toGithub{
  background-color: #707070;
  border: 1px solid #707070;
  transition: .3s
}
.toGrive:hover{
  color: #fe3d00;
  background-color: #fff;
}
.toGithub:hover{
  color: #707070;
  background-color: #fff;
}
.pfAle{
  padding-top: 30px;
  color: #f00;
  font-size: 20px;
}

/* ポートフォリオここまで */

/* 価格・対応形態 */

.tableCont{
  margin: auto;
}
.tableWrap{
  margin: auto;
}
.prices,
.timeTable{
  width: 80%;
  margin: auto;
  border-radius: 25px;
}
.tableTtl{
  text-align: left;
  font-size: 24px;
  padding: 18px 0 6px;

}
.tableCont table{
}
.tableCont th,
.tableCont td{
  border: 1px solid #000;
  background-color: #fff;
  padding: 18px;
  font-size: 16px;
  text-align: left;
}
.prices th,
.timeTable th{
  /* cellspacing: 10px 0 0; */
  background-color: #707070;
  color: #fff;
}

/* 価格・対応形態ここまで */

/* フォーム */

.contactForm{
  background: url("../images/2766.jpg") no-repeat;
  background-size: cover;
}
.contactForm .h2wrap{
  color: #fff;
}
.C_Form{
  padding: 30px 0 0;
  max-width: 400px;
  margin: auto;
}
.C_Form textarea,
.C_Form input,
.C_Form button{
  width: 100%;
  float: left;
  border: 1px solid #fff;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  color: #000;
  padding: 10px 18px;
  margin: 20px 0 0;
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;

}
.C_Form textarea:focus,
.C_Form input:focus{
  outline: 0;
}
.C_Form textarea::placeholder,
.C_Form input::placeholder{
  color: #fff;
}
.C_Form input[type="submit"],
.C_Form button[type="reset"]{
  padding: 10px 0;
  margin: 20px 0 0;
  font-size: 22px;
  background-color: rgba(78, 102, 128, 0.4);
  color: #fff;
  cursor: pointer;
  transition: .5s;
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
.C_Form button[type="reset"]{
  background-color: rgba(128, 87, 78, 0.4);
  transition: .5s;
}
.C_Form input[type="submit"]:hover,
.C_Form button[type="reset"]:hover{
  background-color: rgba(255, 255, 255, 1);
  color: rgba(78, 102, 128, 1);
}

/* フォームここまで */

/* コピーライト */

.copyright{
  background-color: #363636;
  color: #fff;
}
.copyright .container{
  padding: 10px 40px;
}
.error{
  color: #f00;
  text-align: left;
}

/* コピーライトここまで */
















;