/* PC・スマホ共通スタイル */
* {
  box-sizing: border-box;
  background-color: #ffffff;
  color: #000;
}

p {
  font-size: 18px;
}

body {
  max-width: 1080px;
  margin: 0 auto 0 auto;
  font-family: "Noto Sans Japanese" Meiryo, Arial, sans-serif;
}

/* ヘッダー */
/* ナビゲーション */
.myprofile {
  font-size: 34px;
  border: solid 1px black;
  padding: 10px 25px;
  margin-left: 20px;
}

nav {
  font-size: 34px;
  font-weight: bold;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav ul {
  display: flex;
}
nav li {
  list-style: none;
}
nav a {
  text-decoration: none;
}
nav li a {
  margin-left: 20px;
  margin-right: 20px;
}

/* アーティクルスタイル*/
.image-camera {
  width: 100%;
  text-align: center;
}

/* Aboutスタイル */
h2 {
  font-size: 34px;
  text-align: center;
}
#about-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
#about-flex div {
  margin: 20px;
}
h3 {
  font-size: 24px;
}

/* Worksのスタイル */
#works-flex {
  display: flex;
  justify-content: center;
}
#works-flex div {
  width: 20%;
  margin: 0 10px;
}
#works-flex img {
  width: 100%;
}
#works-flex p {
  text-align: center;
  padding: 0 20px;
}

/* フッター */
#copylight {
  text-align: center;
}

/* 画面幅が767px以下のとき */
@media screen and (max-width: 767px){
  /* スマートフォン用のスタイル */

.myprofile {
  font-size: 20px;
  border: solid 1px black;
  padding: 5px 5px;
}
nav {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 nav li a {
  margin: 10px;  
}
.image-camera {
  overflow: hidden;
  height: 50vw;
}
.image-camera img {
  height: 100%;
  margin-left: 50%;
  transform: translate(-50%, 0);
  }

#about-flex {
  flex-direction: column;
}
#about-flex div {
  margin: 0;
}
#works-flex {
  flex-direction: column;
}
#works-flex div {
  width: 100%;
  text-align: center;
  margin: 0 5px;
  padding-bottom: 30px;
}
#works-flex img {
  width: 90%;
}
#works-flex p {
  font-size: 12px;
}
}