/*font*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');


body{
    margin:0;
    background:#2d2d2d;
    color:#ffffff;
    font-family: 'Noto Sans JP', sans-serif;
}

div{
    margin:0px;
}


/*背景*/
.back_t1{
    position:absolute;
    top:0;
    left:30vw;
    z-index:-4;
    width: 70vw; /* 幅 */
	height: 50vh;
    background:#666666;
}

.back_t2{
    position:absolute;
    top:0;
    left:0vw;
    z-index:-2;
    width: 100vw; /* 幅 */
	height: 100px;
	border-bottom: 160vh solid #2d2d2d; /* 高さ bottom*/ 
	border-left: 0vw solid transparent; /* 左側下辺の伸び */
	border-right: 60vw solid transparent; /* 右側下辺の伸び */
	box-sizing: border-box;
}

.back_t3{
    position:absolute;
    top:50vh;
    left:30vw;
    z-index:-3;
    width: 70vw; /* 幅 */
	height: 110vh;
    background:#34a4dd;
}


header{
    z-index:3;
    margin:1em;
}

header .menu{
    margin:1em;
    font-size:1.5em;
    text-decoration: none;
    color:#ffffff;
}

.center_img{
    text-align:center;
    padding-top:30vh;
}
.center_img > img{
    width:28vw;
}



/*footerたち*/
footer{
    display:flex;
    background:#333333;
    color:#fff;
    padding: 30px 0 100px;
    margin-top:50vh;
    text-decoration: none;
}
  
footer .logo{
  margin:2em;
}

footer .menu{
  display:flex;
  width:100px;
  padding-left:5em;
}

footer .menu a{
  color:#dddddd;
  text-decoration: none;
}

footer .menu li{
  list-style: none;
  margin-top:0.4em;
}

footer ul{
  list-style: none;
  margin-left:5em;
}
  


/*よく使うやつ*/

.title_b{
    font-size:3em;
    color:#fff;
}

.title2{
    font-size:2.2em;
    color:#fff;
}

.title3{
    font-size:1.4em;
    color:#fff;
}


/*project menu*/

.menu_box{
    display:inline-block;
    vertical-align: top; /*上がずれるから修正*/
    margin:  0 auto;
    width:15.4em;
    height:17em;
    border-radius:0.5em;
    background:#1d1d1d;
    color:#ffffff;
    text-decoration: none;
    transition: 0.5s;
}

.menu_box:hover{
    background:#101010;
    color:#dddddd;
}

.menu_box img{
    margin:0.7em;
    margin-top:1.3em;
    height:8em;
    width:13em;
    border-radius:0.5em;
}

code{
    font-family: 'Source Code Pro', monospace;
}


/*buttonら*/

.btn {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #2d2d2d;
  border-radius: 0.5rem;
  background-color: #2091f3;
}
.btn:hover{
    background-color: #1063ad;
}