@charset "UTF-8";


/* 全体に適用 */
html * {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  max-width: 980px;
  padding: 0 10px;
  margin: 0 auto;
}
h2 {
  color: #b7657b;
  border-bottom: 3px solid;
}
h3 {
  color: #f2b4b4;
}
img {
  max-width: 100%;
}
a:link {
  color: #d25833;
}
a:visited {
  color: #d25833;
}
a:hover {
  color: #e3937a;
}
a:active {
  color: #ff6a3b;
}


/* ヘッダーに適用 */
header {
  color: #fff;
  background-color: #78c4d4;
  text-align: center;
  padding: 30px 0;
  
}
h1 {
  margin: 0;
}


/* ナビゲーションに適用 */
nav {
  background-color: #8f4f4f;
}
nav ul {
  display: flex;
  padding: 0;
  margin: 0;
}
nav a {
  width: 1000px;
}
nav a:hover {
  background-color: #b16464;
}
nav li {
  list-style-type: none;
  text-align: center;
  padding: 20px 0;
}
nav a:link {
  color: #fff;
  text-decoration: none;
}
nav a:visited {
  color: #fff;
  text-decoration: none;
}
nav a:hover {
  color: #fff;
  text-decoration: none;
}
nav a:active {
  color: darkgray;
  text-decoration: none;
}


/* フッターに適用 */
footer {
  color: #fff;
  background-color: #8f4f4f;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}
#copyright {
  margin: 0;
}


/* 個別に適用 */
.work {
  display: flex;
}
.work .web-photo {
  flex: 1 1 auto;
}
.work img{
  width: 1000px;
  border: 3px solid black;
}
.tool {
  text-align: right;
  font-size: 12px;
  margin: 0;
  padding: 10px 0;
}
.work .web-description {
  flex: 0 0 350px;
}
.work .web-description p {
  margin-top: 56px;
  margin-left: 10px;
}

/* レスポンシブウェブデザイン */
@media (max-width: 767px) {
  .work {
    display: block;
  }
  .work .web-description p {
    margin-top: 0;
    margin-left: 0;
  }
}