* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:root {
  --nav-height: 10vh;
  --nav-background: #ccc;
}

nav {
  display: flex;
  padding: 0 50px;
  align-items: center;
  width: 100%;
  height: var(--nav-height);
  background: var(--nav-background);
  position:fixed;
  opacity:0.6;
}

.logo h1 {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* nav-links */

.nav-links {
  display: flex;
  height: var(--nav-height);
  align-items: center;
  margin-left: auto;
}

.nav-links li {
  list-style: none;
  margin: 0 15px;
  height: var(--nav-height);
  line-height: var(--nav-height);
  text-align: center;
}

.nav-links li a {
  text-decoration: none;
  position: relative;
}

/* menu */

.menu {
  cursor: pointer;
  background: var(--nav-background);
  border: none;
  outline: none;
  display: none;
}

.menu .bar {
  width: 20px;
  height: 2px;
  background: #000;
  border-radius: 5px;
  opacity: 1;
  visibility: visible;
  transition: 0.5s ease;
  transform-origin: left;
}

.menu .bar1 {
  margin-bottom: 5px;
}

.menu .bar3 {
  margin-top: 5px;
}

.menu.toggle .bar1 {
  transform-origin: left;
  transform: rotate(45deg);
}

.menu.toggle .bar2 {
  opacity: 0;
  visibility: hidden;
}

.menu.toggle .bar3 {
  transform-origin: left;
  transform: rotate(-45deg);
}

/* responsive */

@media screen and (max-width: 700px) {
  .nav-links {
       flex-direction: column;
       position: fixed;
       top: 0;
       left: 100%;
       width: 300px;
       height: 100%;
       background: var(--nav-background);
       margin-top: var(--nav-height);
       transition: 0.5s ease-out;
  }
  .nav-links li {
       height: var(--nav-height);
       line-height: var(--nav-height);
       text-align: center;
       width: 100%;
       display: block;
  }
  .menu {
       display: block;
       margin-left: auto;
  }

  .menu.toggle + .nav-links {
       transform: translateX(-100%);
  }

}













.main {
  clear: both;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 0 100px;
  text-align: center;
  text-size-adjust: 100%;
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #636363;
}


.main2 {
  clear: both;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 0 100px;
  text-align: center;
  text-size-adjust: 100%;
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: #ccc;
}

.about{
  margin: 0 auto;
  padding: 80px 0 30px;
  text-align: center;
  text-size-adjust: 100%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: antiquewhite;
  color: #636363;
}

*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
  -ms-flex-wrap: wrap; /* IE10 */
  background-color: antiquewhite;
  margin: 0 auto;
  padding: 80px;
  color: #636363;
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 100%;
	}
}


table {
  border-collapse: collapse;
  width: 500px;
  margin: 80px auto;
  }
  
 th,td {
  border: solid 1px #ccc;
  padding: 5px;
 }
  
 input {
  box-sizing: border-box;
  width: 100%;
 }
  
 @media (max-width: 600px) {
  table {
  width: 90%;
  margin: 40px auto;
  }
  th,td {
  display: block;
  text-align: left;
  width: 90%;
  }
 }
 

img {
  width: 100%;
  height: auto;
}



.foo{
  display: flex;
  flex-wrap:wrap;
  padding: 100px;
}
.foo li {
  width: calc(100%/4);/*←画像を横に4つ並べる場合*/
  padding:5px;/*←画像の左右に5pxの余白を入れる場合*/
  box-sizing:border-box;
  margin:30px auto;
  display: inline-block;
  width: 250px;
  height: 350px;
  background: #d5d7da;
  box-shadow: 3px 3px 6px -2px #555,
  3px 3px 8px rgba(255,255,255,0.8) inset;
}
.foo li img {
max-width:100%; /*画像のはみだしを防ぐ*/
height: auto; /*画像の縦横比を維持 */
border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

.foo p{
  font-size: 15px;
}

.foo li {
	display: block;
	cursor: pointer;
	max-width: 300px;
	margin: 1em auto;
	padding: 20px;
	border-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: inherit;
	background: #dfdfdf;
	box-shadow: 0 6px 0 #9b9b9b, 0 12px 0 rgba(0,0,0,.2);
	transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
}
.foo li:hover {
	background: #818181;
	box-shadow: 0 3px 0 #636363, 0 6px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
}
.foo li:active {
	color: #ddd;
	background: #636363;
	box-shadow: 0 0 0 #4d4d4d, 0 0 0 rgba(0,0,0,.2);
	transform: translateY(6px);
	transition-duration: .1s;
}

@media screen and (max-width: 960px) {
	.foo p{
    font-size: 10px;
  }
  h3{
    font-size: 14px;
  }
  h4{
    font-size: 13px;
  }
  .foo li {
    width: 250px;
    height: 250px;
  }
}

a{
  text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
  color: black;
}


.footer{
  color:#fff;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 0;
  background-color: #444;
}





.follow-me {
  list-style: none;
  width: 100%;
  margin:0 auto;
  overflow: hidden;
  padding: 0;
  
}
.follow-me li {
  float: center;
  margin: 0 auto;
  padding: 0;
}


.follow-me a::before {
  background-color: #eee;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 44px; /* Button height */
  line-height: 44px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 44px; /* Button width */
}
.follow-me a:hover::before {
  color: #fff;
}

.follow-me a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me a[href*="twitter.com"]::before        { content: "\f099"; }

.follow-me a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me a[href*="twitter.com"]:hover::before        { background-color: #55acee; }


.sns{
  width: 100%;
  margin:0 auto;
  padding:100px;
  background-color: #444;
  max-width: 1500px;
}