html {
  font-size: 62.5%;
}
 
body {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
}
 
header {
  max-width: 960px;
  margin: 0 auto;
}
 
.hero-img {
  width: 100%;
}
 
.navi {
  display: flex;
  background-color: #584131;
  color: #fff;
  list-style-type: none;
  justify-content: space-around;
  padding-left: 0;
}
 
nav ul li {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
}
 
nav a {
  color: #fff;
}

.current {
  background-color: #f47402;
}
 
.year {
  max-width: 960px;
  margin: 50px auto 10px;
  font-size: 10vw;
  color: #bbb;
  padding: 0 20px;
}
 
.list {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
}
 
.list-item {
  width: 100%;
}
 
.list-item-img {
  text-align: center;
}
 
.list-item-img img {
  max-width: 220px;
}
 
.menu-title {
  padding-left: 10px;
  color: #584131;
}
 
.list-item-txt {
  padding: 0 20px;
  font-size: 1.6rem;
}
 
 
@media (min-width: 376px) {
  .list-item {
    width: calc(100%/2);
  }
  .list-item-img img {
    width: 90%;
  }
}
 
@media (min-width: 640px) {
  .list-item {
    width: calc(100%/3);
  }
}
 
@media (min-width: 769px) {
  .list-item {
    width: calc(100%/4);
  }
  .year {
    font-size: 9rem;
  }
}
 
.sns {
  max-width: 960px;
  margin: 0 auto;
  list-style-type: none;
  padding-left: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}
 
.sns li {
  width: 46px;
  padding-left: 3px;
}
 
.sns-icon {
  width: 100%;
}
 
footer {
  background-color: #f47402;
  /* padding: 70px 0 30px; */
  padding: 50px 0 30px;
  margin-top: 50px;
}
 
.copyright {
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
}

/* add */
.btn {
  border-radius: 5px;
  background-color: #f47402;
  margin-left: 20px;
  padding: 10px;
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
}

.btn_invalid {
  border-radius: 5px;
  background-color: #abb3ad;
  margin-left: 20px;
  padding: 10px;
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
}

.btn_blue {
  border-radius: 5px;
  background-color: #4db9eb;
  margin-left: 20px;
  padding: 10px;
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
}

.used_tag {
  font-size: 1.6rem;
}

.embedded {
  max-width: 960px;
  margin: 50px auto 10px;
  padding: 0 20px;
}

/* skills ページ ここから↓ */
#contents {
	width: 960px;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#main {
	width: 960px;
	margin-bottom: 30px;
	float: left;
}
#main h1 {
	/* background-image: url(../images/h1.png);
	background-repeat: no-repeat; */
	padding: 8px 0 3px 40px;
	margin: 0 0 20px 0;
	font-size: 162%;
}

table {
	width: 960px;
	margin-bottom: 20px;
	border-collapse: collapse;
}
table caption {
	text-align: left;
}
table th, table td {
	border: 1px solid #7aa7a2;
	padding: 10px;
	width: 190px;
	text-align: center;
}
table th {
	background-color: #cce8e4;
}
table .price {
	width: 500px;
}
table td.price {
	text-align: left;
}
/* skills ページ ここまで↑ */